Google検索結果でサムネイル画像が表示・変更されない原因と対応。 / いがわ

.

Memo

Google検索結果とサムネイル。

Google検索結果でサムネイルが表示されないときの誤解。その1。

metaタグによるサムネイル画像の指定は、実は意味がない。

<meta name="thumbnail" content="指定したいサムネイル画像へのパス">では検索結果に表示されない。

Googleの検索結果へのサムネイル表示については、下記のように、「<meta name="thumbnail" content="指定したいサムネイル画像へのパス">」の記述が有効である旨が、色々なところで説明されている。

HTML
<meta name="thumbnail" content="http://example/foo.jpg" />
Googleのヘルプページの誤解。

そのほとんどで、情報源として以下のページの記述方法を引用している。Googleのページなので、信頼度も高い。

参照:サムネイルの指定 – Programmable Search Engine ヘルプ

Google検索結果へサムネイルを表示させたいイメージ。

ところがこの「<meta name="thumbnail" content="指定したいサムネイル画像へのパス">」の記述は、実は無意味な対応であることが、Googleの公式ページで確認できる。

参照:Googleがサポートしているメタタグと属性 | Google 検索セントラル  |  ドキュメント  |  Google for Developers

Googleがサポートしているmetaタグと属性について。

このページの公開日は不明。GoogleのSEO業界では有名なMatt Cutts(マット・カッツ)さんによるYouTube動画は、12年前(2012年)に公開されているものなので、掲載されている情報も古い可能性はある。

Google検索結果のサムネイルについて。

ただし、2022年のGoogle検索 セントラルのコミュニティでも、「<meta name="thumbnail">」の記述は、Googleの検索結果には関連性がないことが説明されている。

参照:検索結果時のサムネイルに関して – Google 検索セントラル コミュニティ


Google検索結果でサムネイルが表示されないときの誤解。その2。

PageMapによるサムネイル画像の指定も、実は意味がない。

PageMapでも検索結果に表示されない。

PageMapの使用も、サムネイル表示や、表示される画像の指定ができるという情報が多い。

これもGoogleのヘルプページの誤解で、下記の記述は意味がない。

HTML
<!--
  <PageMap>
    <DataObject type="thumbnail">
      <Attribute name="src" value="http://www.example.com/recipes/applepie/applepie.jpg"/>
      <Attribute name="width" value="100"/>
      <Attribute name="height" value="130"/>
    </DataObject>
  </PageMap>
-->

実際のGoogle検索結果のサムネイル表示は?

metaタグとPageMapのサムネイル画像指定は、検索結果には反映されない。

metaタグとPageMapの、サムネイル画像指定の検証結果。

2024年現在、わたし自身が制作した5サイトと、わたし以外の方々が制作した5サイトを検証したところ、metaタグの指定もPageMapでの指定も、実際のGoogle検索結果のサムネイル表示との関連性は一切見られなかった。

サムネイル画像指定が、検索結果に表示されない理由。

サムネイルの指定 – Programmable Search Engine ヘルプのページの内容をよく見てみると、「カスタム検索の結果」用の指定方法であることがわかる。

サムネイルが思い通りに表示されないのは、「カスタム検索」用の記述が原因。

「カスタム検索」は普通の「Google検索」とは別物で、たとえばときどき見かける「サイト内検索」などに利用される検索機能。

すべての原因がこれにあるわけではないだろうが、サムネイルの指定 – Programmable Search Engine ヘルプの内容と、実際に検証した限りでは、ユーザー側で表示させたい画像の指定は現時点ではおそらくできない。

検索結果のサムネイル表示に、サイズもアスペクト比も関係ない。

サムネイル画像のサイズやアスペクト比の指定も誤解されている。

PageMapでの指定には「width」と「height」の値の設定箇所があるので、サムネイル画像のサイズの情報もここが元となっている可能性がある。

アスペクト比の指定箇所はないが、検索結果へ表示されるサムネイルは、1:1の正方形なので、おそらく関係ない。

少なくとも検証してみたサイトでは、元画像が横長でも縦長でも関係がなかった。

サムネイル画像のファイル形式もおそらく無関係。

ファイル形式もJPG、PNG、WebPなどさまざまで、統一感が見られなかった。


Googleによる、画像検索SEOベストプラクティス。

Googleから学ぶ、画像検索に関するおすすめの方法。

Google 検索セントラルの、画像検索SEOベストプラクティス。

Google 検索セントラル(旧Google ウェブマスター)には、画像検索SEOベストプラクティスというページがある。

こちらのページも公開日は不明だが、こちらもSEO業界では著名なJohn Mueller(ジョン・ミューラー)さんによるYouTube動画があり、2021年にアップされている。

ページの内容を見ても、先に始まっていたモバイルのGoogle検索結果へのサムネイル表示の説明がされている。

内容としても、「速度と画質を考慮して最適化する」とあるので、特別トリッキーなものではない。

Google画像検索に関するおすすめの方法。

Googleに画像をインデックスされるようにする。

Google 検索セントラルのページにある、「Googleが画像を検出してインデックスに登録できるようにする」というタイトル通り、サムネイル表示をさせるためには、まず画像がGoogleにインデックスされなければならない。

これはつまり、Web制作で学んだり習うような、基本通りの指定をすれば良い。

主な内容は以下の通りとなっている。

  • imgタグには画像の代替テキストとなる「alt属性」を指定する。
  • svgタグの場合は「title要素」を指定する。
  • 画像はレスポンシブ対応をする。
  • 画像用のサイトマップを使用する。
  • 構造化データを追加する。

ファイル形式は、次のものがサポートされているとのこと。

  • BMP
  • GIF
  • JPEG
  • PNG
  • WebP
  • SVG
  • (ファビコン用のICO形式はここでは例外)

ファイル名は、下記のようにすると良いとのこと。

  • 「IMG00023.JPG」よりも、「my-new-black-kitten.jpg」が推奨される。
  • 「image1.jpg」、「pic.gif」、「1.jpg」のようなファイル名は避ける。

参照:画像のSEOベスト ラクティス | Google 検索セントラル  |  ドキュメント  |  Google for Developers

Google検索結果でサムネイル画像が表示されない原因を見つけたわんちゃん。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。(元々はメモ書きでした。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。

井川 宜久 / Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。