![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
Google検索結果にサムネイルが表示されない！表示させるために試したこと
MARKLEAPS
Google検索結果には、ページのサムネイル画像（スニペット画像）が表示される場合があります。
検索結果で目立つため、クリック率（CTR）の向上につながる要素です。
ただし、どれだけ対策をしても、必ず表示されるとは限らないのが実情です。
今回は、静的HTMLサイトで「ページ上には表示していない画像」をサムネイルとして表示させたいというクライアントの要望に対して、試行錯誤した内容をまとめました。
実施環境・前提条件
- ・サイト種別：静的HTMLサイト（CMS未使用）
- ・サムネイル画像：ページ上に直接は表示しない画像を指定
- ・補足：WordPressサイトでは特別な対応なしでも表示されやすい傾向あり（経験則）
効果が得られなかった要素
まず最初に、Google検索結果でサムネイルを表示する方法として、多くのサイトで紹介されている以下の2つを試しました。
弊社の環境（静的HTMLサイト／ページに表示しない画像指定）では、数週間おきに検証してもサムネイルは表示されませんでした。
環境やサイト特性によって効果は異なる可能性があります。
<meta name=”thumbnail” />
|
1 |
<meta name="thumbnail" content="https://example.com/images/thumbnai.jpg"> |
<PageMap>
|
1 2 3 4 5 6 7 |
<PageMap> <DataObject type="thumbnail"> <Attribute name="src" value="https://example.com/images/thumbnai.jpg"/> <Attribute name="width" value="1200"/> <Attribute name="height" value="1200"/> </DataObject> </PageMap> |
おすすめの対応・実施順
ページ上に画像を「不可視」で配置 ★最重要
「ページ上には表示していない画像」をサムネイルとして表示させたいという場合に、最も重要です。
（ページ上存在する画像をサムネイルとして表示する場合は不要です。）
|
1 2 3 |
<div style="position: absolute; left: -9999px; top: -9999px;"> <img src="https://example.com/images/thumbnai.jpg" alt="サイト名サムネイル"> </div> |
誤った例（効果なし）
|
1 2 3 |
<div style="width:1px;height:1px;overflow:hidden;"> <img src="https://example.com/images/thumbnai.jpg" alt="サイト名サムネイル"> </div> |
補足
display: none;やvisibility: hidden;はGoogleが読み取らない可能性あり。画面外に飛ばす方法が推奨。
Open Graph（OGP）タグの設定
検証結果：単体での効果は確認できませんでした。
ページ上に画像を「不可視」で配置した場合の組み合わせとして有効だった可能性があります。推奨設定のひとつです。
|
1 2 3 4 5 6 |
<meta property="og:title" content="サイト名"> <meta property="og:description" content="サイト紹介文"> <meta property="og:image" content="https://example.com/images/thumbnai.jpg" /> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="1200"> <meta property="og:url" content="https://example.com/"> |
補足
og:imageの画像は 1200px × 630px以上（アスペクト比1.91:1推奨）が望ましい- Googleが常にOGPを使用するとは限らないが、設定しておくと有効に働く可能性あり
構造化データ（JSON-LD）でOrganizationとして画像をマークアップ
検証結果：単体での効果は確認できませんでした。
ページ上に画像を「不可視」で配置した場合の組み合わせとして有効だった可能性があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Organization", "url": "https://example.com/", "name": "サイト名", "description": "サイト紹介文", "primaryImageOfPage": { "@type": "ImageObject", "url": "https://example.com/images/thumbnai.jpg", "width": 1200, "height": 1200 } } </script> |
補足
primaryImageOfPageはリッチリザルトでも注目されるプロパティ
sitemap.xml に画像情報を追加
検証結果：単体での効果は確認できませんでした。
ページ上に画像を「不可視」で配置した場合の組み合わせとして有効だった可能性があります。
sitemap.xml
|
1 2 3 4 5 6 7 8 9 10 |
<url> <loc>https://example.com/</loc> <lastmod>2025-01-31</lastmod> <priority>1.00</priority> <image:image> <image:loc>https://example.com/images/thumbnai.jpg</image:loc> <image:title>サイト名</image:title> <image:caption>サムネイル画像の説明</image:caption> </image:image> </url> |
補足
<image:image>タグは画像検索への露出強化にもつながります。
Google Search Console でのインデックスリクエスト
施策反映の確認用。
表示される理由は“非公開”
上記のいずれも設定していなくても、サムネイルが表示されるサイトもあります。
Googleのアルゴリズムがページ内画像を自動選択する場合もあるため、施策をしても表示されないことがある点に注意してください。
まとめ
- サムネイル画像の表示は、施策を行っても保証されない
- 特に静的HTMLサイトでは、WordPressなどに比べて表示されにくい傾向
- 画像配置、OGP、構造化データ、サイトマップ記述、インデックスリクエストなど、複数施策を組み合わせることで表示される可能性が高まる
今回の検証ログが、同じように悩んでいる方の参考になれば幸いです。
