画像SEOの最適化ガイド｜alt属性の書き方からWebP対応まで徹底解説

画像SEOとは

画像SEOとは、Webサイトに掲載する画像を検索エンジンに最適化し、画像検索からの流入を増やしたり、ページ全体のSEO評価を向上させたりするための施策です。テキストコンテンツの最適化に比べると見落とされがちですが、画像SEOを適切に行うことで得られるメリットは少なくありません。

Googleの検索結果では、通常のウェブ検索に加えて画像検索の結果も表示されます。また、検索結果ページにリッチリザルトとして画像が表示されるケースも増えており、画像を最適化することでクリック率の向上が期待できます。

画像SEOの主な施策には以下のようなものがあります。

• alt属性（代替テキスト）の適切な記述
• ファイル名の最適化
• 次世代画像フォーマット（WebP）への対応
• 遅延読み込み（lazy loading）の実装
• 画像サイトマップの作成
• 画像サイズ・容量の最適化

これらの施策は、SEO全般の取り組みの一環として、テキストコンテンツの最適化とあわせて実施することが重要です。特に表示速度の改善はCore Web Vitalsのスコアにも直結するため、テクニカルSEOの観点からも画像最適化は欠かせません。

alt属性の正しい書き方

alt属性（alternative text）は、画像が表示されない場合に代わりに表示されるテキストであり、検索エンジンが画像の内容を理解するための重要な手がかりとなります。スクリーンリーダーを利用するユーザーにも画像の内容を伝えるため、アクセシビリティの観点からも必須の設定です。

alt属性の基本ルール

• 画像の内容を簡潔かつ正確に記述する
• キーワードの詰め込みは避ける
• 「画像」「写真」「イメージ」などの不要な接頭語は使わない
• 装飾目的の画像は空のalt属性（alt=""）を設定する
• 80文字以内を目安にする

具体例3パターン

パターン1：商品画像の場合

良い例では、商品名・ブランド・色・カテゴリなど、ユーザーが画像検索で使いそうなキーワードを自然に含めています。一方、キーワードを羅列しただけの例はスパム的でGoogleからの評価を下げる要因になります。

パターン2：図解・インフォグラフィックの場合

図解やインフォグラフィックの場合は、図のタイトルだけでなく、何を示しているかの概要を含めると、検索エンジンもユーザーも内容を把握しやすくなります。

パターン3：人物・イベント写真の場合

人物やイベントの写真では、いつ・どこで・誰が・何をしているかを簡潔に記述しましょう。「写真」「画像」という語は冗長なため省略します。

画像ファイル名の最適化

画像のファイル名もSEOに影響します。Googleは画像のファイル名を画像の内容を理解する手がかりの一つとして利用しています。

ファイル名の命名ルール

• 内容を表す英単語を使用する：IMG_20240101.jpg ではなく seo-keyword-research-tool.jpg のように、画像の内容を表す英単語を使用します。
• 単語の区切りにはハイフンを使用する：Googleはハイフンを単語の区切りとして認識します。アンダースコアやスペースではなく、ハイフンを使いましょう。
• 短く簡潔に：ファイル名は短くわかりやすいものにします。3〜5単語程度が目安です。
• 日本語ファイル名は避ける：日本語のファイル名はURLエンコードされて長い文字列に変換されるため、英語でのファイル名が推奨されます。

ファイル名の具体例

既存サイトの画像ファイル名をすべて変更するのは大きな作業になりますが、新しく追加する画像からは最適化されたファイル名を使用する習慣をつけましょう。ファイル名を変更する場合は、旧ファイルURLから新ファイルURLへの301リダイレクトを忘れずに設定します。

WebP形式への変換と対応

WebPは、Googleが開発した次世代の画像フォーマットです。従来のJPEGやPNGと比較して、画質を維持しつつファイルサイズを25〜35%削減できるため、ページの表示速度改善に大きく貢献します。

WebPのメリット

• 高い圧縮率：JPEGと同等の画質で25〜35%小さいファイルサイズを実現
• 透過対応：PNGのような透過（アルファチャンネル）をサポート
• アニメーション対応：GIFの代替として使用可能（さらに小さいファイルサイズ）
• Core Web Vitalsの改善：LCP（Largest Contentful Paint）のスコア向上に直結

ブラウザの対応状況

2024年現在、WebPは主要なブラウザすべてでサポートされています。Chrome、Firefox、Safari、Edgeなど、一般的なブラウザであればWebP画像を問題なく表示できます。Internet Explorer 11のみ非対応ですが、マイクロソフトによるサポートが終了しているため、実質的に問題にはなりません。

WebPへの変換方法

既存の画像をWebPに変換する主な方法は以下の通りです。

• オンラインツール：Squoosh（Google製）、CloudConvertなど
• コマンドラインツール：Googleのcwebpコマンドで一括変換が可能
• 画像編集ソフト：Photoshop、GIMPなどからWebP形式でエクスポート
• WordPressプラグイン：アップロード時に自動変換するプラグインを利用

HTMLでの実装方法

WebP非対応ブラウザへのフォールバックを考慮する場合は、<picture>要素を使用します。

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="代替テキスト" width="800" height="600">
</picture>

この記述により、WebP対応ブラウザではWebP画像が、非対応ブラウザではJPEG画像が表示されます。

画像の遅延読み込み（lazy loading）

遅延読み込み（lazy loading）とは、ページの読み込み時にすべての画像を一度にダウンロードせず、ユーザーがスクロールして画像が表示領域に近づいたタイミングでダウンロードを開始する技術です。

遅延読み込みのSEOメリット

• 初期表示速度の向上：ファーストビューに必要な画像のみを先に読み込むため、ページの初期表示が高速になります。
• データ転送量の削減：ユーザーがページの途中で離脱した場合、下部の画像はダウンロードされないため、無駄なデータ転送を削減できます。
• Core Web Vitalsの改善：特にLCP（Largest Contentful Paint）やFID（First Input Delay）のスコア改善に寄与します。Core Web VitalsはGoogleのランキング要因の一つであり、画像の遅延読み込みはスコア改善の有効な手段です。

実装方法

最も簡単な実装方法は、HTML標準のloading属性を使用する方法です。

<img src="image.jpg" alt="代替テキスト" loading="lazy" width="800" height="600">

loading="lazy"を指定するだけで、ブラウザがネイティブに遅延読み込みを実行します。JavaScriptを使ったライブラリ（lazysizes等）も存在しますが、現在はネイティブのloading属性で十分対応可能です。

遅延読み込みの注意点

• ファーストビューの画像には適用しない：ページ上部に表示される画像（ヒーローイメージやアイキャッチ画像など）に遅延読み込みを適用すると、表示が遅延しユーザー体験が悪化します。LCPの悪化にもつながるため、ファーストビューの画像にはloading="eager"（デフォルト）を使用しましょう。
• width・height属性を必ず指定する：画像のwidth・heightを指定しないと、遅延読み込み時にレイアウトシフト（CLS：Cumulative Layout Shift）が発生します。画像の表示サイズをあらかじめ指定しておくことで、この問題を防げます。
• 重要な画像にはfetchpriority="high"を指定：ファーストビューのメイン画像には、fetchpriority="high"を追加することで、ブラウザに優先的にダウンロードさせることができます。

画像サイトマップ

画像サイトマップとは、サイト内の画像情報を検索エンジンに伝えるためのXMLサイトマップです。通常のサイトマップがページのURLを一覧化するのに対し、画像サイトマップは各ページに含まれる画像のURLや関連情報を記述します。

画像サイトマップのメリット

• JavaScriptで動的に読み込む画像など、通常のクロールでは発見されにくい画像をGoogleに通知できる
• 画像のタイトルやキャプション情報を追加で伝えることができる
• 画像検索でのインデックス促進が期待できる

画像サイトマップの記述例

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://example.com/page/</loc>
    <image:image>
      <image:loc>https://example.com/images/photo.jpg</image:loc>
      <image:title>画像のタイトル</image:title>
      <image:caption>画像の説明文</image:caption>
    </image:image>
  </url>
</urlset>

画像サイトマップは、既存のXMLサイトマップに画像情報を追加する形でも、画像専用のサイトマップとして独立して作成する形でも構いません。Search Consoleから送信することで、Googleへの通知が完了します。

WordPressでの画像最適化

WordPressは世界で最も利用されているCMSであり、画像最適化に役立つプラグインが豊富に揃っています。ここでは、画像SEOに特に有効なプラグインと設定を紹介します。

おすすめプラグイン

1. EWWW Image Optimizer

WordPressで最も人気のある画像最適化プラグインの一つです。

• 画像アップロード時に自動で圧縮
• 既存画像の一括最適化機能
• WebPへの自動変換機能
• 遅延読み込み機能
• 無料版でも基本的な機能が利用可能

2. ShortPixel Image Optimizer

高い圧縮率と画質のバランスに定評があるプラグインです。

• ロスレス・ロッシー・グロッシーの3段階の圧縮レベル
• WebP・AVIF形式への自動変換
• 既存画像の一括最適化
• 月間100枚まで無料で利用可能

3. Smush

WPMU DEVが提供する画像圧縮プラグインです。

• アップロード時の自動圧縮
• 一括最適化機能
• 遅延読み込み機能
• 無料版で月間50枚まで圧縮可能

WordPress標準の画像機能を活用する

WordPress 5.8以降では、WebPへの対応が標準で組み込まれています。また、WordPress 5.5以降ではloading="lazy"が画像に自動で付与されるようになっています。これらの標準機能を活かしつつ、プラグインで補完する形が効率的です。

WordPressでの画像SEOチェックリスト

• 画像アップロード時にalt属性を必ず入力する
• メディアライブラリの画像にタイトル・キャプションを設定する
• 画像圧縮プラグインを導入し、自動最適化を有効にする
• WebP変換機能を有効にする
• アップロード前に適切なサイズにリサイズする（幅1200〜1600px程度が目安）
• サイトマッププラグイン（Yoast SEO、Rank Mathなど）で画像サイトマップを自動生成する

WordPressサイトのSEO対策全般については、WordPress SEOの完全ガイドも参考にしてください。

関連記事

• SEOとは？検索エンジン最適化の基本と実践ガイド
• テクニカルSEOの基礎と実践方法
• WordPress SEOの完全ガイド
• サイト構造の最適化ガイド
• noindexの使い方と設定方法

まとめ

画像SEOは、テキストコンテンツの最適化と同様にサイトのSEOパフォーマンスを向上させる重要な施策です。特にalt属性の設定、WebP対応、遅延読み込みの3つは、比較的少ない工数で大きな効果が期待できるため、優先的に取り組むべきポイントです。

画像最適化のポイントを改めて整理すると、以下の通りです。

• alt属性は画像の内容を簡潔かつ正確に記述し、キーワードの詰め込みは避ける
• ファイル名は画像の内容を表す英単語をハイフン区切りで使用する
• WebP形式に変換してファイルサイズを削減し、表示速度を改善する
• 遅延読み込みを実装してCore Web Vitalsのスコアを改善する（ファーストビューは除く）
• 画像サイトマップを作成してGoogleに画像情報を伝える
• WordPressでは画像最適化プラグインを活用して効率的に対応する

画像の最適化はCore Web Vitalsのスコア改善にも直結し、ページの表示速度向上やユーザー体験の改善につながります。SEOの基本を押さえたうえで、テクニカルSEOの一環として画像SEOにも取り組み、サイト全体の検索パフォーマンスを最大化しましょう。