← Blog

Open Graph標籤的常見錯誤

即使是經驗豐富的開發人員也會犯下這些 OG 標籤錯誤。以下是最常見的問題以及如何解決每個問題。

檢查您的 OG 標籤是否有錯誤

使用 Proovd — 貼上 URL 並立即查看它在 X、LinkedIn、Slack、Discord、WhatsApp 和 Reddit 上的外觀。

快速解答

  • 使用 og:image 的相對 URL — 平台無法取得它們
  • 缺少 twitter:card 標籤 — X 不會渲染您的卡片
  • 圖片對平台來說太小 — LinkedIn 至少需要 1200×627
  • 更新後不清除快取——平台將 OG 標籤快取數天

錯誤 1:對 og:image 使用相對 URL

這是最常見的錯誤。開發人員寫道:

✗ 錯誤

<meta property="og:image" content="/images/preview.jpg" />

平台的爬蟲無法解析相對URL。他們需要一個絕對 URL:

✓ 正確

<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />

始終在 og:image URL 中使用 https://。這會影響每個平台 - X、LinkedIn、Discord、Slack、WhatsApp 和 Reddit。

錯誤 2:缺少 twitter:card 標籤

許多開發者只設定Open Graph標籤並跳過Twitter Card標籤。 X/Twitter 喜歡 twitter:card,如果沒有它,可能無法正確渲染您的卡片。

✗ 不完整

<meta property="og:image" content="https://yoursite.com/image.jpg" />

✓ 完成

<meta property="og:image" content="https://yoursite.com/image.jpg" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://yoursite.com/image.jpg" />

同時設定og:imagetwitter:image以實現完全覆蓋。有關詳細信息,請參閱我們的 Open Graph 與 Twitter Card 指南

錯誤 3:圖片對於平台來說太小

每個平台都有不同的最小圖像尺寸。適用於 Discord(最小 300×300)的影像可能不適用於 LinkedIn(最小 1200×627)。

Platform Minimum Recommended
X / Twitter800 × 4181200 × 628
LinkedIn1200 × 6271200 × 627
Discord300 × 3001200 × 630
WhatsApp300 × 1571200 × 630
Reddit120 × 1201200 × 628

使用 1200 × 630 作為標準尺寸,涵蓋所有平台。請參閱我們的Open Graph圖像尺寸指南以了解完整的詳細資訊。

錯誤4:更新後不清除快取

您更新您的 OG 標籤。平台仍然顯示舊的預覽。問題是:平台會快取 OG 標籤,並且不會自動重新取得它們。

更新標籤後,您必須清除每個平台的快取:

請參閱我們的如何清除Open Graph快取指南,以了解完整的逐平台演練。

錯誤 5:缺少 og:description 或文字被截斷

一些開發人員設定了og:title和og:image,但跳過了og:description。其他人寫的描述太長而被截斷。

最佳實踐:

錯誤6:沒有設定og:url

如果沒有 og:url,平台可能會在預覽中使用錯誤的 URL(例如,帶有追蹤參數的 URL)。始終設定規範 URL:

✓ 正確

<meta property="og:url" content="https://yoursite.com/your-page" />

錯誤 7:使用錯誤的圖像 MIME 類型

如果您的伺服器為您的映像傳回錯誤的 Content-Type 標頭(例如,使用 image/jpeg 提供 PNG),某些平台將拒絕它。確保您的圖像伺服器傳回正確的 MIME 類型:

LinkedIn 對於 MIME 類型驗證尤其嚴格。

錯誤 8:沒有唯一 OG 標籤的動態頁面

如果您有一個 SPA 或動態網站,其中每個頁面共享相同的 OG 標籤(通常是主頁標籤),平台將為每個頁面顯示相同的預覽。每個頁面都需要有自己獨特的標題、描述和圖像。

在Next.js中,使用generateMetadata()。在WordPress中,使用Yoast/RankMath每頁設定。在純 HTML 中,在每個頁面上單獨設定標籤。

快速修復清單

  1. 使用絕對 URL(https://...) 對於所有 og:image 路徑
  2. 設定 og:twitter: 標籤
  3. 使用1200×630像素影像以實現通用相容性
  4. 更新標籤後清除平台快取
  5. 為每個頁面設定唯一的OG標籤
  6. 包括 og:description(150-160 個字元)
  7. 將 og:url 設定為規範 URL
  8. 驗證 MIME 類型與實際影像格式相符
  9. 使用 Proovd 進行測試以一次捕捉所有錯誤

常見問題解答

最常見的Open Graph錯誤是什麼?

使用 og:image 的相對 URL 而不是以 https://. 開頭的絕對 URL 平台無法取得相對 URL,因此影像永遠不會出現在預覽中。

為什麼我的 OG 影像可以在一個平台上運行,但不能在另一個平台上運行?

每個平台都有不同的圖像尺寸要求。 LinkedIn 要求至少 1200x627,X 要求 800x418,Discord 接受至少 300x300。在一個平台上運行的圖像對於另一個平台可能太小。

如何檢查我的 OG 標籤是否有錯誤?

使用 Proovd 貼上任何 URL,並同時查看它在所有六個平台上的呈現方式。

檢查您的 OG 標籤是否有錯誤

使用 Proovd — 貼上 URL 並在 X、LinkedIn、Slack、Discord、WhatsApp 和 Reddit 上查看預覽。