4-3 画像最適化

画像の SEO、なぜ大事？

多くの人が見落としがちですが、画像は SEO で非常に重要です。その理由は4つあります。

1. Google 画像検索からの集客 「〇〇 画像」で検索する人は多く、画像検索から直接サイトに訪問してもらえます。

2. ページの表示速度 Webページで最も重いファイルは、ほとんどの場合「画像」です。画像を最適化するだけでページの表示が大幅に速くなります。

3. 表示のガタつき防止 画像のサイズ（横幅・高さ）が指定されていないと、読み込み途中にページがガクッとずれます（第2章で学んだ CLS の原因）。

4. アクセシビリティ 目が不自由な方はスクリーンリーダーというソフトでWebを閲覧します。画像の説明文（alt テキスト）がないと、何の画像かわかりません。

やってみよう：画像の問題を一括チェック

Claude Code でサイト内の全画像を一括でチェックしましょう。

# 画像の SEO チェック
> /seo images https://あなたのサイト.com

# チェックされる項目:
# - alt テキスト（画像の説明文）があるか
# - ファイルサイズが大きすぎないか
# - 最新の画像形式（WebP）を使っているか
# - 横幅・高さが HTML で指定されているか
# - 遅延読み込み（lazy loading）が設定されているか

やってみよう：画像の問題を修正する

チェック結果に問題があった場合、Claude Code に修正を依頼しましょう。よくある修正を3つ紹介します。

# 1. alt テキスト（画像の説明文）を追加
> 画像の alt テキストが未設定のものに説明を追加して。
> 画像の内容がわかる日本語の説明をつけて。

# 2. 画像を軽量化（WebP 変換）
> public/images フォルダの画像を WebP 形式に変換して。
> HTML での参照も更新して。

# 3. 横幅・高さを指定して表示のガタつきを防止
> すべての img タグに width と height 属性を追加して。