検索結果にサムネイル画像が出ない原因と直し方
競合のページには小さな画像が添えられている。自社のページだけ、文字だけの検索結果になっている。——この差の原因は、多くの場合2つのどちらかです。ひとつは、見せたい画像をHTMLの画像要素ではなくCSSの背景として置いていること。もうひとつは、画像プレビューの大きさをロボット向けの指示で絞ってしまっていることです。どちらも、ページを見ているだけでは気づけません。
用語をひとつだけ先に。「クローラー」は、ウェブを自動でまわって情報を集めるプログラムです。ブラウザで画像が見えていることと、クローラーがその画像をページの画像として認識できることは、まったく別の話になります。ここがずれていると、いくら画像を差し替えても検索結果は変わりません。
サムネイルは3つの関門を全部通ったときだけ出る
検索結果のサムネイルは、ページに画像さえあれば自動で付くものではありません。実際には次の3段階を通ります。原因の切り分けも、この順でやると速いです。
- 発見：クローラーが、その画像をページに属する画像として取得できる
- 許可：そのページが、画像プレビューの表示を自分で禁止していない
- 選択：Googleが、その検索結果でサムネイルを出す価値があると判断する
1と2は自分の実装で確実に潰せます。3は自分では決められません。だから作業としては、1と2を完全に満たしたうえで、3を待つ形になります。逆に言えば、1か2が欠けている限り、何を待っても出ません。
関門1：公式は「CSSの画像は避ける」と案内している
最初に疑うのは、画像の置き方です。公式の画像SEOガイドは、画像を検索に載せるための基本として、src と説明的な alt 属性を備えたHTMLの <img> 要素を使い、CSSの画像は避けることを挙げています。レスポンシブ対応の <picture> や srcset、JPEG・PNG・WebP・SVGといった対応形式の利用も同じ文脈で案内されています。
つまり、こう書かれているアイキャッチは、公式が「避ける」と案内している側の置き方です。
.hero { background-image: url(/img/hero.webp); }
デザイン都合で背景画像にしているサイトは多いです。見た目はまったく同じなので、担当者が原因に気づきにくい。ここが最初の落とし穴です。記事のアイキャッチや商品のメイン画像だけでも、次のようにHTMLの要素へ出しておきます。
<img src="/img/hero.webp" alt="ダイニングチェアA-3を斜め前から見た写真" width="1200" height="800">
alt はサムネイルのためだけの飾りではありません。画像に何が写っているかをテキストで伝える役割があります。書き方は画像のalt属性の正しい書き方とSEOへの影響にまとめてあります。
関門2：画像プレビューの大きさを自分で絞っていないか
置き方が正しくても、画像プレビューの大きさはページ側の指示で変わります。これを決めるのが robots メタタグの max-image-preview です。公式ドキュメントの定義は次のとおりです。
| 指定 | Googleの扱い |
|---|---|
max-image-preview:none | 画像プレビューは表示されない |
max-image-preview:standard | 既定サイズの画像プレビューが表示されることがある |
max-image-preview:large | 表示領域の幅いっぱいまでの、より大きな画像プレビューが表示されることがある |
| 指定なし | Googleが既定サイズの画像プレビューを表示することがある |
指定なしでも既定サイズのプレビューは出ることがある、という点は押さえておいてください。「タグを入れたら出る魔法」ではありません。効くのは逆方向です。none を指定していれば確実に消えますし、大きく見せたいなら large を明示します。
<meta name="robots" content="max-image-preview:large">
見落としやすいのは、共通テンプレートや配信設定で全ページに noindex, nofollow などをまとめて出しているケースです。同じ仕組みで max-image-preview:none が混ざっていないか、公開ページのHTMLを実際に開いて確かめます。ブラウザでページのソースを表示し、max-image-preview で検索するだけで済みます。
なお nosnippet を併用しているページには、もうひとつ注意点があります。nosnippet は検索結果にテキストの要約を出さない指示ですが、公式ドキュメントは、静的な画像のサムネイルがより良い体験になる場合には、そのサムネイルは表示されることがあると書いています。テキストが消えているからサムネイルも消えている、と早合点しないでください。
画像ファイルそのものには、メタタグを書けない
ここでひとつ、実装上の制約があります。robots メタタグはHTMLに書くものです。画像ファイルにはHTMLの <head> がないので、画像ファイル自体に指示を書き込むことはできません。
公式ドキュメントは、HTMLで robots メタタグを使えない非HTMLファイル（画像ファイルなど）には X-Robots-Tag HTTPヘッダーを使う、と案内しています。サーバー側の設定例も示されています。
# Apache（例：PDFにnoindexを付ける公式の記述例）
<Files ~ "\.pdf$">
Header set X-Robots-Tag "noindex, nofollow"
</Files>
過去にサイト全体の画像へ noindex の X-Robots-Tag を付けた覚えがあるなら、そこを疑う価値があります。ページのHTMLだけを見ていても見つかりません。画像URLを直接開いて、応答ヘッダーを確認してください。
5ステップの確認手順（実例つき）
商品ページ https://example.com/products/chair-a3 にサムネイルが出ない、という想定で通してみます。
- 画像の置き方を確認する：ページのソースを表示し、見せたい画像が
<img>（または<picture>）で出ているかを見る。今回は.hero { background-image: ... }で出ていた。ここで原因はほぼ確定です。 - 画像URLを直接開く：
https://example.com/img/chair-a3.webpをブラウザのアドレス欄に入れて開く。表示されない・404になるなら、パスかファイル配置の問題です。 - プレビュー指定を確認する：同じソースで
max-image-previewを検索する。noneがあれば削除、無ければlargeを明示します。画像ファイル側のX-Robots-Tagも忘れずに見ます。 - URL検査ツールでライブテストする：Search Consoleの「URL検査」に対象URLを入れ、公開URLをテストします。「クロールを許可」の欄は、robots.txt のルールでブロックされていないかを示します。取得に失敗していれば「ページの取得」欄に具体的な状態が出ます。
- 修正してインデックス登録をリクエストする：
<img>への書き換えとプレビュー指定を反映したら、URL検査のレポートから「インデックス登録をリクエスト」します。ヘルプはこのほか、サイトマップの送信や自然な再クロールを待つ選択肢も挙げています。
この例の結論は単純です。犯人は関門1でした。max-image-preview:large を足す前に、まず画像の置き方を直します。順番を飛ばして先にメタタグをいじると、直った気になったまま次の確認へ進んでしまいます。
発見を助ける：画像サイトマップという選択肢
置き方も許可も正しいのに、Googleがそもそも画像を見つけていない場合があります。JavaScriptで後から読み込む画像は、その典型です。
公式ドキュメントは、画像サイトマップについて、JavaScript経由で見つかる画像を含め、サイト上の画像をGoogleに知らせられるとしています。専用のサイトマップを作っても、既存のサイトマップに画像タグを足しても構いません。<image:image> タグで画像の情報を囲み、1つの <url> あたり最大1,000件まで記述できます。
<url>
<loc>https://example.com/products/chair-a3</loc>
<image:image>
<image:loc>https://cdn.example.net/img/chair-a3.webp</image:loc>
</image:image>
</url>
画像を別ドメインのCDNに置いていても構いません。公式は、画像URLがメインのサイトと同じドメインでないケースについて、両方のドメインをSearch Consoleで所有権確認していれば問題ないとしています。CDNを使っているサイトは、この確認が抜けていないかを見てください。
自己点検の表
自分のページがどこで止まっているか、上から順に当てはめてみてください。
| 確認項目 | 見る場所 | 直し方 |
|---|---|---|
画像が <img> / <picture> で出ているか | ページのソース | CSSの背景画像から書き換える |
alt が中身を説明しているか | 同上 | 写っているものを具体的に書く |
max-image-preview:none が入っていないか | 同上 | 削除し、large を明示する |
画像ファイルに noindex のヘッダーがないか | 画像URLの応答ヘッダー | サーバー設定から外す |
| クロールがブロックされていないか | URL検査ツールの「クロールを許可」 | robots.txt の該当ルールを見直す |
| 画像が発見されているか | 画像サイトマップの有無 | 画像タグを追加して送信する |
上から順に、直せば効く可能性が高い順です。1行目と3行目で止まっているサイトが圧倒的に多いので、時間がないならその2つだけでも先に確認してください。
それでも出ないとき
要件を満たしても、サムネイルが出るとは限りません。表示するかどうかを最終的に決めるのはGoogleだからです。関門3は、自分の実装の外側にあります。
直した直後に検索結果を見て、変わっていないから失敗、と判断するのは早いです。URL検査ツールからインデックス登録をリクエストしたうえで、しばらく置いてから確認してください。ヘルプは、サイトマップの送信や自然な再クロールを待つ選択肢も挙げています。
画像の読み込み方そのものがクローラーの取得を妨げていることもあります。遅延読み込みの実装が絡む場合は、画像の遅延読み込みはSEOに影響するかもあわせて確認してください。
出典