画像SEOの最適化 — alt属性からWebP変換まで
画像SEOの重要性
画像SEOとは、Webサイト上の画像を検索エンジンに正しく認識させ、Google画像検索やWebの検索結果での表示を最適化するための施策です。Google画像検索は全検索トラフィックの約20〜30%を占めるとされており、画像SEOを適切に行うことで大きなトラフィック増加が期待できます。
また、画像の最適化はページ速度の改善にも直結します。Webページのデータ量の大部分を画像が占めることが多いため、画像の最適化はCore Web Vitals（特にLCP）の改善にも貢献し、SEO全体のパフォーマンスを向上させます。
alt属性（代替テキスト）の最適化
alt属性は画像のSEOにおいて最も重要な要素です。検索エンジンは画像の内容を完全に理解することができないため、alt属性のテキストを手がかりに画像の内容を把握します。
alt属性のベストプラクティス
- 画像の内容を正確に説明する：画像に何が写っているかを具体的に記述する
- 簡潔に記述する：125文字以内を目安に、簡潔かつ的確な説明を書く
- キーワードを自然に含める：ターゲットキーワードを無理なく含められる場合は含める
- キーワードの詰め込みを避ける：alt属性にキーワードを不自然に羅列しない
- 装飾的な画像には空のaltを設定：装飾目的の画像は
alt=""とする
<!-- 良い例 -->
<img src="seo-audit-tool.webp" alt="SEO監査ツールの分析ダッシュボード画面" />
<!-- 悪い例（キーワード詰め込み） -->
<img src="seo.webp" alt="SEO SEO対策 検索エンジン最適化 SEOツール" />
<!-- 装飾画像 -->
<img src="divider.svg" alt="" role="presentation" />画像ファイル名の最適化
画像のファイル名も検索エンジンが画像の内容を理解する手がかりとなります。意味のある英語のファイル名をハイフン区切りで付けましょう。
- 良い例：
seo-keyword-research-process.webp - 悪い例：
IMG_20260301_001.jpg、screenshot.png
画像フォーマットの選択
WebP
WebPはGoogleが開発した次世代画像フォーマットで、JPEGと比較して25〜35%のファイルサイズ削減が可能です。透過やアニメーションにも対応しており、PNGやGIFの代替としても使用できます。2026年現在、主要なブラウザはすべてWebPをサポートしています。
AVIF
AVIF（AV1 Image File Format）はWebPよりもさらに高い圧縮率を実現する次世代フォーマットです。同等の画質でWebPより約20%小さなファイルサイズを実現できます。ブラウザのサポートも拡大しており、今後の主流フォーマットとなることが期待されています。
picture要素によるフォーマットの出し分け
<picture>
<source srcset="image.avif" type="image/avif" />
<source srcset="image.webp" type="image/webp" />
<img src="image.jpg" alt="SEO分析レポートのグラフ" width="800" height="450" />
</picture>レスポンシブ画像の実装
デバイスの画面サイズやピクセル密度に応じて最適なサイズの画像を提供するために、srcset属性とsizes属性を活用します。これにより、モバイルデバイスで不必要に大きな画像を読み込むことを防ぎ、ページ速度を改善できます。
<img
srcset="hero-480w.webp 480w, hero-800w.webp 800w, hero-1200w.webp 1200w"
sizes="(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px"
src="hero-800w.webp"
alt="Webサイト分析ツールのメイン画面"
width="1200"
height="630"
loading="lazy"
/>画像のサイズ指定とCLS対策
画像にはwidth属性とheight属性を必ず設定しましょう。ブラウザは画像の読み込み前にスペースを確保でき、CLS（Cumulative Layout Shift）の発生を防止できます。CSSでaspect-ratioプロパティを使用する方法も有効です。
遅延読み込み（Lazy Loading）
ファーストビューの外にある画像にはloading="lazy"属性を設定し、ユーザーがスクロールして画像の近くに来た時点で読み込みを開始する遅延読み込みを実装します。ただし、LCP要素となる画像（ヒーロー画像など）にはlazy loadingを設定せず、fetchpriority="high"で優先的に読み込むようにします。
画像サイトマップ
画像専用のサイトマップを作成するか、既存のXMLサイトマップに画像情報を追加することで、Google画像検索でのインデックスを促進できます。特にJavaScriptで動的に読み込まれる画像は、画像サイトマップで明示的に伝えることが重要です。
画像SEOは技術的な最適化とコンテンツ的な最適化の両面から取り組むことで、Google画像検索からのトラフィック獲得とページ全体のSEOパフォーマンス向上を同時に実現できます。
