はてなブログ開発ブログ

はてなブログの新機能など開発に関する情報、公式のお知らせを発信します。

アイキャッチ画像がない記事をシェアした際、ブログタイトルや本文などから画像を自動生成するようにしました

はてなブログでは、アイキャッチ画像の設定がない記事をTwitterやFacebookなどのソーシャルメディアでシェアする際に、ブログタイトル・記事タイトル・記事の概要などから画像(シェア画像)を自動で生成するようにしました。これによって記事の内容がソーシャルメディア上で伝わりやすくなり、より多くの方に閲覧されることが期待できます。どうぞご利用ください。

f:id:hatenablog:20190911102830p:plain
Twitterでシェアした場合のイメージ

シェア画像が自動で生成される対象の記事

ソーシャルメディア上のシェア画像が自動で生成されるのは、ブログの公開設定が「すべての人に公開」で、アイキャッチ画像が設定されていない記事です。

ブログの公開範囲について

公開範囲が「すべての人に公開」のブログで、アイキャッチ画像の設定がない記事をソーシャルメディアでシェアした場合に、シェア画像を自動で生成します。

公開範囲を限定したブログの記事をシェアした場合は、画像は表示されません。

アイキャッチ画像の設定について

ソーシャルメディア上で表示される記事のアイキャッチ画像は、記事本文内に画像がある場合には、1枚目の画像が自動的に指定されます。また、編集画面の編集サイドバーにある編集オプション「アイキャッチ画像」で記事中の画像から選んで指定することもできます。

このアイキャッチ画像が指定されていない場合に、シェア画像が自動生成されます。

シェア画像に表示される内容

シェア画像には、以下の内容を掲載します。画像に掲載される文字の分量は、それぞれの長さによって変わります。

  • ブログタイトル
  • 記事タイトル
  • 記事の概要(設定していない場合は、記事本文)

シェア画像が表示される場所

シェア画像は、TwitterやFacebookなどのソーシャルメディアでのみ表示されます。

ブログのトップページ、記事一覧ページ、各種記事モジュールのサムネイルやブログカードなどには表示されません。

シェア画像の自動生成を無効にするには

シェア画像の自動生成は、デフォルトでは「有効」となっています。無効にする場合は、詳細設定ページから変更してください。

本機能を無効にした状態で記事をシェアした場合は、はてなブログでのデフォルトのアイキャッチ画像が表示されます。

 シェア画像の自動生成を無効にした状態
シェア画像の自動生成を無効にした状態

シェア画像が更新されない場合は

自動生成を無効にした場合や過去の記事を編集した際に、ソーシャルメディアで見えるシェア画像が変わらないことがあります。

これは各ソーシャルメディアの開発者ツールを使うことで解決できます。はてなブログ ヘルプ「アイキャッチ画像がソーシャルメディア上で反映されない場合は」をご確認ください。

編集サイドバーの「アイキャッチ画像」を改善しました

また、編集サイドバーの「アイキャッチ画像」で表示されるのサムネイル画像のサイズを大きく表示するようにして、画像を選びやすくしました。

 編集サイドバーの「アイキャッチ画像」
編集サイドバーの「アイキャッチ画像」