Twitter/XのOGPはどう変わってきたか

実務では「TwitterのOGP」「XのOGP」と呼ばれることがありますが、厳密にはXが使う仕組みはOpen Graphそのものではなく、Twitter Cardsから続くX Cardsです。Open Graphの値を読めるため混同されやすいものの、カードの種類や表示ルールはX側の仕様とUIに左右されます。

まずOGPが共通の土台になった

Open Graphは、WebページをSNSなどでリッチに表現するためのメタデータです。基本になるのは og:title、og:type、og:image、og:url で、必要に応じて og:description や og:site_name などを加えます。Facebook由来の仕組みですが、現在は多くのSNS、チャット、社内ツールでリンクプレビューの基礎として扱われています。

2012年にTwitter Cardsが入った

Twitterは2012年6月14日にTwitter Cardsを発表しました。当初はExpanded Tweetsの中で、リンク先の要約、画像、動画を表示するための仕組みとして始まっています。開発者やパブリッシャーは、ページのhead内に簡単なHTMLタグを追加することで、Twitter上の表示をある程度コントロールできるようになりました。

現在のCards系ドキュメントや解説で主に扱われるカードは、Summary、Summary with Large Image、App、Playerです。古いPhoto Card、Gallery Card、Product Cardのようなタイプは非推奨になり、Summary Card with Large Imageへ寄せられています。つまり、見た目の選択肢は増え続けたというより、実務で使う型が整理されてきたと見るほうが近いです。

twitter:* と og:* の関係

X Cardsは twitter:* のmetaタグを優先して読みます。たとえば twitter:title、twitter:description、twitter:image があれば、それらがカードの候補になります。一方で、それらがない場合は og:title、og:description、og:image にフォールバックできます。だからOGPだけを入れたページでも、X上でプレビューが出ることがあります。

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Page title for X" />
<meta name="twitter:description" content="Short description for X." />
<meta name="twitter:image" content="https://example.com/ogp.png" />

<meta property="og:title" content="Page title" />
<meta property="og:description" content="Short description." />
<meta property="og:image" content="https://example.com/ogp.png" />
<meta property="og:url" content="https://example.com/page" />

画像比率は完全にはそろわない

OGP画像では1200×630pxのような約1.91:1の横長画像がよく使われます。一方、XのSummary Card with Large Imageでは2:1の画像比率が案内されています。実際の表示はWeb、iOS、Android、テスト中のUIによって変わるため、1枚の画像で全サービスを完全再現するより、中央に重要情報を寄せて、多少切れても意味が残る構図にするのが現実的です。

2023年以降はUI変更の影響が大きい

2023年10月、Xは記事リンクのプレビューから見出しを外し、主に画像とドメインを表示する形へ変更したと報じられました。2024年1月には見出し表示が一時的に戻った、または環境によって異なる表示になったことも報じられています。ここで分かるのは、metaタグが正しくても、最終的な見た目はプラットフォーム側のUI変更で変わるということです。

今の実装で見るべきところ

• og:title、og:description、og:image、og:url をまず正しく入れる
• Xで大きい画像カードにしたい場合は twitter:card を summary_large_image にする
• X向けに変えたい内容だけ twitter:title、twitter:description、twitter:image を追加する
• 画像は中央に重要情報を置き、1.91:1と2:1の両方で崩れにくくする
• TwitterbotやSNSクローラーがページと画像を取得できる状態にしておく
• 実サービスのUIは変わるため、プレビューは近似として扱う

TOOLPOOLのOGPチェッカーも、XやFacebookの画面を完全に再現するものではなく、ページに入っているmetaタグ、画像URL、基本的な表示候補を確認するためのツールとして考えるのが安全です。UIの再現度を上げることはできますが、最終的には各サービス側の最新表示とキャッシュに依存します。