Google Search Centralは、画像検索向けの基本として、高品質な画像、関連するページ文脈、説明的なファイル名、適切な代替テキスト、画像を発見・取得できる技術実装などを案内しています。商品ページでは「画像制作」と「画像を検索エンジンへ正しく伝えること」を別工程にすると管理しやすくなります。
1. まず画像をGoogleが発見できる形にする
画像の内容が良くても、検索エンジンが画像URLへ到達できなければ画像検索へ出る前提が弱くなります。Googleは通常のimg要素のsrcで参照される画像や、適切なpicture要素を扱えます。画像をJavaScriptで特殊に呼び出す構成では、実際にレンダリング後のページで画像が発見可能か確認します。
<img src="/images/navy-tote-front.jpg" alt="ネイビーのレザートートバッグ正面">のように、画像URLと代替テキストがHTML上で明確な構造は確認しやすくなります。CSS背景画像だけに商品本体の重要情報を任せる設計は、商品画像の主表示としては避けた方が管理しやすいです。2. alt属性は「画像とページの関係」を説明する
altは画像が何を表しているかを簡潔に説明します。SEO用のキーワード欄ではなく、画像を見られない利用者にも内容を伝える代替テキストです。同じ商品でも正面・内ポケット・サイズ比較では見せている情報が違うため、画像ごとの役割を反映します。
| 画像 | 避けたい例 | 考え方 |
|---|---|---|
| 黒いバッグの正面 | 商品 バッグ 通販 激安 おすすめ | 黒いレザートートバッグの正面 |
| 内ポケットの接写 | 詳細画像 | 黒いトートバッグ内側のファスナーポケット |
| 肩掛けの使用シーン | イメージ | 黒いトートバッグを肩に掛けた使用イメージ |
| 装飾だけの画像 | 無理に商品名を入れる | 意味を持たない装飾なら空altを検討する |
3. ファイル名は短く、画像内容が推測できる形にする
Googleはファイル名を画像内容の軽い手掛かりとして利用できると説明しています。IMG_0042.jpgやimage1.jpgのような汎用名より、画像内容が分かる短い名前の方が管理面でも扱いやすくなります。
| 用途 | 管理しにくい例 | 説明的な例 |
|---|---|---|
| 商品正面 | IMG_0042.jpg | navy-tote-front.jpg |
| 内ポケット | detail-2.jpg | navy-tote-inner-pocket.jpg |
| 使用シーン | new-image-final.jpg | navy-tote-shoulder-use.jpg |
ただし、ファイル名を変えるだけで順位が上がると考えない方が安全です。ページ本文、画像品質、クロール可能性、ユーザーにとっての有用性など複数要素の一つです。
4. 画像の近くに関連テキストを置く
商品画像だけを大量に並べ、何を示す画像か本文で説明しない構成より、商品名、素材、サイズ、ディテールなど関連情報の近くに画像を配置した方が、ユーザーにも検索エンジンにも文脈が伝わりやすくなります。Googleも画像周辺のテキストやページ内容を画像理解の手掛かりとして使うと説明しています。
「何を説明する画像か」を先に整理したい場合はECの商品画像は何を揃える？で、商品単体・ディテール・サイズ感・使用シーンなどの役割を分けてください。
5. 画質と表示速度を両方見る
Googleは鮮明で高品質な画像を推奨する一方、画像はページ容量を大きくしやすいとも説明しています。SEO目的で必要以上に巨大な元ファイルをそのまま配信するのではなく、表示サイズに合う画像を配信し、必要ならレスポンシブ画像や圧縮を使います。
Google Searchがサポートする画像形式にはJPEG、PNG、WebP、AVIF、GIF、SVGなどがありますが、販売先やCMS側の対応形式は別です。ECチャネル向けのピクセル数・縦横比・形式はEC商品画像のサイズ設計で分けて確認してください。
6. モバイルでも画像内容とURLの扱いを揃える
Googleのモバイル向けガイドでは、モバイル版でも高品質画像、意味のあるalt、画像に関連するタイトル・キャプション・ファイル名を維持することが推奨されています。PCだけ高解像度で、モバイルでは意味の分からない小さなサムネイルへ置き換える構成は避けます。
また、PCとモバイルで画像URLを必要以上に別物へ切り替えると、画像URLの把握に時間がかかる場合があります。レスポンシブ対応を行う場合も、画像URLが毎回変わるような実装ではなく、安定して取得できる構造にします。
7. 画像サイトマップは「通常クロールで見つけにくい画像」があるときに検討する
Googleは、通常のクロールでは見つけにくい画像、たとえばJavaScriptで到達する画像などを知らせる手段として画像サイトマップを案内しています。すべての小規模ECで必須という意味ではありません。
| 状態 | 判断 |
|---|---|
| 商品ページの通常HTMLから主要画像へ到達できる | まず通常クロールと内部リンク・ページ品質を確認 |
| 大量画像がJavaScript操作後にしか現れない | 画像サイトマップを検討する価値がある |
| 画像URLを頻繁に変える | サイトマップ以前にURL運用を見直す |
| 画像をrobots等で取得できない | 発見手段より先にクロール阻害を確認 |
8. 公開後はSearch Consoleで「画像検索」を分けて測る
Google Search Consoleの検索パフォーマンスでは、検索タイプを「画像」に切り替えて画像検索経由の表示回数・クリック・CTRなどを確認できます。クエリやページ単位で見れば、どの商品ページが画像検索から発見されているかを把握できます。
画像検索の改善で見る順番
- 検索タイプを画像にする
Web検索の数字と混ぜず、画像検索だけを確認します。 - ページ別に表示回数を見る
画像検索へ出ている商品ページ・カテゴリを把握します。 - クエリを見る
想定商品名・色・用途などと検索語が合っているか確認します。 - CTRだけで即断しない
検索意図、掲載位置、競合画像、季節性なども確認します。 - 変更記録を残す
画像・alt・本文を変更した日を残し、前後の傾向を長めに見ます。
商品画像SEOの実装チェック
- 主要商品画像が通常のHTML/レンダリングで取得可能
- 画像内容を説明するaltになっている
- 同じキーワードを不自然に繰り返していない
- 装飾画像まで無理に商品キーワード入りaltにしていない
- ファイル名が管理不能な連番だけになっていない
- 画像の近くに関連する商品情報がある
- モバイルでも低品質な別画像へ置き換わっていない
- 画像URLが毎回変わるような実装になっていない
- 表示サイズに対して過剰に重い画像を配信していない
- 通常クロールで見つけにくい画像がある場合のみ画像サイトマップを検討
- 公開後はSearch Consoleの「検索タイプ: 画像」で実績を確認
画像SEOと画像A/Bテストは役割が違う
画像SEOは検索エンジンが商品画像を発見・理解できる状態を作る工程です。公開後に「どの有効な商品画像案の方が購入行動につながるか」を検証する作業は商品画像をA/Bテストする方法の役割です。
pictoECとの関係
このページはECサイトに掲載した後の画像SEOに関する一般的な解説です。現在確認済みのpictoEC実装から、alt設定、Search Console分析、画像サイトマップ送信を自動化する機能があるとは判断していません。
よくある質問
altに商品名を毎回入れればよいですか？
画像の内容と関係する場合は自然に含められますが、すべて同じaltにするより、その画像が何を見せているかを説明する方が有用です。
画像サイトマップは必須ですか？
必須ではありません。Googleは、通常の方法では見つけにくい画像を知らせる用途として説明しています。まず主要商品画像が通常のページから発見できるかを確認してください。
Search Consoleで個別画像のクリック数は分かりますか？
画像検索の検索タイプは確認できますが、ページタブは画像URLではなくランディングページを表示します。同一ページに複数画像がある場合、Search Consoleのページデータだけで個別画像を完全に分離できるとは限りません。
WebPやAVIFにすればSEOで有利ですか？
特定形式へ変換しただけで順位が保証されるわけではありません。Googleが扱える形式か、画質・容量・ブラウザ/CMS/販売先対応が適切かを見て選びます。