はてなブログでは、TwitterでWebページを見やすく表示する Twitterカード において、画像がより大きく表示される2つのフォーマットに対応しました。ブログをツイートした際に、タイムラインでより読まれやすくなることが期待できます。
※Twitterカードはドメインごとに申請が必要なため、はてなブログProで独自ドメインを使用している場合、Twitterに対して別途申請する必要があります。
はてなブログのデフォルトのドメイン(hatenablog.com
やhateblo.jp
など)では作業が完了していますので、とくに何も設定しないでそのまま大きな画像が表示されます。どうぞご利用ください。
新しく対応したTwitterカードの詳細について
はてなブログの記事はデフォルトのSummaryカード(タイトル、概要、サムネイル)で表示されますが、これに加えて新たに 大きな画像付きのSummaryカード(Summary Card with Large Image)と、4枚の写真で構成した Galleryカード に対応しました。
画像を大きく表示できるかどうかをはてなブログ側で判別し、自動で適した要素を下記のように指定します。これ以外では、これまで同様にデフォルトのカードで表示されます。
ブログトップはギャラリーで表示
ブログのトップページ(http://staff.hatenablog.com/
など)をシェアしたときに、画像が4つ以上あれば、ギャラリー形式で表示されます。
技術的には、HTMLのヘッダーで次のmeta
要素が指定されていると、Galleryカードになります。
<meta name="twitter:card" content="gallery" />
記事ページは大きな画像付きで表示
アイキャッチ画像として大きな画像が指定されている記事ページ(1つの記事だけが表示される記事個別ページ)では、大きな画像付きのSummaryカードで表示されます。
この場合は、次のmeta
要素で指定しています。
<meta name="twitter:card" content="summary_large_image" />
独自ドメインでTwitterカードを申請しよう
Twitterカードを独自ドメインで申請する方法は、次にあるTwitterのドキュメントを参照してください。
Twitterカード | Twitter Developers
https://dev.twitter.com/ja/cards/overview
手順説明にある検証ツールからブログトップまたは記事ページのURLを入力し、それぞれ「Request Approval」してください。
なお、Twitterカードの申請はカードの種類ごとに必要です。すでにSummaryカードで申請済みの場合は、大きな画像付きのSummaryカードと、Galleryカード、それぞれが表示されるページのURLを入力して個別に申請してください。これまでにまったく申請したことがなければ、Summaryカードを含めて3回の申請作業が必要です。
※あるページがどの形式のカードで表示されるかは、上記のようにHTMLヘッダーのmeta
要素のtwitter:card
で確認できます。