JA EN

画像 SEO の完全ガイド - alt 属性、ファイル名、サイズ最適化で検索流入を増やす

· 約 9 分で読めます

画像 SEO が重要な理由 - Google 画像検索からのトラフィック獲得

Google 画像検索は、Web 検索に次ぐ第 2 の検索エンジンです。Sparktoro の調査によると、Google での全検索の約 20% が画像検索で行われており、特に EC サイト、レシピサイト、旅行サイト、デザイン関連サイトでは画像検索からの流入が全体の 30-50% を占めることもあります。

画像 SEO を最適化するメリット:

Google は画像のランキングに、alt テキスト、ファイル名、周囲のテキスト、ページのコンテキスト、画像の品質、構造化データなど複数のシグナルを使用しています。これらを総合的に最適化することで、画像検索での上位表示を実現できます。

alt 属性の最適な書き方 - 検索エンジンとアクセシビリティの両立

alt 属性は画像 SEO の最も重要な要素です。Google は alt テキストを画像の内容を理解するための主要なシグナルとして使用しています。同時に、スクリーンリーダーが画像の代替テキストとして読み上げるため、アクセシビリティにも直結します。

効果的な alt テキストの書き方:

alt テキストの良い例と悪い例:

装飾目的の画像 (区切り線、背景パターンなど) には空の alt (alt="") を設定します。これによりスクリーンリーダーが画像を無視し、コンテンツの読み上げがスムーズになります。alt 属性自体を省略するのは HTML 仕様違反であり、アクセシビリティチェッカーでエラーになります。

ファイル名とディレクトリ構造 - URL レベルでの最適化

画像のファイル名は、Google が画像の内容を理解するための重要なシグナルの一つです。適切なファイル名を付けることで、画像検索でのランキング向上が期待できます。

ファイル名の命名規則:

ディレクトリ構造の最適化:

/images/products/blue-wireless-headphones.webp のように、カテゴリを反映したディレクトリ構造にすることで、Google がサイトの構造を理解しやすくなります。/img/001.jpg のような無意味な構造は避けてください。

画像の URL が変更される場合 (リニューアル時など) は、301 リダイレクトを設定して既存の画像検索ランキングを維持します。画像 URL のリダイレクトを忘れると、画像検索からのトラフィックが一気に失われる可能性があります。

構造化データと画像サイトマップ - Google への明示的な情報提供

構造化データ (Schema.org) と画像サイトマップを活用することで、Google に画像の詳細情報を明示的に伝え、リッチリザルトへの表示確率を高められます。

画像に関連する構造化データ:

画像サイトマップの作成:

<url>
<loc>https://example.com/page</loc>
<image:image>
<image:loc>https://example.com/images/photo.webp</image:loc>
<image:title>画像のタイトル</image:title>
<image:caption>画像の説明文</image:caption>
</image:image>
</url>

画像サイトマップは、JavaScript で動的に読み込まれる画像や、CSS の背景画像として設定されている画像など、Google のクローラーが通常のクロールでは発見しにくい画像を伝えるのに特に有効です。通常の sitemap.xml に <image:image> 要素を追加する形式が最も一般的です。

Core Web Vitals と画像最適化 - LCP と CLS への対策

Core Web Vitals は Google のランキング要因の一つであり、画像は LCP (Largest Contentful Paint) と CLS (Cumulative Layout Shift) の両方に大きく影響します。画像の最適化は SEO とユーザー体験の両面で重要です。

LCP の改善策:

CLS の防止策:

SEO の実践書は Amazon で探せます

画像の遅延読み込みとプリロード - 読み込み戦略の最適化

画像の読み込み戦略は、ページの初期表示速度と全体的なユーザー体験に直接影響します。ファーストビューの画像は即座に読み込み、それ以外は遅延読み込みするという基本戦略を、適切に実装することが重要です。

遅延読み込み (Lazy Loading) の実装:

プリロードの実装:

注意すべきアンチパターン:

Google の PageSpeed Insights で「画像の遅延読み込み」の警告が出る場合は、ビューポート外の画像に loading="lazy" が設定されていないことが原因です。ファーストビュー以外の全画像に一律で設定することで解消できます。

関連記事

画像の遅延読み込み実装ガイド - loading=lazy と IntersectionObserver の使い分け

Web ページの初期表示速度を改善する画像遅延読み込みの実装方法を、ネイティブ API と JavaScript の両アプローチで解説します。

Web 用画像のファイルサイズ最適化戦略 - 品質を保ちながら軽量化する技術

Web パフォーマンスを最大化するための画像ファイルサイズ最適化手法を、フォーマット選択からメタデータ除去まで体系的に解説します。

画像のアクセシビリティ - alt テキストの書き方とコントラスト比の基準

Web アクセシビリティにおける画像の適切な取り扱いを、alt テキストの記述ルール、装飾画像の処理、コントラスト比の基準とともに解説します。

Web サイトの画像パフォーマンス監査 - Core Web Vitals 改善の実践ガイド

Web サイトの画像がパフォーマンスに与える影響を監査する方法を解説。LCP 改善、CLS 防止、転送量削減の具体的な手法を紹介します。

Core Web Vitals と画像最適化の関係 - LCP, CLS, INP を改善する実践手法

Core Web Vitals の 3 指標 (LCP, CLS, INP) に画像が与える影響と、具体的な改善手法を解説。実測データに基づくパフォーマンス改善の優先順位と実装パターンを紹介します。

画像読み込み戦略の設計 - preload, fetchpriority, decoding を使いこなす

Web ページの画像読み込みを最適化する 3 つの属性を徹底解説。LCP 改善に直結する preload、fetchpriority、decoding の正しい使い方と組み合わせ方を紹介。

関連用語