📖 出典について：この記事は、Ahrefsが公開したImage SEO: 12 Actionable Tipsで扱われている考え方をもとに構成しています。内容は書き下ろしのうえ加筆し、日本語の読者に合わせて例やツール、参考先を入れ替えています。

画像SEOといえばalt属性にキーワードを入れるだけ、と思われがちです。しかし実際には、Googleがサイトの画像を見つけ、内容を理解し、順位を決めるまでに少なくとも12の要素が関わっています。それを放置するのは、手を伸ばせば届く流入を捨てているのと同じです。世界の検索のかなりの割合を占めるGoogle画像検索からの流入も含めてです。

Google自身も、機械学習による画像認識を年々進化させています。とはいえ、それで画像SEOが不要になるわけではありません。むしろGoogleは、ファイル名、代替テキスト、ページの文脈、表示速度といった手がかりを総動員して、画像を正確に読み解き、順位を決めています。

1. ファイル名で中身が分かるようにする

ファイル名は、Googleが画像の内容をつかむときに最初に見る手がかりのひとつです。カメラやスマホはIMG_0023.JPGやDSC_4817.jpgのような無機質な名前を自動で付けますが、これでは検索エンジンに何も伝わりません。

Google自身も公式ガイドラインで、ファイル名は画像の内容を示す手がかりだと明言しています。やるべきことは単純です。内容が分かる語をハイフンでつなぎ、詰め込みすぎないことです。

アップロード前にファイル名を付け直す。この小さな習慣が効いてきます。とくにネットショップ、料理ブログ、ポートフォリオなど、画像検索からの流入が売上や仕事につながるサイトでは差が出ます。

2. 役に立つ代替テキスト（alt）を書く

alt属性は、画像の内容をブラウザに伝えるものです。画像が読み込めなかったときに代わりに表示され、視覚に障害のある人が使うスクリーンリーダーに読み上げられ、Googleがページの視覚的な中身を理解する手がかりにもなります。

書き方はこれだけです。

<img src="dalmatian-puppy.jpg" alt="公園で遊ぶダルメシアンの子犬">

Googleは代替テキストに加えて、画像認識の技術とページの文脈を組み合わせて、画像が何を写しているかを判断します。求められているのは、情報量のある実用的な説明です。文脈に沿った形でキーワードを入れるのはかまいませんが、意味のない語を並べる詰め込みは避けてください。

手っ取り早いコツがあります。「これは___の写真です」という文の空欄を埋めてみてください。埋めた言葉を少し整えると、たいていよい代替テキストになります。例を挙げます。

商品画像であれば、型番や品番を代替テキストに入れておくと、細かい条件での検索に引っかかりやすくなります。キャプションも忘れないでください。Googleは画像の周囲の文章、つまりページに表示されているキャプションからも、画像の内容を読み取っています。

3. 用途に合ったファイル形式を選ぶ

どの形式を選ぶかは、そのままファイルの重さ、ひいてはページの表示速度に直結します。ウェブでよく使われるのはJPG・PNG・WebPの3つで、それぞれ性格が違います。

形式向いている用途透過おおよそのサイズ
JPG写真、グラデーションのある画像非対応小〜中
PNGロゴ、アイコン、文字入りのスクリーンショット対応中〜大
WebP現在のウェブのほぼすべての用途対応JPGやPNGより25〜35%軽い
GIF簡単なアニメーション一部対応内容による
SVGロゴ、アイコン、ベクターイラスト対応非常に軽い

目安はこうです。写真にはJPG、透過や文字のくっきりした画像にはPNG、そしてウェブでは可能なかぎりWebPを使います。WebPは同じ画質でより高い圧縮率が得られるためです。アップロード前の形式変換には、ImageToolsの変換ツールを使ってください。

4. 実際に表示されるサイズに合わせてリサイズする

800pxで表示するサイトに幅4000pxの写真をアップロードするのは、通信量の無駄です。ブラウザは画像をまるごとダウンロードしたうえで、余ったピクセルを捨てています。訪問者は待たされるだけで、見た目は何もよくなりません。

まずレイアウト上で画像が表示される最大の幅を調べます（画像の種類やサイトにもよりますが、多くは800px〜1440pxの範囲です）。その値に合わせてアップロード前にリサイズしましょう。Retina（高精細）ディスプレイに対応するなら、表示幅の2倍を目安にします。寸法をきっちり合わせるには、ImageToolsのサイズ変更ツールが便利です。

画像のリサイズと圧縮をまとめて

サイトの画像の寸法を整え、ファイルを軽くできます。無料で、外部のサーバーに送信することもありません。

サイズ変更 圧縮

5. 見た目を損なわない範囲で圧縮する

圧縮とは、画像の寸法はそのままにファイルサイズだけを小さくすることです。JPGの写真なら、品質を100%から80%に落とすだけでファイルが5分の1から10分の1になり、画面上ではほとんど違いが分かりません。

表示速度がランキング要因であることは、デスクトップでもモバイルでもGoogleが認めています。そしてページの重さの大半を占めているのは、たいてい画像です。アップロード前にすべての画像を圧縮しておく。テクニカルSEOの中で、これほど手間に対する見返りが大きい作業はそうありません。

画像の種類別、ファイルサイズの目安は次のとおりです。

ImageToolsの圧縮ツールなら、JPG・PNG・WebPをブラウザ上で軽くできます。ファイルが外部のサーバーに送られることはありません。

6. 画像サイトマップを用意する

画像サイトマップは、Googleが自力では見つけにくい画像の存在を知らせるものです。JavaScriptで読み込まれる画像や、作り込まれたギャラリーの中の画像がこれにあたります。通常のサイトマップと違い、画像サイトマップにはCDNなど別ドメインのURLも含められます。

WordPressでYoast SEOなどのプラグインを使っている場合、画像は自動でサイトマップに追加されます。自前で構築したサイトでは、Googleの公式ドキュメントに沿って手動で追加できます。主なタグはimage:loc（画像のURL）、image:title、image:captionです。

7. 商品画像には構造化データを使う

Googleは、レシピ・商品・記事・イベントなどさまざまな場面で、画像を含む構造化データ（Schema.org）に対応しています。正しく実装すれば、画像がリッチリザルト（rich results）として表示され、検索結果で目を引くようになり、クリック率の向上につながります。

ネットショップにとって、画像を含む商品のマークアップはとくに価値があります。正しく記述された商品は、Googleショッピングや検索結果の商品情報パネルに表示される可能性が出てきます。

8. 遅延読み込み（lazy loading）を導入する

遅延読み込みとは、最初にすべての画像をまとめて取得するのではなく、画面に入る直前になってから読み込む仕組みです。長い記事や商品一覧のように画像が多いページでは、最初に読み込む量を60〜80%減らせることもあります。

もっとも簡単な方法は、HTMLの標準機能を使うことです。

<img src="product.webp" alt="青いスニーカー" loading="lazy">

注意：ファーストビューの主役となる画像（スクロールせずに最初に見える画像）には、loading="lazy"を付けてはいけません。Core Web Vitalsの指標のひとつであるLCP（Largest Contentful Paint）が遅くなり、順位に直接響きます。

9. すべての画像タグにwidthとheightを書く

ブラウザが読み込み前に画像のサイズを知らないと、レイアウト上で正しい場所を確保できません。その結果、画像が表示された瞬間にページの中身が飛び跳ねてしまいます。この現象をGoogleが数値化したものが、Core Web VitalsのひとつCLS（Cumulative Layout Shift）です。

対策はいたって簡単で、画像のタグにwidthとheightを必ず書くことです。

<img src="product.webp" alt="青いスニーカー" width="800" height="800" loading="lazy">

この数値は、実際に表示される大きさと一致していなくてもかまいません。ブラウザが読み込み前に正しい場所を確保できるよう、縦横の比率を伝えるためのものだからです。

10. srcsetでレスポンシブ対応にする

srcset属性を使うと、同じ画像を画面サイズごとに違うバージョンで用意できます。ブラウザが最適なものを自動で選び、スマホには小さい画像、デスクトップには大きい画像を配信します。モバイルからの流入が多いサイトでは、転送量を40〜60%削減できることもあります。

<img
  src="product-800.webp"
  srcset="product-400.webp 400w,
          product-800.webp 800w,
          product-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="青いスニーカー"
  width="800" height="800"
  loading="lazy"
>

11. Open Graph用のアイキャッチ画像を整える

LINEやX、Instagram、LinkedInなどでURLが共有されたとき、プレビューに出る画像はOpen Graphのメタタグから読み込まれます。このタグを設定していないと、プラットフォームがページ内の画像を適当に選んでしまい、たいていは残念な見た目になります。

主要なページには必ず、1200×630pxの画像を指定したog:imageタグを設定しましょう。

<meta property="og:image" content="https://example.com/images/article-preview.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

読みやすいタイトル、ブランドらしさ、内容に合った写真。この3つがそろったプレビュー画像は、共有された投稿のクリック率を大きく押し上げます。

12. ページ全体の文脈で考える

Googleは画像を単独で評価しているわけではありません。画像の前後の文章、ページのタイトル、意味的な文脈、ほかの視覚要素、画像の下のキャプション、さらにはそのページに向けられたリンクの文言まで、まとめて見ています。同じ赤い靴の写真でも、レディースファッションのページに置かれた場合と料理のページに置かれた場合とでは、意味がまるで変わります。

文脈づくりのポイントは次のとおりです。

🔍 手早く点検するなら：Google Search Consoleで、自分のサイトのどの画像がインデックスされているかを確認できます。「インデックス作成」→「ページ」を開き、画像で絞り込むと、登録状況と問題点が見えてきます。

画像SEOのチェックリスト

よくある質問

代替テキストとキャプションは同じものですか？
別物です。代替テキストはHTMLの属性で、通常は画面に現れません。画像が読み込めないときにだけ表示され、スクリーンリーダーやGoogleに読み取られます。キャプションは画像の下に見える文章です。両者は補い合う関係で、SEOでの働きも異なります。代替テキストは画像そのものを端的に説明し、キャプションは前後の文脈を補って、画像と本文の関係をGoogleに伝えます。
WebPにすると本当に順位が上がりますか？
間接的には上がります。WebPは同じ画質でJPGやPNGより25〜35%軽くなるため、ページの表示が速くなります。表示速度はGoogleが公表しているランキング要因で、とくにCore Web VitalsのLCPに効きます。ページが軽ければ読み込みが速くなり、LCPの数値が改善し、それが評価につながります。WebPそのものが直接の要因ではありませんが、表示速度への効果は確かです。
Google画像検索からの流入は期待できますか？
分野によります。料理、インテリア、ファッション、実物の商品など、見た目からヒントを探す分野では、画像検索が有力な流入源になります。純粋な情報系の記事やBtoBでは影響は小さめです。Google Search Consoleで、画像検索経由の表示回数とクリック数を個別に確認しておくとよいでしょう。
同じ画像を使い回す場合、代替テキストも同じでよいですか？
まったく同じ画像を同じ文脈で使うのであれば、同じ代替テキストでかまいません。ただし文脈が違う場合、たとえばトップページの一覧と商品ページの両方に同じ商品写真を載せるようなときは、ページごとに書き分けたほうが適切です。そのほうがGoogleに伝わる情報も増えます。
自分のサイトの画像がきちんと最適化されているか、どう確認しますか？
Google PageSpeed Insights（pagespeed.web.dev）は任意のURLを解析し、寸法の不一致、圧縮不足、古い形式といった画像の問題を具体的に挙げてくれます。Google Search Consoleでも、どの画像がインデックスされているか、エラーがないかを確認できます。さらに詳しく調べたい場合は、Ahrefs Site AuditやScreaming Frogのようなツールでサイト全体をクロールすると、代替テキストのない画像や重すぎる画像などを一覧できます。