Twitter Cardのmetaタグ

Twitter（X）はOpenGraphが存在する前に独自のプレビューカードプロトコルを定義し、現在も維持しています。最新のTwitterはtwitter:*タグがない場合にOGタグへフォールバックしますが、twitter:cardを明示的に指定すると、最も予測しやすいカードレイアウトになります。

カードの種類は4つあります。summary（タイトルと説明の横に小さなサムネイルを表示）、summary_large_image（幅いっぱいにメイン画像を表示）、app（モバイルアプリのインストール）、player（動画または音声を埋め込み）です。コンテンツが中心の記事にはsummary_large_imageを選択します。

これらが指定されている場合、Twitter上ではog:titleとog:descriptionが上書きされます。一般的なOpenGraph利用者向けとは異なる見出しをTwitterの利用者に表示したい場合に使用してください。それ以外の場合は、TwitterがOGの値にフォールバックするようにします。

summaryカードでは、少なくとも144x144の1:1の正方形画像を使用します。summary_large_imageでは2:1の画像、理想的には1200x600以上を使用します。Twitterは5 MBを超える画像を拒否します。og:imageと同じく絶対URLを指定してください。相対パスは機能しません。

カード画像の代替テキストで、最大420文字です。Twitterを閲覧するスクリーンリーダー利用者のアクセシビリティを向上させ、画像の読み込みに失敗した場合の代替説明にもなります。必ず指定してください。包括性を高めるために30秒でできる効果的な対応です。

twitter:siteは、@付きで指定するサイトのTwitterハンドルです。twitter:creatorは個々の著者のハンドルです。これらを設定すると、Twitterに「@yoursiteから」と表示させ、署名を実在するアカウントにリンクできます。

OpenGraphではproperty="og:..."を使用し、Twitterではname="twitter:..."を使用します。この違いは、RDFaとHTML5 metaという歴史的な背景によるものです。どちらも技術的には有効ですが、各プロトコルに適した属性を使うことで、厳格なバリデーターに関するエッジケースを避けられます。

twitter:card="app"を使うと、twitter:app:id:iphone、twitter:app:id:ipad、twitter:app:id:googleplay、twitter:app:url:*のディープリンクによって、iOS/Androidアプリを宣伝できます。カードをタップすると、インストール済みの場合はアプリが直接開き、それ以外の場合はApp StoreまたはPlay Storeが開きます。

twitter:card="player"を使うと、ツイート内に動画または音声プレイヤーを直接埋め込めます。twitter:player（HTTPS iframeのURL）、twitter:player:width、twitter:player:heightが必要です。不正利用を防ぐため、Twitterはプレイヤーカードを手動で承認します。developer.twitter.comから申請してください。

Twitterは公開のCard Validator UIを終了しましたが、下書きツイートではカードを引き続きプレビューできます。実際のツイートを公開する前に、非公開の下書きにURLを貼り付けて、どのカードタイプと画像が表示されるかを正確に確認してください。

twitter:cardとOGタグ一式を必ず両方含めてください。Twitter以外のほとんどのプラットフォームはtwitter:*タグを無視し、最新のTwitterクライアントの多くはOGにフォールバックします。そのため、両方を組み合わせることで、重複を最小限に抑えながらどこでも正しいプレビューを表示できます。

twitter:titleがなく、og:titleがある場合、Twitterカードには何が表示されますか？

Twitterカード（name="twitter:card"で指定）は、X上でページを予測しやすい形式でプレビュー表示します。記事コンテンツにはsummary_large_imageを選択し、絶対URLを指定したtwitter:imageとtwitter:image:altを追加します。サイトと作成者はハンドルで示し、上書きしないタグにはOGの値を使用させます。