認識 meta 標籤與社群分享卡片
這個工具會產生什麼
meta 標籤是頁面 <head> 裡看不見的訊號,用來告訴搜尋引擎和社群平台該如何為你的內容下標題、寫摘要並呈現。這個工具會把一份簡短的表單轉成那段標記:輸入標題、描述、關鍵字、作者和 canonical URL,它就會組出對應的 <meta> 與 <link> 標籤,連同 Open Graph 和 Twitter Card 的對應標籤一併輸出。產生的 HTML 會隨著你輸入即時更新,還有預覽可以看到結果在搜尋頁面上大概的樣子。
適合在什麼時候使用
只要頁面的 head 區塊需要手動填寫,它就派得上用場:靜態網站、到達頁、CMS 版型,或是以網頁形式開啟的電子郵件都算。檢查現有頁面時也很好用:把預計使用的標題和描述貼上,字數計數器就會標出 Google 可能會截斷的部分。行銷人員會用它來掌控連結貼到 Slack、X、LinkedIn 或 Facebook 時所顯示的圖片、標題和摘要,而不是交給這些平台自行猜測。
範例:標題、描述與 og: 標籤
假設你輸入標題「手工陶瓷馬克杯」、一句話的描述,以及一張圖片的網址。輸出會包含 <title>手工陶瓷馬克杯</title>、<meta name="description" content="..."> 以及 canonical 的 <link>。除此之外,它還會為 Open Graph 寫出 og:title、og:description、og:image 和 og:type,並為 Twitter Card 寫出 twitter:card、twitter:title 和 twitter:image。把 OG 圖片設為 1200x630 像素,就能得到多數社群平台顯示的大張卡片。
建議長度與特殊情況
把標題控制在約 60 個字元、描述控制在 160 個字元以內,搜尋引擎才會完整顯示;超過上限時內建的計數器會提醒你。robots 指令(index/noindex、follow/nofollow,以及 noarchive 和 nosnippet)會集中在單一個 <meta name="robots"> 標籤裡,用來控制檢索與快取。canonical URL 應指向頁面的首選版本,以避免重複內容的問題。標記整理好之後,把整段複製起來,貼到結尾的 </head> 標籤前面即可。