Open Graph vs Twitter Card: 違いは何ですか?

どちらもソーシャル メディア上のリンク プレビューを制御します。しかし、それらは同じものではありません。それぞれをいつ使用するのか、そして両方を使用する必要がある理由は次のとおりです。

Open Graph — Facebook スタンダード

Open Graph は 2010 年に Facebook によって導入されました。OG タグが使用される前は、誰かが Facebook でリンクを共有すると、プラットフォームはページから画像とテキストをランダムに選択していました。結果は予測不可能で、多くの場合魅力的ではありませんでした。

Facebook さんは、「ウェブマスターにリンクのプレビューを制御する標準的な方法を提供しましょう。」と述べました。彼らは、どの Web サイトでも追加できる一連のメタ タグを作成しました。

<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 の標準

Twitter は、Open Graph が広く採用される前に、「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 には主に 2 つのタイプがあります。

• まとめ — ツイートの右側にある小さなサムネイル
• 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" />

クイックフィックスチェックリスト

よくある質問