画像SEO

• Image SEO はalt text、ファイル名、圧縮、レスポンシブ対応、structured dataを最適化し、検索エンジンが画像を理解して画像検索に表示できるようにします。

• Google は CSS の背景画像をインデックスしないため、インデックス対象となる画像には、imgタグと、src、および説明的なalt属性が必要です。

• Alt text とファイル名は短く説明的にするべきですが、キーワードを詰め込みすぎるとスパムと見なされる場合があります。

• 画像は通常、ページの重量の大半を占めるため、圧縮や WebP、AVIF などの最新形式は、読み込み速度と SEO に直接関係します。

• srcsetによるレスポンシブ画像、遅延読み込み、画像サイトマップ、構造化データは、発見可能性とリッチリザルトの対象可否を向上させます。

概要

Image SEO とは、Web ページに埋め込まれた画像を最適化し、検索エンジンがそれらを正確に解釈して Google Images などの結果に表示できるようにする手法です。検索エンジンは人間のように写真を見ることができないため、alt text、ファイル名、周囲の本文、structured dataといったシグナルに頼って、その画像が何を表しているのかを判断します。したがって、Image SEO の目的は 2 つあります。これらのシグナルを明確に提供すること、そして画像ファイル自体を軽量に保ち、ページの読み込み速度を低下させないことです。

Google Search Central のドキュメントによると、Google は BMP、GIF、JPEG、PNG、WebP、SVG、AVIF 形式をサポートしており、CSS の背景画像はインデックスしません。つまり、検索に表示させたい画像はすべて HTML のimg要素。画像SEOは、単に検索での可視性に貢献するだけでなく、スクリーンリーダー利用者向けのアクセシビリティや、Core Web Vitalsのようなパフォーマンス指標にも影響するため重要です。

主要な最適化項目

コード例

以下は、説明的なalt属性とキャプションを組み合わせた、最も基本的な例です。Google はalt テキストとキャプションの両方から情報を抽出するため、両方を使うのが効果的です。

<figure>
  <img src="/images/dalmatian-puppy-playing-fetch.webp"
       alt="A Dalmatian puppy playing fetch">
  <figcaption>A Dalmatian puppy fetching a ball in the yard</figcaption>
</figure>

以下は、デバイスの解像度に応じて異なるサイズの画像を配信するレスポンシブなsrcsetマークアップです。ブラウザが不要に大きなファイルをダウンロードするのを防ぎ、帯域幅と読み込み時間を削減します。

<img src="/images/cheesecake-720.jpg"
     srcset="/images/cheesecake-480.jpg 480w,
             /images/cheesecake-720.jpg 720w,
             /images/cheesecake-1080.jpg 1080w"
     sizes="(max-width: 600px) 480px, 720px"
     alt="A slice of chocolate cheesecake"
     loading="lazy">

ブラウザが対応している最も आधुनिकな形式（AVIF、WebP）を優先して複数の形式を同時に配信するには、picture要素。

<picture>
  <source srcset="/images/photo.avif" type="image/avif">
  <source srcset="/images/photo.webp" type="image/webp">
  <img src="/images/photo.jpg" alt="夕暮れ時のビーチ">
</picture>

根拠

Google Search Central の画像SEOドキュメントでは、ファイル名とaltテキストは説明的でありながら簡潔であるべきとされており、alt属性にキーワードを詰め込みすぎるキーワードスタッフィングはスパムとして扱われる可能性があるとしています。また、Google は CSS 画像をインデックスしないため、img要素の使用を推奨しており、schema.org の primaryImageOfPage プロパティまたは og:image によって、結果に表示する代表画像を指定できるとも記しています。

Ahrefs の画像SEOガイドでは、画像はページの重量の大半を占めることが多いため、圧縮は読み込み速度に直接影響すると説明しています。実際のテストでは、ImageOptim により JPEG ファイルは 69% 圧縮され、PNG ファイルは 40% 縮小され、ある SVG ファイルは minification と gzip 圧縮後に 8.54kb から 3.56kb まで小さくなりました。Ahrefs のブログでは、過大なファイルの読み込みを避けるため、本文中の画像は最大幅 720px にリサイズすることを推奨しています。また、"This is a(n) [type] of ___," という形式で alt テキストを埋めることも推奨しており、簡潔で正確な説明が得られるとしています。

実装チェックリスト

• すべての意味のある画像に対して、具体的で簡潔なaltテキストを記述する。装飾用画像には空の alt 属性（alt=""）を付ける。

• IMG00023.jpg の代わりに dalmatian-puppy-playing-fetch.jpg のような、内容がわかるファイル名を付ける。

• 用途に合った形式を選ぶ。写真には WebP/AVIF、ロゴやアイコンには SVG/PNG を使う。

• 画像を実際の表示サイズにリサイズし、その後圧縮してファイルサイズを削減する。

• srcset または picture 要素を使って、デバイスごとに最適化されたレスポンシブ画像を配信する。

• ページ下部の画像には loading="lazy" を使って遅延読み込みを適用する。

• 関連する本文の近くに画像を配置し、キャプションを付ける。

• 構造化データを追加するstructured data商品、レシピ、動画などの該当するコンテンツに適用して、リッチリザルトを狙いましょう。

• 画像サイトマップを送信して、検索エンジンによる発見とインデックス登録を改善しましょう。

• インデックス登録したいものには、CSSの背景画像ではなくHTMLのimg要素を使用しましょう。

出典

• Image SEO Best Practices — Google Search Central

• Image SEO: 12 Actionable Tips (for More Organic Traffic) — Ahrefs

• Alt Text for SEO: How to Optimize Your Images — Ahrefs