Open Graph と Twitter カード生成

Open Graph (og:) は Facebook, LinkedIn, Slack, WhatsApp, Pinterest などの多くのプラットフォームがリンクのプレビューを作成するために読む共有プロトコルです。 Twitter Card (twitter:) は X の独自の語彙で、カードレイアウトを制御します。例えば summary と summary_large_image です。これらは重なり合います。タイトル、説明、画像は og: タグから来ることができます。 Twitter 特有のタグは og: で表現できないものを追加します。例えば、カードスタイルや @site ハンドルです。

Facebook, LinkedIn, X summary_large_image が使用する大型カードには 1200x630 ピクセル (1.91:1 比) を使用します。これは切り取りなしにフレームを埋めます。ファイルサイズを 5 MB 以下に保ち、絶対 https URL で提供します。プラットフォームは相対的な画像や http 画像を信頼できるように取得できません。Facebook が最小許容サイズとして認めるサイズは 200x200 です。小さな画像はヒーローカードではなく小さなサムネイルとして表示されます。

すべてのプラットフォームはスクラップしたカードの最初のバージョンをキャッシュします。時には数週間もキャッシュされます。タグを修正した後も、古いタイトルや画像は残ります。再スクラップを強制するには、URLを Facebook 共有デバガに貼り付けて、 再度スクラップをクリックし、 LinkedIn のポストインスペクターを使って、リンクを X 上で一度共有してキャッシュを更新します。タグが実際に提供された HTML ヘッダに含まれていることを確認してください。JavaScript によって後で挿入されないことを確認してください。JavaScript はほとんどのスクラップで実行されません。

Twitter タグが欠けた場合、X は Open Graph タグに戻ります。 og:title, og:description, og:image はカードの大部分をカバーします。実際には、最低限 og: タグの全セットと twitter:card だけでレイアウトを選択し、 twitter:site で属性を指定します。 og: タグを追加することで、Facebook、LinkedIn、Slackなどの他のサイトでも同じプレビューが表示されます。 og: を先に入力し、 og: で表現できない twitter: タグの一部を追加します。