你把連結貼到團隊頻道或 LinkedIn 貼文裡，等著預覽卡片出現。結果，精心設計的圖片和標題沒顯示出來，看到的卻是被拉伸、裁切得很奇怪的 Logo、上個月的標題，甚至什麼都沒有。
連結預覽正常時像魔法，出錯時又讓人摸不著頭緒。其實，它遵循一套簡單的規則，主要建立在名為 Open Graph 的標準上。幾乎所有預覽問題，都能歸結為幾種可以修正的原因。
#連結預覽如何運作
當你在 Slack、LinkedIn、Facebook、X、Discord、WhatsApp 或 iMessage 等平台分享 URL，平台會在背景擷取這個網址。爬蟲會下載網頁的 HTML，讀取 <head> 區段裡的特定標籤。這些爬蟲通常有自己的使用者代理識別字串，例如 facebookexternalhit、LinkedInBot 或 Slackbot。
平台根據這些標籤產生預覽卡片，包含標題、簡短說明、圖片和網站名稱。如果沒有標籤，平台只能自行判斷，通常會採用網頁的 <title> 和找到的第一張圖片，因此預覽裡就可能出現一個小小的 Logo，或一張不相關的橫幅。
接著，平台會快取預覽。URL 被擷取後，同一張卡片往往會沿用一段時間，就算你已經更新網頁也一樣。這就是為什麼經常會遇到「明明改好了，顯示還是不對」的情況。
#哪些 Open Graph 標籤最重要
Open Graph 協定 由 Facebook 在 2010 年推出，如今幾乎所有提供連結預覽的平台都會讀取它。它由一組 <meta> 標籤組成，標籤的 property 屬性以 og: 開頭。
核心標籤如下：
<meta property="og:title" content="2026 年節慶送禮指南">
<meta property="og:description" content="團隊精選的二十款禮物，每款價格都低於 $50。">
<meta property="og:image" content="https://www.example.com/images/gift-guide-2026.jpg">
<meta property="og:url" content="https://www.example.com/gift-guide">
<meta property="og:type" content="website">
<meta property="og:site_name" content="範例商店">
og:title 和 og:description 決定顯示的文字。標題盡量控制在 60 個字元左右，說明控制在 150 個字元左右，因為超過這個長度，大多數平台就會截斷內容。
og:image 是影響使用者互動最重要的標籤。常用的圖片尺寸是 1200 × 630 像素，長寬比為 1.91:1，在大多數平台都能正常呈現。請使用以 https:// 開頭的絕對 URL，控制檔案大小，並確保圖片可以公開存取。
og:url 告訴平台網頁的標準網址，幫助平台將同一內容的不同分享歸在一起。
#X 與 Twitter Card 標籤
X 除了使用 Open Graph，也有自己的標籤，名稱仍然叫 Twitter Cards。如果沒有 X 專用標籤，多數欄位會改用 Open Graph 的對應值。不過，有一個標籤值得明確加上：
<meta name="twitter:card" content="summary_large_image">
少了這個標籤，X 可能只顯示一張小方形縮圖，而不是大圖卡片。如果希望 X 的預覽與其他平台不同，也可以設定 twitter:title、twitter:description 和 twitter:image，不過大多數網站直接沿用 Open Graph 的值。
#短網址如何傳遞預覽資訊
分享短網址時，平台爬蟲會先請求這個短 URL。運作正常的短網址服務會回傳指向目標網址的 HTTP 轉址，通常是 301 或 302。爬蟲跟隨轉址載入目標網頁，再讀取網頁的 Open Graph 標籤。
也就是說，短網址的預覽就是目標網頁的預覽。只要目標網頁的 Open Graph 標籤設定妥當，短網址就會自動顯示合適的預覽。修改短網址的目標位置後，等平台快取更新，預覽也會跟著改變。
前提是使用真正的伺服器端轉址。爬蟲通常不會執行 JavaScript，所以短網址服務若採用 JavaScript 轉址、中間廣告頁或「點擊繼續」畫面，預覽就會顯示這個中間頁面，而不是你的內容。可以用下方的 curl 指令檢查轉址鏈。
#為什麼連結預覽不正確或沒有顯示
網頁沒有 Open Graph 標籤。平台只能自行判斷。至少要加入 og:title、og:description 和 og:image。
圖片使用相對 URL，或無法公開存取。og:image 若填入 /images/card.jpg 這類網址，在許多平台會失效。請使用完整的 https:// URL，並確認圖片不需要登入，也沒有被防盜連設定或防火牆規則擋住。
爬蟲被封鎖。機器人防護、請求速率限制或防火牆可能阻擋預覽爬蟲，也可能回傳驗證頁面。檢查安全設定，必要時允許已知的預覽爬蟲存取。
標籤由 JavaScript 加入。如果網站透過用戶端 JavaScript 產生 <head>，不執行指令碼的爬蟲就看不到這些標籤。改用伺服器端渲染或靜態產生 meta 標籤，就能解決。
標籤出現的位置太後面。有些爬蟲只讀取 HTML 文件的前段。請把 Open Graph 標籤放在 <head> 靠前的位置，排在大型內嵌指令碼或樣式之前。
平台快取了舊版本。如果連結第一次被分享之後才修正標籤，平台可能仍會顯示舊卡片，直到快取更新，或你強制重新擷取。
#智慧轉址與 A/B 測試也會改變預覽
有些短網址功能會依據造訪者的情況決定目標位置。這對使用者很實用，但爬蟲偶爾會因此取得意料之外的內容。
使用依地理位置導向的連結時，爬蟲所在的位置決定它會看到哪個目標網頁。爬蟲通常在資料中心執行，而且經常位於美國。因此，若連結將美國訪客導向一個網頁，其他訪客導向另一個網頁，所有人看到的預覽都會是美國網頁的版本。
依裝置導向也是一樣的道理。爬蟲看起來不像 iPhone 或 Android 手機，因此通常會看到你設定的桌面版或備用目標網頁。
使用連結輪替進行分流測試時，爬蟲會看到當下被分配到的目標網頁，平台接著就會快取這份預覽。如果不同版本的 Open Graph 圖片不一樣，分享卡片可能與多數人實際開啟的網頁不一致。
簡單的解法是，讓條件轉址或輪替連結的所有目標網頁使用相同的 Open Graph 標題、說明與圖片，或至少讓這些內容適合所有受眾。
#如何測試與更新連結預覽
使用平台自己的工具。Facebook 的 Sharing Debugger 會顯示爬蟲實際看到的內容，也能強制重新擷取。LinkedIn 的 Post Inspector 提供相同功能。至於其他平台，通用的 Open Graph 預覽工具可以協助判斷 URL 大致會如何呈現。
也可以從命令列檢查轉址鏈。以下指令使用 HEAD 請求檢查。有些網站對 HEAD 和 GET 的處理方式不同，因此結果不如預期時，再用 GET 請求確認一次：
curl -sIL -A "facebookexternalhit/1.1" https://s.ee/example
# 以 GET 請求查看整條轉址鏈的回應標頭，捨棄回應本文：
curl -sS -L -D - -o /dev/null -A "facebookexternalhit/1.1" https://s.ee/example
理想情況下，應該只經過一次轉址，接著目標網頁回傳 200 OK。轉址鏈過長、使用 JavaScript 轉址，或最後回傳 403，都表示預覽可能有問題。
修正問題後，如果平台支援，就強制重新擷取；其他平台則等快取過期後再測試。新的測試 URL 有助於判斷是否為快取問題，但平台可能以分享的短 URL 或標準網址作為快取索引鍵。只修改目標網址的查詢字串，不一定能更新既有卡片；平台提供偵錯工具時，應優先使用。
#連結預覽快速檢查清單
分享重要連結前，確認目標網頁在 <head> 靠前的位置包含 og:title、og:description、og:image 和 og:url，並將 twitter:card 設為 summary_large_image。圖片應為 1200 × 630 像素，使用 HTTPS 絕對 URL，而且可以公開存取。
確認短網址只經過一次伺服器端轉址，預覽爬蟲沒有被機器人防護擋住，條件轉址或輪替連結的所有目標網頁也都使用一致的預覽標籤。正式分享前，再用預覽工具檢查一次。
#結語
連結預覽來自目標網頁的 Open Graph 標籤，由各平台的爬蟲擷取後快取。只要短網址使用正確的伺服器端轉址，預覽資訊就能自動傳遞。因此，需要處理的是目標網頁：設定正確的標籤，為圖片使用尺寸合適的絕對 URL，讓爬蟲能夠存取，並保持條件轉址與輪替連結各個目標網頁的標籤一致。
預覽看起來不對時，檢查轉址鏈、確認爬蟲實際看到的內容，再強制更新。
感謝閱讀！如果你希望用自己的品牌網域建立短網址，並統計各個管道的點擊數據，S.EE 將短網址、自訂網域、QR 碼和個人首頁整合在同一個平台。
準備開始了嗎？建立你的第一個連結，或查看價格，找到適合自己的方案。
#關於連結預覽與 Open Graph 標籤的常見問題
##什麼是 Open Graph 標籤？
Open Graph 標籤是網頁 <head> 裡的一組 <meta> 標籤，告訴平台分享網頁時該顯示什麼標題、說明和圖片。它們由 Facebook 推出，如今大多數會產生連結預覽的平台都會讀取這些標籤。
##為什麼連結預覽沒有顯示正確的圖片？
常見原因包括缺少 og:image 標籤、圖片 URL 是相對網址或無法公開存取、圖片太小或比例不對、爬蟲被機器人防護擋住，以及平台仍在使用快取的舊預覽。可以透過平台的偵錯工具查看爬蟲實際擷取到了什麼。
##短網址會讓連結預覽失效嗎？
如果短網址服務使用正確的伺服器端轉址，就不會。平台爬蟲會跟隨轉址，讀取目標網頁的 Open Graph 標籤。JavaScript 轉址和中間頁面則可能讓預覽失效。
##Open Graph 圖片應該使用多大尺寸？
最常用的是 1200 × 630 像素，長寬比為 1.91:1，在大多數平台都能正常呈現。請透過 HTTPS 絕對 URL 提供圖片。
##如何更新 Facebook 或 LinkedIn 的連結預覽？
使用 Facebook 的 Sharing Debugger 或 LinkedIn 的 Post Inspector 重新擷取 URL。其他平台會依各自的週期更新快取中的預覽。
##為什麼依地理位置導向的連結會顯示錯誤的預覽？
預覽爬蟲通常在某個地區的資料中心執行，因此只能看到該地區的目標網頁。讓條件轉址連結的所有目標網頁使用相同的 Open Graph 標籤，就能保持預覽一致。
