Open Graph vs Twitter Card：有什麼差別？

兩者都控制社交媒體上的連結預覽。但它們不是同一件事。以下是何时使用每种方法以及为什么应该同时使用两种方法。

Open Graph — Facebook 標準

Open Graph由Facebook於2010年引進。在OG标签之前，当有人在Facebook上分享链接时，平台会从页面中随机选取图像和文本。结果是不可预测的，而且往往没有吸引力。

Facebook 說：「讓我們為網站管理員提供一種標準方法來控制他們的連結預覽。」他們創建了一組任何網站都可以添加的元標記：

<meta property="og:title" content="Your Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://yoursite.com/image.jpg" />
<meta property="og:url" content="https://yoursite.com/page" />

其他平台採用Open Graph標準。 LinkedIn、Discord、Slack、WhatsApp和Reddit都读取 og: 标签来呈现链接预览。

Twitter Cards — Twitter 標準

在 Open Graph 被廣泛採用之前，Twitter 創建了自己的系統，稱為「Twitter Cards」。 Twitter Cards 使用不同的屬性命名約定：

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://yoursite.com/image.jpg" />

Twitter Cards有兩種主要類型：

• summary — 推文右側的小縮圖
• summary_large_image — 佔據卡片大部分的大圖像（建議）

平台相容性

以下是哪些平台使用哪些標籤：

為什麼你應該同時設定

儘管大多數平台都支援這兩種標籤類型，但有充分的理由設定這兩種標籤類型：

1. X/Twitter 比較喜歡 twitter:card 標籤。 雖然 X 可以回退到 OG 標籤，但它可能無法正確呈現它們。設定兩者可確保 X 顯示正確的卡片類型。
2. 面向未來。 如果新平台推出並且更喜歡一種標準而不是另一種標準，那麼同時擁有兩種標準可以確保相容性。
3. 一致性。 使用兩者都可以確保無論哪個平台讀取哪個標籤，您的預覽看起來都是正確的。

完整的設定

以下是任何頁面的推薦設定：

<!-- Open Graph (LinkedIn, Discord, Slack, WhatsApp, Reddit) -->
<meta property="og:title" content="Your Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://yoursite.com/image.jpg" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:type" content="website" />

<!-- Twitter/X (X/Twitter) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://yoursite.com/image.jpg" />

快速修復清單

常見問題解答