はてなブログ開発ブログ

はてなブログからの公式のお知らせを発信します。

Twitterで画像が大きく、見やすくシェアされるようにしました(※独自ドメインでは再申請が必要です)

はてなブログでは、TwitterでWebページを見やすく表示する Twitterカード において、画像がより大きく表示される2つのフォーマットに対応しました。ブログをツイートした際に、タイムラインでより読まれやすくなることが期待できます。

※Twitterカードはドメインごとに申請が必要なため、はてなブログProで独自ドメインを使用している場合、Twitterに対して別途申請する必要があります。

はてなブログのデフォルトのドメインhatenablog.comhateblo.jpなど)では作業が完了していますので、とくに何も設定しないでそのまま大きな画像が表示されます。どうぞご利用ください。

新しく対応したTwitterカードの詳細について

はてなブログの記事はデフォルトのSummaryカード(タイトル、概要、サムネイル)で表示されますが、これに加えて新たに 大きな画像付きのSummaryカード(Summary Card with Large Image)と、4枚の写真で構成した Galleryカード に対応しました。

画像を大きく表示できるかどうかをはてなブログ側で判別し、自動で適した要素を下記のように指定します。これ以外では、これまで同様にデフォルトのカードで表示されます。

ブログトップはギャラリーで表示

ブログのトップページhttp://staff.hatenablog.com/など)をシェアしたときに、画像が4つ以上あれば、ギャラリー形式で表示されます。

Galleryカード

ブログトップで画像が4枚あればGalleryカードで表示

技術的には、HTMLのヘッダーで次のmeta要素が指定されていると、Galleryカードになります。

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

記事ページは大きな画像付きで表示

アイキャッチ画像として大きな画像が指定されている記事ページ(1つの記事だけが表示される記事個別ページでは、大きな画像付きのSummaryカードで表示されます。

大きな画像付きの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で確認できます。