画像SEOのベストプラクティス: alt属性とファイル名最適化～ECサイトの検索流入を拡大し、ページ速度も改善するテクニック～
Contents
はじめに
ECサイトやブログ記事、あるいは企業の公式サイトなど、あらゆるWebサイトにおいて画像はユーザーの興味を引き、内容を直感的に伝える上で欠かせない要素です。しかし、その画像を適切に最適化しているサイトは意外と少ないのも事実。テキストのSEO対策に比べると、画像SEOは後回しにされがちです。
ところが近年、Googleをはじめとする検索エンジンは画像検索結果の表示機能を進化させ、商品写真やブログ用ビジュアルなどの画像からの流入を獲得できるチャンスが大きくなっています。また、SNSでは画像が目立ちやすく拡散されやすいため、画像を適切に最適化しておくとSNSシェア経由の誘導にもメリットがあります。
さらに、ページ表示速度の改善はCore Web Vitalsを重視するGoogleの方針からも、いまや無視できない大きなSEO要因のひとつです。画像ファイルを圧縮したり、適切なフォーマットを選んだりすることは、ページの読み込み体験を向上させる上でも欠かせません。
本コラムでは、以下のポイントを中心に、画像SEOのベストプラクティスを最新のGoogleガイドラインや実例を交えて詳しく解説していきます。
- 画像ファイル名の最適化
- alt属性（代替テキスト）設定のコツ
- 画像圧縮とフォーマット選択
- 画像検索で上位表示を実現するための対策
- ページ表示速度の改善とCore Web Vitals
- ECサイトにおける具体的事例
- 最新ガイドラインと今後の動向
検索からの流入とサイトユーザーの利便性、その両方をバランスよく高めたい方にとって、画像SEOの取り組みは大きな効果をもたらします。ぜひ本記事を参考に、貴社や個人ブログの画像最適化を推進してみてください。
画像ファイル名の最適化
1-1. ファイル名の役割
検索エンジンが画像を認識する際、画像ファイル名は重要なシグナルのひとつです。HTMLタグのalt属性や周囲のテキストほど強力ではありませんが、Googleが画像の内容を推測する際にファイル名を手がかりにしていることは公式にも明らかにされています。自動的に生成されたIMG_001.jpgやimage1.pngといった曖昧な名前では、検索エンジンは画像内容を判別しづらくなるのです。
1-2. 適切なキーワードの組み込み
ECサイトであれば、商品名や型番、色、サイズなどをファイル名に自然に組み込むことで、検索エンジンにとって「どんな商品画像か」が分かりやすくなります。たとえば、赤いランニングシューズであれば、red-running-shoes.jpg といった具体的なファイル名を付けるのが理想的です。「ランニングシューズ」「赤」といったキーワードが含まれていれば、Google画像検索で「赤 ランニングシューズ」を探すユーザーとのマッチング精度を高められます。
ただし、キーワードを過度に詰め込む（キーワードスタッフィング）行為は逆効果です。ファイル名が「red-running-shoes-sneakers-trainers-buy-now.jpg」のように不自然に長くなると、スパム認定されかねません。短く簡潔かつ内容が伝わる程度にキーワードを絞りましょう。
1-3. ファイル名の長さと書式
ファイル名の理想の長さは一概には言えませんが、5単語以内が推奨されるケースが多いです。区切り文字にはハイフンを使うのがベストです。Google公式でもハイフン（-）で分割された単語は判別しやすいと明示されており、「_（アンダースコア）」や「+（プラス）」よりは「-」が望ましいとされています。
良い例: blue-cotton-tshirt.jpg
悪い例: image_000034.JPG
キーワードが無く、検索エンジン側が意味を読み取りにくいファイル名は避けるようにしましょう。
1-4. 大量の画像に対する実務的運用
ECサイトでは商品数が膨大な場合、すべての画像を手作業でリネームするのは大変です。そのため、自動命名スクリプトやCMSの拡張機能を活用することが多いです。例えば商品登録時の管理画面で「商品名」「色」「サイズ」などを入力している場合、その情報を連結してファイル名を自動生成できるようにすると効率的です。
alt属性（代替テキスト）の正しい付け方
2-1. alt属性の意味とGoogleの評価
alt属性とは視覚障がい者向けのスクリーンリーダーが読み上げる画像の説明文であり、画像が表示されない場合に代わりに表示されるテキストでもあります。SEO面でも、Googleはalt属性の情報を参照して画像内容を理解しています。したがって、alt属性はアクセシビリティとSEOを両立させる重要な要素となるのです。
2-2. altテキストの書き方と注意点
alt属性には、画像を端的かつ具体的に説明するフレーズを入れましょう。たとえば「男性が赤いランニングシューズを履いている様子」といった形で、見たままの内容を簡潔に記述します。過度な文章化や不自然な言い回しは逆に分かりづらくなるので避けます。
- 良い例:
alt="ピンク色のスマートフォンを持つ女性が自撮りをしている様子" - 悪い例:
alt="これは画像です"／alt="keyword,keyword,keyword"
また、alt属性のキーワード詰め込みはスパム扱いを受ける恐れがあるため注意が必要です。あくまでもユーザーの理解を最優先にし、それが結果的に検索エンジンにも意味を伝える形になるのが理想です。
2-3. リンク画像のalt属性活用
画像がリンクになっている場合は、そのaltテキストがアンカーテキストと同等の意味を持つとされています。商品詳細ページへの遷移ボタンを画像化しているケースでは、ただ「クリックしてください」ではなく、「○○の詳細はこちら」「○○を購入する」など、リンク先の内容を反映したaltテキストをつけると良いでしょう。これにより検索エンジンにもリンクの文脈が伝わりやすくなります。
2-4. 装飾画像とaltの扱い
背景や仕切り線など純粋に装飾目的で使われる画像には、しばしばalt属性が不要（空欄）となる場合があります。スクリーンリーダーに読み上げられる必要がない装飾画像は、alt="" やCSS背景画像の利用などで対応し、可読性を高めることも重要です。
画像圧縮とフォーマットの選択
3-1. ページ表示速度の重要性
現在のSEOでは、ユーザー体験が非常に重視されます。ページがなかなか表示されないとユーザーはすぐ離脱し、直帰率やコンバージョン率に大きな影響を及ぼします。GoogleもCore Web VitalsとしてLCP（最大コンテンツ描画時間）などの指標をランキング要因に組み込み、特に表示速度が遅いサイトは検索順位で不利になる可能性があります。
ECサイトで特に容量が大きくなりがちなのが商品画像。これを最適化するかどうかで数秒以上の差が生じます。したがって、画像圧縮やフォーマット選択はページ速度改善の第一歩です。
3-2. JPEG, PNG, WebP, AVIFの使い分け
画像最適化のカギは、適切なフォーマットを選ぶこと。一般的な特徴を以下に示します。
- JPEG: 写真やグラデーションの多い画像に向いた不可逆圧縮形式。ファイルサイズを小さく抑えやすく、多くの場面で使用される。
- PNG: 透過やシャープな線が必要な場合に向く可逆圧縮形式。ロゴやアイコンなど、画質劣化を避けたい場合に有効。
- WebP: Googleが開発した次世代形式。JPEGより高圧縮率でファイルを軽量化でき、透過にも対応する。主要ブラウザの対応率も高い。
- AVIF: さらに圧縮効率の高い最新形式。JPEGからの変換で半分程度のサイズにできるケースもあり注目されている。ブラウザ対応状況も急速に拡大中。
特にECサイトの商品画像は、背景が単純ならPNGやWebP、複雑な写真風のものならJPEGやWebPといったように最適なフォーマットを選び分けることで表示速度に差が出ます。近年はWebP対応が進み、さらにAVIFを適宜導入するサイトも増えています。
3-3. 画像圧縮ツールと自動化
圧縮にはTinyPNGやImageOptimなどのオンライン/オフラインツール、PhotoshopやAffinity Photoなどのソフトウェアの「Web用に保存」機能などが利用できます。ローカルでの手作業よりも、CMSやプラグインによる自動圧縮が大規模サイトでは実用的です。WordPressであればShortPixel, Smush, Imagifyなどが代表的で、アップロード時に自動で最適化を行い、WebPの自動生成も可能です。
3-4. レスポンシブ画像 (srcset や <picture> 要素)
同じ画像を、PC向け・タブレット向け・スマホ向けと複数サイズで準備し、ユーザーの画面解像度やネットワーク環境に応じて最適な画像を自動的に配信する仕組みがレスポンシブ画像です。HTMLの<img>タグでsrcsetとsizes属性を用いたり、<picture>タグを使って複数フォーマットを出し分けることで、常に最適な画質とファイルサイズを実現できます。
画像検索で上位表示を実現するためのポイント
4-1. 画像インデックスの促進
まず、Googleや他の検索エンジンに画像をクロールしてもらうことが必要です。以下の点に気を配りましょう。
- 画像への直接リンク: JSやCSSで埋め込むだけではクローラーに発見されづらいため、できるだけHTML内で
<img>タグを用いることが望ましい。 - 画像サイトマップ: 画像のURLを含むXMLサイトマップを用意し、サーチコンソールに登録することで、クローラーに見つけてもらいやすくなる。
- robots.txtやメタタグでブロックしない: 画像フォルダへのアクセスを誤って拒否していないか確認する。
4-2. ランキング要因: alt・ファイル名・周辺テキスト
検索エンジンが画像を評価する際、特に重要な要素はaltテキスト、ファイル名、そして画像周辺の本文テキストです。画像のキャプションやタイトル、見出しタグなどに関連キーワードが自然に含まれていると、画像がそれらのテーマと関連付けられやすくなります。
加えて、ページ自体の権威性や関連性も影響を与えます。ECサイトのカテゴリーページがしっかり商品説明をしていて、かつ外部からの被リンクも得ている場合、そのページ内の画像が高品質なコンテンツとみなされ、上位表示されやすいという仕組みです。
4-3. CTRを上げるサムネイル戦略
Google画像検索で上位に表示されても、ユーザーがクリックしたいと思うサムネイル画像でなければ、流入に繋がりません。特にECサイトの製品写真では見栄えや魅力が極めて重要です。高品質・高解像度かつ商品が際立った写真を用意するだけでなく、以下の点を意識します。
- 背景をシンプルに: 被写体を際立たせることで、小さいサムネイルでも商品の特徴が見やすくなる。
- 商品がわかる構図: 角度やモデルの着用例など、ユーザーが「使っているイメージ」を抱きやすい写真を選ぶ。
- バッジ表示: 構造化データ（例：ProductやRecipe）を活用して、画像検索結果でバッジを付けてもらうと目立ちやすい。
CTRが高まると、検索エンジンはその画像がユーザーのニーズに合っていると判断し、さらに順位が上がる可能性があります。
ページ表示速度の改善とCore Web Vitals
5-1. Core Web Vitalsとは
Googleはウェブのユーザー体験を測定する指標としてCore Web Vitals（CWV）を定義しており、主に以下の3つがサイト評価の要素となっています。
- LCP (Largest Contentful Paint): 最も大きな画像やテキストが描画されるまでの時間。2.5秒以内が理想。
- FID (First Input Delay) → INPに統合予定: ユーザーがページを操作し始めてから、実際に操作可能になるまでの遅延。
- CLS (Cumulative Layout Shift): ページ読み込み時に要素がどの程度ずれるかの累積値。0.1以下が良好。
特に画像はLCPとCLSに大きく影響します。ファーストビューに大きなヒーロー画像などを置いている場合、これが読み込みのボトルネックになることが多いのです。また、画像の縦横寸法をHTMLやCSSで明示していない場合、ロード完了後にレイアウトがずれてCLSが悪化します。
5-2. 画像最適化とページ速度
前述のとおり、圧縮やフォーマット選択はページ速度を大きく左右しますが、ほかにも以下の方法が有効です。
- 遅延読み込み (Lazy Load): ファーストビュー外の画像をスクロールして初めて読み込む機能。WordPress 5.5以降は標準の
loading="lazy"属性で実装可能。 - CDNの活用: 世界各地に配置されたサーバーから最適なルートで画像を配信。特に海外ユーザーが多い場合は高速化効果が大きい。
- キャッシュ制御: ブラウザキャッシュの有効期限を設定し、再訪問時にはキャッシュから読み込ませる。
ページ速度を改善することで離脱率が下がり、結果的に売上増加や問い合わせ数の増加といったビジネスメリットも得られます。また、検索エンジンが重視するUXの向上につながり、ランキング評価にもプラスの影響が期待できます。
ECサイトにおける具体的事例
6-1. 成功事例：Foot Lockerの画像SEO対策
大手シューズ販売ECサイト「Foot Locker」は、カテゴリーページの商品画像がGoogleにインデックスされていなかったため、商品サムネイルが画像検索結果にほとんど表示されない状態でした。そこで以下の改善を実施したところ、大幅な成果を上げたと報告されています。
- 商品画像に明確なファイル名・alt属性を付与
- 一定の解像度（横幅300px以上など）を確保
- 画像サイズマップを作成し、Googleに送信
- LCP改善のために圧縮とLazy Loadを導入
結果として、画像検索経由のオーガニック流入が228%増と大きく伸び、テキスト検索だけでは獲得しきれない新たなユーザー層を取り込むことに成功しました。
6-2. 失敗事例：過剰なキーワード詰め込み
逆に失敗例としては、あるECサイトが商品画像ファイル名とalt属性にキーワードを詰め込みすぎたケースが挙げられます。例えば red-running-shoes-for-men-size-10-great-for-jogging-hiking-etc.jpg のように長文のファイル名をつけ、altでも同様に長々とキーワードを羅列した結果、Googleがスパム行為とみなし、順位が大幅に下落。結果的に画像検索からの流入も伸びず、むしろ減少したという事態になりました。やはり自然なレベルを超えたキーワード装飾はマイナスに働くことを覚えておきましょう。
6-3. 画像圧縮で表示速度改善 → CVRアップ
また、ファッション系ECサイトで高解像度な商品画像を大量に掲載していたため、モバイルでは表示に10秒以上かかり、多くのユーザーが離脱していました。そこで各画像をJPEGで品質80%前後に圧縮し、WebPにも同時変換する仕組みを導入したところ、ページ全体の容量を約50%削減。それによりモバイルでの表示速度が数秒短縮され、直帰率が下がり、コンバージョン率が1.4倍に増加した事例もあります。画像最適化が直接売上に寄与する好例といえます。
6-4. アクセシビリティ対応の法的リスク回避
ECサイトの規模が大きくなると、海外ユーザーを含む幅広い利用者に対応する必要があります。特にアメリカでは、障害者差別禁止法 (ADA) を根拠としてaltテキスト未設定を理由に訴訟が発生するケースが増えているとの報告があります。視覚障がいを持つユーザーへの配慮を怠れば、ビジネス的なリスクが生じる可能性があるのです。実際、大手小売サイトがこの問題で訴えられた事例もあります。
したがって、画像SEOとアクセシビリティ対応はセットで考えるべきです。alt属性や説明文がきちんと用意されていれば、法的リスクを回避しつつユーザーにも検索エンジンにもメリットをもたらします。
最新ガイドラインと今後の動向
7-1. Google公式の推奨点
Google検索セントラルのドキュメントでは、画像SEOにおいて以下の点が特に重視されています。
- 内容を表すファイル名
- altテキストの適切な設定
- 画像の周辺テキストとの一貫性
- モバイルフレンドリーな表示（レスポンシブ画像）
- ページ速度やCore Web Vitalsへの配慮
また、構造化データやライセンス情報を画像に付与する方法も推奨されています。ECサイトの商品画像にProductマークアップを付けると、画像検索結果に「Productバッジ」が表示され、クリック率が向上する可能性があります。
7-2. AIによる画像認識の高度化
最近では、Googleレンズなどを通じて画像からテキストを抽出したり、物体認識を行ったりする技術が急速に進化しています。将来的にはファイル名やaltテキストに頼らなくても、画像そのものをAIが解析して内容を判断する精度が高まっていくでしょう。しかし、現状ではやはりテキスト情報の補足が最も確実であり、誤認識や画像解析の限界を補う意味でも、ファイル名やalt属性は欠かせない存在です。
7-3. マルチモーダル検索とECへの影響
Googleは新しい検索の試みとして、画像とテキストを組み合わせて検索するマルチ検索機能を実装しています。ユーザーがスマートフォンのカメラを使って商品写真を撮影し、「これと同じ商品で色違いが欲しい」などのテキスト指定をすると、AIが画像とテキストを総合して結果を表示する仕組みです。この場合、画像に関連するテキストデータ（altやファイル名、周辺情報）が豊富なECサイトほど、有利に引っかかる可能性が高まります。
7-4. 新フォーマットの普及
WebPやAVIFといった次世代画像フォーマットは、今後ますます標準的な選択肢となるでしょう。すでに主要ブラウザの対応率は90%を超えており、モバイル利用が多いECサイトでは画像サイズの削減効果が顕著に表れます。
一方で、まだ非対応ブラウザも一部存在するため、フォールバックとしてJPEG/PNGを配信する仕組みを整えるか、プラグインやCDNの自動変換機能を活用するのが現実的です。中長期的にはAVIFが最有力という指摘もありますが、エンコードに時間がかかる等の課題は残るため、当面はWebPと併用していく流れになりそうです。
まとめ: 画像SEOでECサイトの集客とUXを強化しよう
画像SEOのベストプラクティスは、テキストSEOやページ速度改善と深く連動しています。まとめると、以下のポイントを押さえて実践すると良いでしょう。
- ファイル名の最適化
- 簡潔で内容が分かる命名
- 過度なキーワード詰め込みはNG
- ハイフンで単語を区切り、5単語以内が目安
- alt属性の正しい付け方
- 画像の内容を端的に表すテキスト
- アクセシビリティを意識しながらキーワードを自然に含む
- 装飾画像には空altを使うなどの工夫
- 画像圧縮とフォーマット選択
- 写真はJPEGやWebP、イラストやロゴはPNGやSVGなど適材適所
- WebPやAVIFへの切り替えを検討し、可能なら導入
- 過度な大容量画像は表示速度低下を招くので避ける
- ページ表示速度の向上
- Core Web Vitalsを意識し、LCP・CLSを悪化させない画像実装
- Lazy Load、CDN、ブラウザキャッシュなどの併用
- レスポンシブ画像や
srcsetを活用し、デバイス別に最適サイズを配信
- 画像検索対策とCTR向上
- サイトマップでクローラーに画像を届ける
- 周辺テキストやキャプションで内容を補強
- 構造化データ（Product, Recipe等）でバッジ表示を狙う
- ECサイト事例で見る成功・失敗の要因
- Foot Lockerなどの成功例に学び、商品画像の露出を高める
- キーワードスタッフィングや極端な大容量画像は逆効果
- alt属性の未設定はアクセシビリティ面でも法的リスク
- 今後の動向
- AIによる画像解析は進化中だが、テキストによる補強は依然有効
- マルチ検索や音声検索の普及により、画像とテキストの連動性がますます重要に
- 新フォーマット（AVIF等）の台頭に備え、柔軟な配信環境を整備する
競合が多いEC業界や専門性の高いブログ領域では、テキスト情報だけでなく画像からの流入をしっかり取り込むことが差別化につながります。さらに、画像の最適化はページ表示速度というユーザー体験面でのアドバンテージも得られるため、一石二鳥の施策といえます。
ぜひ今回のコラムを参考に、貴社サイトやご自身が運営するWebメディアで画像SEO対策を徹底してみてください。アクセス解析で「画像検索からの流入」がどの程度増えたかをモニタリングすれば、具体的な効果を測定できます。ファイル名やalt属性を見直す小さな一歩からでも、継続して取り組めば大きな成果につながるでしょう。
参考文献・参考URL
- Google 検索セントラル
- Semrush
- Foot Locker事例
- Brodie Clark Consulting – How Foot Locker Boosted Organic Visibility Through Image SEO
- PageSpeed Insights
- WebP・AVIFのブラウザ対応状況
- WordPressプラグイン
- ケーススタディ（HubSpotなど）
これらの情報を活用し、最新のガイドラインや各種ツールを適切に用いれば、画像SEOで成果をあげられる可能性は大いにあります。画像からも検索流入を得ることで、ビジネス拡大やメディア認知度アップに繋げていきましょう。今後、AIやマルチ検索などの新技術がさらに進化していく中で、画像を含むビジュアルコミュニケーションの最適化はますます重要度を増していくことが予想されます。早めに基礎を固めておくことで、将来の変化にも柔軟に対応できるサイト運営を目指してください。
