ひとことで言うと
Twitter Cardは、X(旧Twitter)のタイムライン上でURLをカード形式で表示するための仕様です。<meta name="twitter:card">、<meta name="twitter:title">、<meta name="twitter:description">、<meta name="twitter:image">の4タグが基本セットです。twitter:cardの値にsummary_large_imageを指定すると横長の大きな画像が表示され、summaryにすると小さいアイコン付きカードになります。
XはOGPタグも読み取るため、og:titleやog:imageが既に設定されていれば、twitter:titleやtwitter:imageを省略してもカードが表示される場合があります。ただし、twitter:card(表示スタイルの指定)だけはOGPに相当するタグが存在しないため、このタグだけは必ず独立して記述する必要があります。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
HTML共有で関係する場面
AIで生成したサービスLPや実績紹介ページをXでシェアするキャンペーンを予定している場合、Twitter Cardの設定は必須級の対応です。summary_large_imageを設定したURLはタイムライン上で目立つため、クリックスルー率がテキストのみのツイートと比べて大きく上がることがあります。
社内限定のプレビューURLをチームのX DM(ダイレクトメッセージ)で共有するケースでも、カードが表示されることでリンクの内容が即座に伝わります。ただし、DMのカードプレビューはXのサーバーがURLにアクセスして取得するため、パスワード保護されたプレビューURLではカードが生成されないことに注意してください。
よくある誤解
「Twitter Cardを設定したのに大きな画像が表示されない」という問題の多くは、twitter:cardの値をsummaryのままにしていることが原因です。大きな画像を表示するにはtwitter:cardをsummary_large_imageに変更する必要があります。OGPのog:imageだけ設定してtwitter:cardを省略すると、Xがデフォルトのsummary(小さいカード)で表示します。
「X Developer Portalでの登録が必要」と思っている人がいますが、2023年以降は登録不要になっています。以前はCard Validatorでの承認が必要でしたが、現在はmetaタグを正しく記述すれば自動的にカードが有効になります。
安全に使うための注意点
twitter:imageに指定する画像ファイルには著作権の確認が必要です。AI画像生成ツールで作成した画像は生成ツールの利用規約によって商用利用やSNS投稿が制限される場合があります。公開用のTwitter Cardに使う画像は、利用規約を確認した上で使用してください。
twitter:imageの画像サイズが小さすぎる(600px未満)とXがカード表示を拒否することがあります。最低600×314px、推奨は1200×628pxです。AIで生成した低解像度のサムネイルをそのまま指定するとカードが表示されないため、画像の縦横サイズを事前に確認してください。Card Validatorの廃止後は、Xに実際に投稿してプレビュー確認するか、外部のOGPチェックツールで代替確認をします。
よくある質問
OGPとTwitter Cardを両方設定するとどちらが優先されますか?
X上ではTwitter Cardのタグが優先されます。twitter:titleが設定されていればog:titleは無視されます。他のSNSやSlackではOGPが読まれるため、両方設定して用途別に最適化するのが理想的です。
Twitter Cardの画像はどの形式(JPG/PNG/WebP)が使えますか?
JPG・PNG・WebP・GIFが対応形式です。ファイルサイズは5MB以下が推奨されています。WebPは対応しているものの一部環境で表示されないことがあるため、JPGかPNGを使うのが最も安全です。
Xのカード表示を確認するためのツールはありますか?
公式のCard Validatorが廃止されたため、現在はopengraph.xyzやmetatags.ioなどの外部OGPチェックツールで代替確認できます。または実際にXで下書き投稿のプレビューを確認する方法が最も確実です。