[CODE]

LINE 分享沒有預覽圖？六個可能的原因

幫好幾個民宿網站除錯 OG 預覽圖問題。LINE 分享圖片不出現，可能是至少六個獨立的快取層其中之一出問題，這篇整理診斷流程。

2 min read
og seo web debugging

幾個月前我在幫幾個民宿客戶處理網站，希望他們在 LINE 上分享連結的時候能顯示預覽圖。網站在瀏覽器裡看起來完全正常，og:image 的 meta tag 也都在，但分享出去就是空白。每次都這樣。

那段時間我花在這個問題上的時間加起來應該比我願意承認的還多。後來發現，至少有六個完全獨立的環節都可能導致 OG 預覽圖壞掉，而且每個的表現都一樣：分享連結，然後什麼都沒有。

以下是我整理的清單，大概按照「最可能是這個問題」的順序排列。

先確認 meta tag 確實存在

在做任何事之前，先確認爬蟲實際上看到了什麼。不要相信瀏覽器的開發者工具 — 瀏覽器會跑 JavaScript、會忽略 og: meta、跟爬蟲看到的東西根本不一樣。

用 curl 直接抓 HTML：

curl -A "facebookexternalhit/1.1" https://yoursite.com/some-page | grep og:image

-A 是設定 User-Agent，這裡模擬 Facebook 的爬蟲。如果你看到你的 tag，代表 HTML 沒問題。如果什麼都沒有，問題在 HTML 本身 — 可能是錯誤的頁面、server-side rendering 的問題，或者這個 tag 是靠 JavaScript 在 load 之後才動態加上去的。

六個失敗原因

1. 圖片 URL 是相對路徑，不是絕對路徑

這個問題出現的頻率高得有點尷尬。og:image 一定要是完整的絕對 URL：

<!-- 錯的 -->
<meta property="og:image" content="/images/hero.jpg" />

<!-- 對的 -->
<meta property="og:image" content="https://yoursite.com/images/hero.jpg" />

爬蟲沒有 base URL 可以用來解析相對路徑，遇到相對路徑就直接跳過，不會報錯。

2. 圖片尺寸不對

最小尺寸是 200×200 像素。Facebook 和 LINE 都不會顯示比這更小的圖。建議尺寸是 1200×630，這個比例在預覽卡片裡看起來最好。如果你用的是一張 150×150 的小縮圖，爬蟲會去抓它，然後選擇不顯示。不會有任何錯誤提示，就只是空白。

3. 圖片的 Content-Type header 不對或缺失

直接抓圖片 URL 的 header 來看：

curl -I https://yoursite.com/images/hero.jpg

你應該要看到 Content-Type: image/jpeg 或 image/png。如果顯示 application/octet-stream 或根本沒有這個 header，爬蟲可能認不出這是圖片。這種情況常發生在 CDN 設定錯誤，或者 S3 bucket 在上傳時沒有指定檔案類型。

4. 防爬蟲機制擋住了爬蟲

有些網站有設定速率限制或防護機制（Cloudflare 的 “Under Attack” 模式、防火牆規則等），這些設定可能會誤擋合法的爬蟲。爬蟲取得的不是你的 HTML，而是 403 錯誤頁面或 CAPTCHA。

明確測試這件事：

curl -A "facebookexternalhit/1.1" https://yoursite.com/
curl -A "Twitterbot/1.0" https://yoursite.com/

如果你拿到 403 或者看起來像 Cloudflare 驗證頁面的 HTML，你需要在防火牆規則裡把爬蟲的 User-Agent 加入白名單。

5. Cloudflare 快取提供了過期的內容

如果你在頁面已經被快取之後才更新 og:image，Cloudflare 可能會持續把舊版本提供給爬蟲好幾個小時甚至好幾天。可以透過 Cloudflare 控制台或 API 清除特定 URL 的快取：

curl -X POST "https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache" \
  -H "Authorization: Bearer {api_token}" \
  -H "Content-Type: application/json" \
  --data '{"files":["https://yoursite.com/some-page"]}'

另一個方法是設定 Cache Rule，讓已知爬蟲 IP 或 User-Agent 的請求略過快取。爬蟲本來就不需要走 CDN 快取。

6. LINE 自己的快取（最陰的那個）

就算你把上面所有問題都修好了，LINE 有自己的內部快取，TTL 是 72 小時。所以你修好 og:image，用 Facebook Sharing Debugger 測試顯示正確圖片，但 LINE 還是顯示舊的（或根本沒有）。

解法是 LINE Page Cache Refresh Tool：在 LINE Developers Console 裡可以找到，把你的 URL 貼進去，它會強制 LINE 重新爬取這個頁面。之後幾分鐘內，分享連結就應該顯示新圖片了。

Facebook Sharing Debugger 在你貼入 URL 然後按「Scrape Again」的時候也會做一次新的抓取，而且會把解析到的 og: tags 和任何錯誤都顯示給你看。我通常從這裡開始，因為資訊最完整。

實際的診斷順序

現在遇到預覽圖壞掉，我的檢查順序是這樣的：

  1. 用爬蟲 UA 跑 curl，確認 tag 在 HTML 裡
  2. 確認 og:image URL — 是絕對路徑嗎？直接在瀏覽器開得到嗎？
  3. 對圖片 URL 跑 curl -I，確認 Content-Type 和狀態碼
  4. 把頁面 URL 貼到 Facebook Sharing Debugger，讀錯誤訊息
  5. 如果 Debugger 顯示正確圖片但 LINE 沒有：去用 LINE Cache Refresh Tool
  6. 如果 Debugger 根本抓不到頁面：防爬蟲機制的問題
  7. 如果 Debugger 顯示的是舊圖片：清 Cloudflare 快取

六個完全獨立的環節，任何一個都可能是整個問題的根源。最讓人崩潰的地方是從使用者角度看起來都一樣：分享連結，預覽卡片空白。