Twitterカード（記事をツイートすると大きな画像で見やすく表示される）

はてなブログでは、X（旧Twitter）でWebページを見やすく表示する Twitterカード に対応しています。記事の概要や画像などが1枚のカードのようにまとまった形式で表示されます。

はてなブログをシェアしたときのTwitterカード

記事ページ（1つの記事だけが表示される記事個別ページ）に、アイキャッチ画像になるような大きな画像が配置されているときには、大きな画像付きのSummaryカードが表示されます。

そうでない場合はSummaryカードになり、記事のタイトル、説明、サムネイルがコンパクトにまとまって表示されます。

Twitterカードを指定するメタデータ

Twitterカードは、HTMLのヘッダー部でTwitterカードタグ（twitterではじまるmeta要素）を使って内容を指定できます。

例えば、カードの種類はtwitter:cardというメタデータで指定し、次の値が指定されていると大きな画像付きのSummaryカードになります。

<meta name="twitter:card" content="summary_large_image" />

はてなブログではこの値を自動で設定しますが、Twitterカードの内容をいくつかの「編集オプション」でカスタマイズすることができます。詳細は、ヘルプ「編集オプションの設定とOGP」を参照してください。

独自ドメインでのTwitterカード

独自ドメインを使用している場合に、X（旧Twitter）開発者のWebページから使用ドメインごとにTwitterカードの申請をしなければならないことがあります。Twitterカードが表示されないなどの問題がある場合には、次のX（旧Twitter）のドキュメントを参照してください。

Twitter Cards | Twitter Developers

カードタイプを選択する際、はてなブログでは上記のように2種類のカードを利用しているため、各ドメインに対してSummary Card（Summaryカード）とSummary Card with Large Image（大きな画像付きのSummaryカード）の申請作業が必要です。

関連項目

関連記事（はてなブログ開発ブログ）