跳到主要內容

Meta 標籤產生器

填幾個欄位,即時產生 SEO 的 title/description、Open Graph 與 Twitter Card 標籤,附搜尋預覽。

Google 搜尋預覽

什麼是 Meta 標籤產生器?

Meta 標籤是放在 HTML <head> 裡、給搜尋引擎和社群平台讀的資訊。這個Meta 標籤產生器讓你填幾個欄位,就即時產生 SEO 的 title/descriptionOpen GraphTwitter Card 標籤,並附上 Google 搜尋摘要預覽,讓你邊填邊看效果。全程在你的瀏覽器本機完成。

如何使用

  1. 填入標題、描述、頁面網址與預覽圖網址。
  2. 右側即時顯示搜尋預覽與字數;下方產生完整標籤。
  3. 按「複製全部」,貼進你網站的 <head>

使用情境

  • 為新頁面一次補齊 SEO 與社群分享標籤。
  • 檢查標題、描述長度是否會被搜尋結果截斷。
  • 需要結構化資料或其他工具?看 JSON 格式化 整理 JSON-LD。

為什麼分享連結時,縮圖和標題沒更新?

你剛把 Open Graph 標籤填好、上線,興沖沖貼到 Facebook 或 LINE,結果縮圖還是舊的、甚至一片空白——這幾乎都不是標籤產生錯,而是社群平台把預覽「快取」住了。平台第一次抓到你的頁面後會存一份,之後同一網址不會每次重抓。解法是用各平台的官方偵錯/重抓工具(如 Facebook Sharing Debugger)強制重新抓取一次。另外三個最常見的坑:一是 og:image 用了相對路徑,社群端解不到,一定要用 https:// 開頭的絕對網址;二是圖片太小,多數平台要求至少 200×200、建議 1200×630;三是把標籤放錯位置——它們必須在 <head>,放進 <body> 會被忽略。都確認過還是不動,先跑一次重抓工具再說。要整理頁面用的 JSON-LD 結構化資料,可搭配 JSON 格式化

常見問題

Open Graph 和一般 meta 標籤差在哪?

一般的 <title> 與 <meta name="description"> 是給搜尋引擎看的;Open Graph(og:)與 Twitter Card 則決定連結被分享到 Facebook、LINE、X 等平台時,顯示的標題、描述與縮圖。兩者用途不同,最好都填。

description 應該多長?

Google 搜尋摘要通常顯示約 150–160 字元,超過會被截斷。工具會即時顯示字數,方便你控制長度。

og:image 有什麼建議尺寸?

社群縮圖建議 1200×630 像素(1.91:1),用絕對網址(https 開頭)。太小或用相對路徑,分享時可能不顯示。

這些標籤要放哪裡?

全部放進 HTML 的 <head> 區塊內。多數靜態網站或 CMS 都有「自訂 head」或 SEO 欄位可貼。

延伸閱讀

Open Graph 與 Meta 標籤:到底是誰決定你的連結預覽 →

嵌入此工具

把這個工具免費放進你的網站或部落格 —— 複製下面的程式碼貼上即可(內含一條回到本站的連結)。