跳到主要內容
Yunknow Toolbox

← 返回部落格

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

當你把連結貼進聊天室或發到社群,跳出一張整齊的卡片——圖片、標題、簡介——那張卡片是靠頁面 HTML 裡的 meta 標籤組出來的。填對了,你的連結在哪都很專業;不填,就只剩一條光禿禿的網址,或一張被亂裁的圖。

一組完整的標籤,是產生出來的而不是描述出來的。 把欄位填進我們的meta 標籤產生器,得到這些(只顯示前半):

<title>Free Online Toolbox</title>
<meta name="description" content="Image and PDF converters that run in your browser.">
<link rel="canonical" href="https://yunknow.cc/">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="Free Online Toolbox">
<meta property="og:description" content="Image and PDF converters that run in your browser.">

兩件值得從裡面抄走的事。og:type 有出現 —— 那是最常被忘記的標籤,少了它有些爬蟲會整張卡片都不做。另外計數器顯示「Title 19 chars」與「Description 50 chars」,因為 Open Graph 的標題在多數動態牆上被截斷的時機,遠早於 HTML。

兩類標籤,兩種任務

它們常被混為一談,其實是給不同系統讀的:

  • 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 則是小方形縮圖。

下面是一組完整的標籤,由我們自己的Meta 標籤產生器從五個欄位產生出來:

<title>Free Online Toolbox</title>
<meta name="description" content="Image and PDF converters that run in your browser.">
<link rel="canonical" href="https://yunknow.cc/">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="Free Online Toolbox">
<meta property="og:description" content="Image and PDF converters that run in your browser.">
<meta property="og:url" content="https://yunknow.cc/">
<meta property="og:image" content="https://yunknow.cc/og.png">
<meta property="og:site_name" content="Yunknow">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Free Online Toolbox">
<meta name="twitter:description" content="Image and PDF converters that run in your browser.">
<meta name="twitter:image" content="https://yunknow.cc/og.png">

有三件事值得注意。og:type 在裡面 —— 它是最常被漏掉的一個標籤,而 Facebook 只在爬蟲心情好的時候才幫你預設成 website。twitter:card 是 summary_large_image,這才是讓大圖預覽出現的原因;不寫就會拿到一個小方塊。而描述重複了三次、每個命名空間一份,因為沒有任何一方會去讀別人命名空間的那一份。

真正重要的尺寸與長度

  • 標題——盡量壓在約 50–60 字元,搜尋結果才不會被截斷。
  • 描述——約 150–160 字元,同樣道理。
  • og:image——1200×630 像素(1.91:1)是大預覽的安全尺寸。務必用 絕對網址(https://…),別用相對路徑。

欄位旁邊的計數器是大家會跳過的部分。那個標題回報 Title 19 chars、描述回報 Description 50 chars。這兩個數字比標籤清單本身更重要:Facebook 與 LinkedIn 會在卡片裡截斷過長的標題,而描述短於大約 60 個字元時,常常會被整個丟掉、改用頁面的第一段。照計數器寫,不要照欄位寬度寫。

到底誰決定顯示哪張圖、哪段字

平台會照一條備援順序找。圖片先找 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 欄位可貼。

相關工具

#seo#web