當你把連結貼進聊天室或發到社群,跳出一張整齊的卡片——圖片、標題、簡介——那張卡片是靠頁面 HTML 裡的 meta 標籤組出來的。填對了,你的連結在哪都很專業;不填,就只剩一條光禿禿的網址,或一張被亂裁的圖。
兩類標籤,兩種任務
它們常被混為一談,其實是給不同系統讀的:
- SEO meta 標籤——
<title>與<meta name="description">。這是 Google 等搜尋引擎在結果裡顯示的內容。 - Open Graph 標籤——
og:title、og:description、og:image、og:url、og:type。由 Facebook 提出,如今已是事實標準,多數平台(LINE、LinkedIn、Slack、Discord)都靠它做連結預覽。 - Twitter Card 標籤——
twitter:card等。X 會退回讀 Open Graph,但twitter:card決定你拿到的是小縮圖還是大橫幅。
三者你都會想要。用 Meta 標籤產生器在同一張表單裡一次填完,就不必逐條手寫。
一組最精簡的標籤
以下是可以直接貼進 <head> 再調整的核心:
<title>你的頁面標題</title>
<meta name="description" content="這一頁的一句話摘要。">
<meta property="og:title" content="你的頁面標題">
<meta property="og:description" content="這一頁的一句話摘要。">
<meta property="og:image" content="https://example.com/preview.png">
<meta property="og:url" content="https://example.com/page/">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">注意:Open Graph 標籤用 property=,而 SEO 描述與 Twitter 標籤用 name=——搞混這兩個,是標籤悄悄失效的經典原因。summary_large_image 給你大橫幅;換成 summary 則是小方形縮圖。
真正重要的尺寸與長度
- 標題——盡量壓在約 50–60 字元,搜尋結果才不會被截斷。
- 描述——約 150–160 字元,同樣道理。
- og:image——1200×630 像素(1.91:1)是大預覽的安全尺寸。務必用 絕對網址(
https://…),別用相對路徑。
到底誰決定顯示哪張圖、哪段字
平台會照一條備援順序找。圖片先找 og:image,再找 twitter:image,兩個都沒有時才從頁面的 <img> 去猜——這就是為什麼有時跑出一個莫名的 logo 或廣告。文字同理:og:title 勝過純 <title>、og:description 勝過 meta description。
尺寸門檻也有影響。許多平台會忽略小於約 200×200 像素的圖,或把它縮成小縮圖,所以圖太小(接近 icon 尺寸)時,不管標籤怎麼填都生不出大卡片。要精準做到 1200×630,可看如何裁切圖片。
為什麼預覽不更新
最常見的挫折:你改好標籤、重新分享連結,結果還是舊的預覽。那不是你標籤壞了——社群平台會在第一次看到某網址時把預覽快取起來。用該平台的官方偵錯工具(例如 Facebook Sharing Debugger)強制重抓一次,新卡片就會出現。
預覽壞掉怎麼除錯
卡片顯示不對時,把網址丟進該平台的官方偵錯工具——Facebook Sharing Debugger 與 LinkedIn Post Inspector 都能即時重抓,並列出它們實際讀到哪些標籤,你就能看到爬蟲眼中的樣子。什麼都不顯示時,常見元凶有:
og:image用了相對路徑,或圖藏在登入後面,爬蟲抓不到。- 頁面或圖片沒有公開,或
robots.txt擋掉了爬蟲。 - 標籤寫在
<body>裡,或由爬蟲不會執行的 JavaScript 動態插入。
找出原因、在偵錯工具重抓一次,修好的卡片就會傳播給之後每個分享連結的人。
標籤放哪裡
以上全都放在 HTML 的 <head> 裡,不是 <body>。多數網站建置工具與 CMS 都有「自訂 head」或每頁 SEO 欄位可貼。