画像SEOガイド：alt属性、ファイルサイズ、画像検索での順位対策

平均的なウェブページで、ダウンロードされるデータの中で最も大きな割合を占めるのは画像です。同時に、多くのサイトで最も最適化されていない要素でもあります。

このコストは2つあります。ページが遅くなる（Core Web Vitalsが低下し、コンバージョンが減る）ことと、Google画像検索から得られたはずのトラフィックがまったく入ってこないことです。この記事では両方を扱います。

画像SEOが扱う範囲

3つの領域が交わる部分です。

• アクセシビリティ： スクリーンリーダーを使う人が、画像の内容を理解できるか？
• パフォーマンス： 画像はどれだけ速く読み込まれ、ページレイアウトをずらしていないか？
• 発見可能性： Google画像検索や画像検索結果に表示されているか？

この3つはすべて同じ技術的な判断の影響を受けます。だからこそまとめて扱う必要があります。

alt属性（alt text）の正しい書き方

alt属性は、画像のテキスト版です。画像が読み込めなかったときに表示され、スクリーンリーダーで読み上げられ、Googleが画像を理解するための一次シグナルになります。

ルール：

• 画像が見えない人に説明するつもりで書く。 これが正しいテストです。
• 125文字を超えない。 一部のスクリーンリーダーはそれ以降を読み上げません。
• 「画像」「写真」で始めない。 すでに画像であることはわかっています。
• 装飾用画像はalt=""にする。 削除しないでください。空のaltはスクリーンリーダーに「これは読み飛ばしてよい」と伝えます。alt自体がないとファイル名が読み上げられてしまいます。
• キーワードを詰め込まない。 スパムシグナルと判定される可能性があります。

ファイル名とURL

画像のファイル名は今でも1つのシグナルであり、コストはゼロです。

IMG_20260813_113244.jpg   →   blue-leather-shoulder-bag.jpg

マルチバイト文字（日本語など）は使わないでください（サーバーによっては問題が起きます）。単語はハイフンでつなぎ、アンダースコアは使わないでください。

正しいフォーマット：WebPかAVIFか？

実践的なアプローチ：WebPをデフォルトにし、<picture>タグでAVIFを提供し、JPEGをフォールバックとして残します。

<picture>
  <source srcset="bag.avif" type="image/avif">
  <source srcset="bag.webp" type="image/webp">
  <img src="bag.jpg" alt="青いレザーのショルダーバッグ" width="800" height="1000">
</picture>

サイズと解像度

最もよくある無駄：幅4,000ピクセルの写真を、画面上で600ピクセルしか表示されない領域に配置すること。ブラウザはファイル全体をダウンロードした後に縮小します。

ルール：

• 画像は表示される最大サイズの2倍を超えて読み込まないでください（Retina対応には2倍で十分）。
• srcsetを使い、画面サイズごとに異なるサイズを提供してください。
• コンテンツ内の画像は、目標ファイルサイズを200KB以下にしてください。全幅のカバー画像でも400KBを超えないようにしましょう。

<img src="bag-800.webp"
     srcset="bag-400.webp 400w, bag-800.webp 800w, bag-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     alt="青いレザーのショルダーバッグ"
     width="800" height="1000">

widthとheightを書くことがなぜ重要か

widthとheight属性を書かないと、ブラウザは画像がどれだけのスペースを占めるか事前にわかりません。画像が読み込まれた瞬間、その下のコンテンツが下にずれます——これが**Cumulative Layout Shift（CLS）**という指標を悪化させ、Core Web Vitalsの評価を下げます。

特にモバイルでは、レイアウトのずれによってユーザーが誤って別の場所をタップしてしまうこともあります。この2つの属性は最も安価なCore Web Vitals対策です。詳細はCore Web Vitalsガイドをご覧ください。

遅延読み込み（Lazy Loading）の落とし穴

loading="lazy"は、画面に入るまで画像を読み込まないようにし、ページの初期表示を高速化します。しかしファーストビューに表示される画像にlazyを設定してはいけません。

ページ最上部のカバー画像は、多くの場合**Largest Contentful Paint（LCP）**の対象要素です。それに遅延読み込みを適用すると、あなたが測定している最も重要な速度指標を直接悪化させることになります。

ルール：ファーストビューに表示されるものはloading="eager"、それより下はloading="lazy"。

Google画像検索からトラフィックを得る

画像検索は、多くの業種（ファッション、インテリア、フード、家具、自動車部品）で軽視されがちなトラフィック源です。順位に影響する主な要素は次の通りです。

1. 画像の周囲のテキスト。 Googleは画像の文脈を、最も近くにある見出しや段落から読み取ります。
2. ページ自体の順位。 ページがそのトピックで権威があれば、その画像もより上位に表示されます。
3. オリジナリティ。 ストック写真は何千ものサイトで同じものが使われています。自分で撮影した画像の方が識別されやすくなります。
4. 構造化データ。 商品、レシピ、動画のスキーマは画像検索結果でバッジを獲得できます——スキーママークアップガイドで解説しています。
5. 画像サイトマップ。 特に画像をJavaScriptで読み込んでいるサイトで、発見を容易にします。

画像サイトマップ

通常のサイトマップに画像情報を追加できます。

<url>
  <loc>https://yoursite.com/product/bag</loc>
  <image:image>
    <image:loc>https://yoursite.com/img/bag.webp</image:loc>
  </image:image>
</url>

これは、ページ読み込み後にJavaScriptで画像を取得しているサイトで顕著な効果を発揮します。サイトマップ構造全体についてはrobots.txtとsitemap.xmlガイドをご覧ください。

チェックリスト

• [ ] すべてのコンテンツ画像に意味のあるaltがあるか？
• [ ] 装飾用画像はalt=""になっているか？
• [ ] ファイル名は説明的で、ハイフン区切り・マルチバイト文字なしになっているか？
• [ ] フォーマットはWebP（またはAVIF）か？
• [ ] ファイルサイズは200KB以下か？
• [ ] widthとheightは記述されているか？
• [ ] ファーストビューの画像はlazyになっていないか？
• [ ] srcsetでモバイル向けの小さいバージョンを提供しているか？
• [ ] 画像はCDN経由で配信されているか？
• [ ] サイトマップに画像情報は含まれているか？

よくある質問

alt属性にキーワードを入れるべきですか？

自然に含まれるなら入れて構いませんが、無理に入れる必要はありません。alt属性の第一の役割は画像を説明することです。キーワードがその説明の中に自然に収まるなら問題ありません。

ストック写真を使うのは不利ですか？

順位に対するペナルティはありませんが、同じファイルが何百ものサイトで使われているため、画像検索での識別性は低くなります。低予算であっても、自分で撮影した写真の方が常に有利です。

画像をCDNに移すとSEOに影響しますか？

良い影響があります。読み込み時間が短縮されます。別のドメインから配信している場合は、画像サイトマップに完全なURLを使用してください。

画像は何枚までなら多すぎませんか？

枚数自体は問題ではなく、合計の重さが問題です。10枚の画像で800KBに収まっているページなら問題ありませんが、3枚の画像で6MBあるページには問題があります。

関連記事：

• Core Web VitalsとPage Speedガイド
• オンページSEOガイド：A to Z完全プレイブック
• テクニカルSEOチェックリスト：30項目
• スキーママークアップ完全ガイド
• モバイルSEOガイド