Meta 標籤產生器
填一張表單就能產生 title、description、canonical、robots、Open Graph 與 Twitter Card 標籤，直接複製或下載。
頁面 Meta 資料
HTML 輸出
輸入頁面資料後即可產生 Meta 標籤。Meta 標籤產生器會產生什麼
Meta 標籤是頁面 head 裡那幾行決定「還沒點進來之前長什麼樣」的設定：搜尋結果裡的藍色標題、下方的灰色描述、告訴搜尋引擎該收錄哪個版本的 canonical，以及連結被分享時組出預覽卡的 Open Graph 與 Twitter 標籤。
手寫這些標籤不只重複，還很容易出錯：description 裡一個沒轉義的引號就會讓整行壞掉，少了 og:image 則會讓大圖卡片悄悄變成純文字連結。這個產生器把欄位集中在一處，對每個值做轉義，並按你手寫時該有的順序輸出。
如何產生 meta 標籤
- 填寫頁面標題與 meta description；右側計數器會顯示建議上限 60 與 160 字元。
- 補上 canonical URL、作者與頁面語言，並決定是否允許搜尋引擎索引與追蹤連結。
- 貼上社群分享圖片網址並選擇 Twitter Card 類型；沒有分享圖就留空。
- 按「產生 meta 標籤」，複製 HTML 或下載後貼進頁面的 head 裡。
Meta 標籤範例
博客文章
標題「base64 編碼原理」、canonical /blog/how-base64-encoding-works、index + follow
title、description、canonical、robots index/follow、og:title、og:description、twitter:card summary_large_image
商品頁
標題、描述、指向商品照的 og:image、主題色
基本標籤加上 og:image 與 twitter:image，分享時會顯示商品照
內部後台頁
不填標題，robots 切為 noindex + nofollow
charset、viewport、robots noindex/nofollow 與 twitter:card，不含任何社群預覽標籤
UrsaKit 與其他 meta 標籤產生器比較
| 比較項目 | UrsaKit | metatags.io | smallseotools | 手寫 |
|---|---|---|---|---|
| 價格 | 免費，免註冊 | 免費 | 免費，含廣告 | 免費 |
| 執行位置 | 你的瀏覽器 | 你的瀏覽器 | 對方伺服器 | 你的編輯器 |
| 字數計數 | 有，60 / 160 | 有 | 有 | 無 |
| robots 控制 | 有 | 無 | 有 | 手動 |
| 屬性值轉義 | 有 | 有 | 部分 | 手動 |
| 社群預覽卡 | 僅輸出標籤 | 有 | 無 | 手動 |
常見問題
常見問題
這個 meta 標籤產生器要收費嗎？
不用。產生、複製與下載都免費，免註冊也沒有次數限制。
我的資料會被上傳嗎？
不會。標籤在瀏覽器內以 JavaScript 組出，你輸入的標題與網址不會離開頁面。
標題與描述該多長？
標題約 60 字元、描述約 160 字元是常見目標，超過搜尋引擎會截斷。這些是建議值不是硬限制，超過仍可正常產生。
什麼時候該用 noindex？
不該出現在搜尋結果的頁面，例如內部儀表板、測試環境或感謝頁。若頁面上的連結仍要被爬取，follow 保持開啟即可。
社群圖片留空會怎樣？
產生器仍會輸出 og:title 與 og:description，但不會有 og:image，分享時會退回純文字卡片而不是大圖。
產生的 HTML 要貼在哪裡？
貼在頁面 head 裡、charset 與 viewport 之後。多數框架都有 metadata 或 head 元件，可以直接把同一組值填進去。