画像 SEO は HTML img タグ + 高品質画像 + alt テキストで決まる

なぜこれを学ぶか

画像 SEO は EC・メディア・レシピ・観光サイトで Google 画像検索からの流入を取る主要施策。 正しく実装すれば画像経由のオーガニック流入が大幅に増えるが、CSS background-image だけで実装すると画像が一切インデックスされない。

リッチリザルト（商品画像 / レシピ写真）、Google Discover、AI Overview の画像表示にも直結する。

学ばないと起きること

学ぶメリット

• 画像検索から流入を取れる土台ができる
• レスポンシブ画像（picture / srcset）の SEO 観点での実装ができる
• CDN 移行時に画像 SEO のリスクを回避できる
• 商談で「CSS background-image は SEO 上 NG」を即答できる

仕組み

画像インデックスの必須要件

公式に明記:

CSS background-image は Google がインデックスしない。

サポート画像形式

レスポンシブ画像の正しい書き方

<picture> + <source> 形式:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="ヒーロー画像の説明" width="1200" height="630">
</picture>

srcset 形式:

<img
  srcset="cat-320w.jpg 320w, cat-480w.jpg 480w, cat-800w.jpg 800w"
  sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
  src="cat-800w.jpg"
  alt="窓辺で寝る三毛猫の水彩イラスト">

<picture> を使う場合も 必ず <img src=...> フォールバックを書く。一部のクローラーやブラウザは <source> を理解しないため。

キー概念

alt テキストのベストプラクティス

装飾的な画像（罫線・スペーサーなど）は alt="" で OK。検索結果に出さない明示的な指定。

ファイル名のベストプラクティス

意味を表す英数字 + ハイフン区切り。日本語ファイル名はパーセントエンコードされて読みにくくなる。

画像周辺のテキスト

Google は画像のコンテキストを以下から判断する:

• alt テキスト
• ファイル名
• 画像の前後の HTML テキスト
• 画像のキャプション
• ページ全体のトピック
• 内部リンクで使われているアンカーテキスト（画像へのリンク含む）

画像だけ単体では文脈不足。周辺テキストで何の画像かを補足する。

画像サイトマップ

通常のサイトマップに画像情報を追加するか、画像専用サイトマップを作る:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://example.com/article/cats</loc>
    <image:image>
      <image:loc>https://cdn.example.com/cat-1.jpg</image:loc>
    </image:image>
    <image:image>
      <image:loc>https://cdn.example.com/cat-2.jpg</image:loc>
    </image:image>
  </url>
</urlset>

JavaScript で動的に読み込まれる画像、CDN 配信の画像など、Google が通常クロールで発見しにくい画像を伝える役割。

<image:loc> は別ドメイン（CDN など）でも OK だが、Search Console でその CDN ドメインも verify しておく。

画像インデックスを止めたい時

ページ全体は出したいが画像だけインデックスから外したい場合:

<meta name="robots" content="noimageindex">

または HTTP ヘッダ:

X-Robots-Tag: noimageindex

これでページのテキストはインデックスされ、画像だけ画像検索から除外される。

よくある誤解

実務での適用

Next.js / React での画像実装

import Image from "next/image";

<Image
  src="/products/dress-blue.jpg"
  alt="モデルが着用する青いマキシ丈ドレス"
  width={800}
  height={1200}
  priority
/>

next/image は内部で <picture> + <source srcset> + <img> を生成し、AVIF / WebP の自動配信もサポート。alt は必ず指定。

EC サイトの商品画像

各商品ページで:

• メイン画像 1 枚（高解像度、商品全体）
• サブ画像 4-6 枚（角度違い・拡大・着用イメージ）
• すべてに固有の alt テキスト
• ファイル名は SKU + 商品名 + 角度（例: dress-blue-front.webp）
• Product 構造化データに image プロパティで全画像 URL を記述

CDN 配信時のチェックリスト

1. CDN ドメインを Search Console で verify
2. CDN の robots.txt が画像クロールを阻害していないか
3. 画像 URL が毎回変わらないか（ハッシュ付与の場合は固定キャッシュキー）
4. CDN の HTTP レスポンスヘッダで X-Robots-Tag を意図せず付けていないか

トラブル別の対処

公式ソース

• Google 画像 SEO のベスト プラクティス
• 画像サイトマップ
• 画像のライセンス メタデータ
• robots meta タグ仕様（noimageindex）
• レスポンシブ画像（web.dev）

自己テスト

これらの内容を採点付きで挑戦したい場合は、本ドメインのプロ試験で 5 問形式で確認できる。