画像SEO：代替テキスト、ファイルサイズ、形式、遅延読み込み

画像はページをわかりやすく、魅力的にします。Google 画像検索やビジュアル検索の機能から訪問者を呼び込むこともできます。しかし画像はたいていページの中で最も重い部分であり、最適化されていない画像はサイトが遅くなる最もよくある原因の一つです。

画像SEOとは、両方を正しく行うことです。画像を検索エンジンに理解させ、すべての人がアクセスできるようにしながら、速さも保つことです。

役に立つ代替テキストを書く

alt 属性は画像を言葉で説明します。

<img src="latte-art.webp" alt="Barista pouring a heart-shaped latte art design into a white cup" width="1200" height="800">

代替テキストには3つの役割があります。

1. アクセシビリティ – 画像が見えない人のために、スクリーンリーダーが読み上げる
2. 代替表示 – 画像の読み込みに失敗したとき、ブラウザが表示する
3. 理解 – 検索エンジンが周囲の文章とあわせて、画像に何が写っているかを判断する

よい代替テキストの書き方

• 画像に何が写っているかと、なぜそのページにあるのかを説明する
• 具体的に書く：「机の横で折りたたまれた赤いブロンプトンの折りたたみ自転車」のほうが「自転車」より優れています
• 簡潔にする（日本語ならおおむね数十文字程度）
• 「〜の画像」「〜の写真」で始めない（スクリーンリーダーがすでに画像であることを伝えます）
• 関連するキーワードは、画像を自然に説明する場合にだけ使う

装飾的な画像

区切り線や背景の飾りなど、純粋に装飾的な画像の alt 属性は空にします：alt=""。これでスクリーンリーダーは読み飛ばします。属性そのものを省略するのは誤りで、スクリーンリーダーによってはファイル名を読み上げてしまいます。

説明的なファイル名を使う

IMG_4821.jpg では何も伝わりません。brompton-folding-bike-folded.jpg なら、検索エンジンにもう一つ手がかりを与えられます。小文字の英単語をハイフンで区切りましょう。

適切な形式を選ぶ

ほとんどのサイトでは、<picture> 要素で WebP や AVIF を配信する（必要に応じて JPEG を代替にする）ことが、単独で最も大きな改善になります。

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Mountain lake at sunrise" width="1600" height="900">
</picture>

ほとんどの CMS、画像プラグイン、CDN は、画像を自動的に最新の形式へ変換できます。

リサイズして圧縮する

よくある失敗は、カメラから直接取り込んだ幅4,000ピクセルの写真をアップロードし、幅800ピクセルで表示することです。それでもブラウザはファイル全体をダウンロードします。

• 実際に表示される最大サイズに画像をリサイズする（高解像度ディスプレイ向けに必要なら2倍に）
• 圧縮する（品質75〜85%程度なら、通常は元画像と見分けがつきません）
• コンテンツ内の画像はほとんどを 150〜200KB 以下に、メイン画像は理想的には300KB以下を目指す

レスポンシブ画像を配信する

スマートフォンにデスクトップサイズの画像は必要ありません。srcset と sizes 属性を使えば、ブラウザが適切なファイルを選べます。

<img src="product-800.webp"
     srcset="product-400.webp 400w, product-800.webp 800w, product-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Leather wallet in tan, open to show card slots" width="800" height="600">

WordPress や多くの最新フレームワークは、これを自動で生成します。

幅と高さを指定してレイアウトのずれを防ぐ

画像に width と height 属性がないと、ブラウザはどれだけのスペースを確保すればよいかわからず、画像の読み込み時にコンテンツがずれます。これは Core Web Vitals の一つである Cumulative Layout Shift（CLS） を悪化させます。画像のサイズは必ず指定しましょう（または CSS の aspect-ratio プロパティを使います）。レスポンシブな CSS でも拡大縮小は可能です。

ファーストビューより下の画像は遅延読み込みする

loading="lazy" は、スクロールして画面に入りそうになったときにだけ画像を読み込むようブラウザに指示します。

<img src="gallery-3.webp" alt="…" loading="lazy" width="600" height="400">

ページの下のほうにある画像に使いましょう。ただし、メインのヒーロー画像には使わないでください。最初の画面で最も大きな画像を遅延読み込みすると、Largest Contentful Paint が遅れます。その画像には、代わりに fetchpriority="high" を検討しましょう。

画像を見つけてもらう

• 画像を関連する文章の近くに置き、役立つ場合はキャプションを付ける（Google は周囲のコンテンツから画像を理解します）
• 意味のある画像には CSS 背景ではなく標準の <img> 要素を使い、検索エンジンが見つけられるようにする
• 大量の画像がある場合は、XMLサイトマップや画像サイトマップに画像を追加する
• 関連する場合は構造化データに画像を含める（Product、Article、Recipe）
• SNS で共有されたときに魅力的なプレビューが出るよう og:image を設定する

画像SEOのチェックリスト

• 意味のある画像すべてに説明的な代替テキスト、装飾的な画像には空の alt
• ハイフン区切りの説明的なファイル名
• WebP または AVIF 形式
• 表示サイズにリサイズし、圧縮済み
• レスポンシブ配信のための srcset
• 幅と高さの属性を指定
• ファーストビューより下の画像は遅延読み込み（ヒーロー画像は除く）
• サーバーまたは CDN で長いキャッシュ期間を設定

ECサイトの画像SEO

商品画像は販売に大きく貢献します。ショップでは次のことを心がけましょう。

• 複数の角度と使用シーンを見せる。 Google 画像検索やショッピングの結果では、鮮明で高品質な商品写真が好まれます。
• 商品ごとに統一感のあるすっきりしたメイン画像を使う。 ショッピングの結果でよく使われます。
• 商品とバリエーションがわかる代替テキストを書く：「Trail Runner X レディース ランニングシューズ ティール 側面」。
• Product の構造化データに画像を含める。URLは絶対URLで指定します。
• ズームできる画像は、ページ読み込み時ではなく、必要になったときだけ大きな画像を読み込むようにします。

ブログやメディアの画像SEO

• できるだけオリジナルの画像を使いましょう。オリジナルの写真、図、グラフはリンクを集め、画像検索で目立ちます。ストックフォトは何千ものサイトで使われています。
• 画像が情報を伝える場合はキャプションを付けましょう。キャプションはページの中で最も読まれる文章の一つです。
• 複雑なテーマには共有しやすい図やインフォグラフィックを作り、重要な情報は本文にも書きましょう。
• 幅1200ピクセル以上の印象的なアイキャッチ画像を選びましょう。Google Discover は大きく高品質な画像を好み、robots の max-image-preview:large 設定で大きなプレビューを許可できます。

背景画像と CSS

CSS の background-image で設定した画像は、検索エンジンにはコンテンツとして見えず、代替テキストもありません。装飾にだけ使いましょう。商品、グラフ、スタッフ写真など意味のある画像には <img> 要素を使います。

画像CDNと自動最適化

複数のサイズや形式を手作業で管理するのは、すぐに現実的ではなくなります。画像CDNやサービス（Cloudflare Images、Cloudinary、imgix、Bunny Optimizer など）や多くの WordPress プラグインは、次のことができます。

• 画像を自動的に WebP や AVIF に変換する
• 端末ごとにその場でリサイズする
• 賢く圧縮する
• 訪問者の近くに画像をキャッシュする

利用する場合は、画像のURLが安定していてクロール可能であること、CDN が Googlebot をブロックしていないことを確認しましょう。

効果を測る

Google Search Console の「検索パフォーマンス」レポートを開き、検索タイプを画像に切り替えると、画像がどれだけのクリックと表示を得ているか、どのクエリで表示されているかがわかります。同じツールで Core Web Vitals も追い、画像の最適化が Largest Contentful Paint と Cumulative Layout Shift を改善しているか確認しましょう。

よくある失敗

1. カメラのままのサイズの写真をアップロードし、ブラウザに縮小させる
2. alt 属性がない、またはキーワードを詰め込んだ代替テキスト
3. ヒーロー画像を遅延読み込みする
4. 幅と高さがなく、レイアウトがずれる
5. 文字を HTML で書かずに画像に埋め込む（検索エンジンにもスクリーンリーダーにも見えず、翻訳もできません）
6. robots.txt で画像フォルダをブロックする

重要なポイント

• 画像に何が写っているか、なぜそこにあるのかを説明する代替テキストを書き、装飾的な画像には空の alt を使います。
• 表示サイズにリサイズして圧縮した WebP や AVIF を配信します。
• レイアウトのずれを防ぐため、幅と高さを必ず指定します。
• ファーストビューより下の画像は遅延読み込みし、メインのヒーロー画像には決して使いません。
• 意味のある画像には本物の img 要素を使い、関連する文章の近くに置き、説明的なファイル名を付けます。
• Search Console の画像検索のデータを確認し、画像がもたらすアクセスを測りましょう。

よくある質問

代替テキストは順位に役立ちますか？

画像が Google 画像検索で上位に表示される助けになり、ページに文脈を加えます。主な目的はアクセシビリティであり、人のために書くことが、たいていは検索エンジンにとっても最善です。

WebP と AVIF のどちらを使うべきですか？

どちらも広く対応しています。AVIF はファイルが小さくなることが多く、WebP はエンコードが速く、古いツールでも広く対応しています。AVIF を配信し、WebP を代替にしているサイトも多くあります。

画像のファイル名は重要ですか？

多少は重要です。説明的なファイル名は小さな追加シグナルになり、メディアライブラリの管理も楽になります。

遅延読み込みはSEOに有利ですか？

正しく使えば有利です。ネイティブの loading="lazy" は Google が対応しています。ただし、ページを開いた時点で見えている画像には遅延読み込みを使わないでください。