アイキャッチ画像(記事のサムネイル)

アイキャッチ画像は、そのブログ記事を表すサムネイル画像です。はてなブログのトップページのほか、TwitterやFacebookなどのソーシャルメディアで表示されます(ページ後半の「アイキャッチ画像の利用シーン」も参照)

※アイキャッチ画像に使用していた(あるいは自動で選択されていた)画像を記事から削除した際には、新しいアイキャッチ画像を「編集オプション」で選択しなおしてください。

アイキャッチ画像を選ぶ

アイキャッチ画像には、記事中にある最初の画像が自動で選択されます。

記事中の2番目以降の画像などを、記事を投稿する際に編集サイドバーから個別に設定することもできます(このあとの「任意の画像をアイキャッチ画像に指定する」をご参照ください)

なお、ブログの公開設定が「すべての人に公開」で、アイキャッチ画像が設定されていない場合、ブログタイトル・記事タイトル・記事の概要などから画像(シェア画像)を自動で生成します(このあとの「自動生成シェア画像について」をご参照ください)

デフォルトのアイキャッチ画像

記事中に画像がない場合には、デフォルトのアイキャッチ画像が自動で使用されます。はてなブログ全体のデフォルトアイキャッチは、次の画像です。

はてなブログのデフォルトのアイキャッチ画像

はてなブログのデフォルトのアイキャッチ画像(クリックで拡大)

ブログごとにデフォルトのアイキャッチ画像を設定する

デフォルトのアイキャッチ画像は、ブログごとに専用の画像を指定することもできます。

詳細設定 画面の「アイキャッチ画像」で設定してください。

※ブログごとのデフォルトのアイキャッチ画像を新規に指定または変更すると、デフォルトのアイキャッチ画像で投稿したすべての記事に自動で反映されます。

アイキャッチ画像のサイズに関する注意点

デフォルトのアイキャッチ画像をブログごとに設定する際には、ソーシャルメディアに投稿されることを考慮して、横長で十分な大きさの画像を用意するとよいでしょう。

※各ソーシャルメディアが公開しているプレビューの表示サイズに関するドキュメントなども参考にしてください(記事末の「外部リンク」参照)

任意の画像をアイキャッチ画像に指定する

記事中の2番目以降の画像や、あるいは記事中の画像に関係なくデフォルト画像を使いたいなどの場合には、個別に画像を指定できます。

編集サイドバーの「編集オプション」から次の手順で個別に画像を指定します。

  1. 編集サイドバーの 編集オプション タブをクリックする
  2. アイキャッチ画像 という見出しの下に、記事中にあるすべての画像と、デフォルトのアイキャッチ画像が一覧表示される
  3. 一覧から、アイキャッチ画像に指定する画像をクリックして選択する

また、使用したい画像のURLを「URL」欄に直接入力することもできます。

※「編集オプション」で記事ごとに指定したアイキャッチ画像は、デフォルトのアイキャッチ画像に優先します。

自動生成シェア画像について

ブログの公開設定が「すべての人に公開」で、アイキャッチ画像の設定がない記事をTwitterやFacebookなどのソーシャルメディアでシェアする際に、ブログタイトル・記事タイトル・記事の概要などから画像を自動で生成します。この画像を「シェア画像」と呼びます。

※シェア画像はTwitterやFacebookなどのソーシャルメディアでのみ表示され、はてなブログのトップページや記事一覧ページ(/archive)、各種記事モジュールのサムネイルやブログカードなどでは表示しません。

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

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

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

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

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

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

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

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

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

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

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

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

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

アイキャッチ画像の利用シーン

アイキャッチに指定した画像は、主に次の場面でサムネイルとして表示されます。

はてなブログ内で

  • ブログの記事一覧ページ(検索結果、iPhoneアプリなども)
  • ブログのサイドバーに表示できる「最新記事」「人気記事」などのモジュール
  • はてなブログのトップページなどに掲載されたとき

ソーシャルシェアで

  • FacebookやTwitterで記事がシェアされたときのプレビュー
  • そのほかOGP(Open Graph Protocol)に対応した各ソーシャルメディア

アイキャッチ画像がソーシャルメディア上で反映されない場合は

はてなブログの設定でアイキャッチ画像を変更した後も、FacebookやTwitterなどのサービスで、古い画像が表示され続けることがあります。
各サービスで表示される画像を更新するには、サービスごとの開発者向けツールを利用してください。最新の記事内容が反映されます。