Open Graph標籤的常見錯誤
檢查您的 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:image和twitter:image以實現完全覆蓋。有關詳細信息,請參閱我們的 Open Graph 與 Twitter Card 指南。
錯誤 3:圖片對於平台來說太小
每個平台都有不同的最小圖像尺寸。適用於 Discord(最小 300×300)的影像可能不適用於 LinkedIn(最小 1200×627)。
| Platform | Minimum | Recommended |
|---|---|---|
| X / Twitter | 800 × 418 | 1200 × 628 |
| 1200 × 627 | 1200 × 627 | |
| Discord | 300 × 300 | 1200 × 630 |
| 300 × 157 | 1200 × 630 | |
| 120 × 120 | 1200 × 628 |
使用 1200 × 630 作為標準尺寸,涵蓋所有平台。請參閱我們的Open Graph圖像尺寸指南以了解完整的詳細資訊。
錯誤4:更新後不清除快取
您更新您的 OG 標籤。平台仍然顯示舊的預覽。問題是:平台會快取 OG 標籤,並且不會自動重新取得它們。
更新標籤後,您必須清除每個平台的快取:
- Facebook: Sharing Debugger→“再刮”
- LinkedIn: Post Inspector→“檢查”
- X/Twitter: Card Validator→“預覽卡”
- Discord/Slack: 刪除舊留言,重新發布網址
- WhatsApp: 新增
?v=2查詢參數
請參閱我們的如何清除Open Graph快取指南,以了解完整的逐平台演練。
錯誤 5:缺少 og:description 或文字被截斷
一些開發人員設定了og:title和og:image,但跳過了og:description。其他人寫的描述太長而被截斷。
最佳實踐:
- og:title: 50-60 個字元(與 SEO 標題標籤相同)
- og:description: 150-160 個字元(與元描述相同)
- 首先放置最重要的資訊 - 平台在不同點處截斷
錯誤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 類型:
- JPG/JPEG →
影像/jpeg - PNG →
圖像/png - WebP →
圖片/webp - GIF →
圖像/gif
LinkedIn 對於 MIME 類型驗證尤其嚴格。
錯誤 8:沒有唯一 OG 標籤的動態頁面
如果您有一個 SPA 或動態網站,其中每個頁面共享相同的 OG 標籤(通常是主頁標籤),平台將為每個頁面顯示相同的預覽。每個頁面都需要有自己獨特的標題、描述和圖像。
在Next.js中,使用generateMetadata()。在WordPress中,使用Yoast/RankMath每頁設定。在純 HTML 中,在每個頁面上單獨設定標籤。
快速修復清單
- 使用絕對 URL(https://...) 對於所有 og:image 路徑
- 設定
og:和twitter:標籤 - 使用1200×630像素影像以實現通用相容性
- 更新標籤後清除平台快取
- 為每個頁面設定唯一的OG標籤
- 包括 og:description(150-160 個字元)
- 將 og:url 設定為規範 URL
- 驗證 MIME 類型與實際影像格式相符
- 使用 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 上查看預覽。