Google 画像検索 SEO ベストプラクティス

Google 画像検索では、ウェブ上にある画像を検索できます。画像のキャプションや、すぐ目につくバッジなどの新しい機能により、ユーザーは画像の詳細なコンテキストに基づいて、すばやく情報を探索できます。

画像に関するテキストや情報を追加すると、利便性が増すため、より良質なトラフィックをサイトに呼び込むことにつながります。また画像やサイトを Google 画像検索用に最適化することで、ユーザーが目的のコンテンツを見つけやすくなります。たとえば、画像に alt 属性を指定したり、構造化データのマークアップを使用したりする方法があります。Google 画像検索の結果にコンテンツが表示される可能性を高めるには、Google のガイドラインに沿って対応してください。

優れたユーザーエクスペリエンスを提供する

Google 画像検索でコンテンツが表示される可能性を高めるには、ユーザーに高い利便性を提供することが重要です。つまり検索エンジンではなく、ユーザーの利便性を最優先に考慮してページを作成することが必要となります。以下にいくつかのヒントをご紹介します。

適切なコンテキストを提供する: ページのトピックに関連した画像を使用しましょう。ページには、独自の価値を追加する画像のみを表示することをおすすめします。特に、画像やテキストが独自のコンテンツではないページは推奨されません。
配置を最適化する: 可能な限り、関連するテキストの近くに画像を配置しましょう。適宜、最も重要な画像をページ上部に配置することを検討してください。
重要なテキストを画像に埋め込まない: 画像にテキストを埋め込むことは避けてください。特に、ページ見出しやメニュー項目などの重要なテキスト要素は埋め込まないでください。これは、すべてのユーザーがアクセスできるわけではないためです（また、ページ翻訳ツールも画像に対しては動作しません）。ユーザーがコンテンツに最大限アクセスできるよう、テキストは HTML 形式で作成し、画像に代替テキストを設定してください。
有益で質の高いサイトを作成する: Google 画像検索では、ビジュアルコンテンツだけでなく、質の高いコンテンツがウェブページに掲載されていることが重要になります。これにより、コンテキストが提供され、より有益な検索結果を得ることができます。ページのコンテンツは、画像のテキストスニペットを生成するために使用されることがあります。また Google では、画像の掲載順位を決定する際にページのコンテンツの品質を考慮します。
あらゆるデバイスに対応したサイトを作成する: Google 画像検索は、パソコンよりもモバイルデバイスで多く利用されています。このため、あらゆるデバイスタイプやサイズに対応したサイトを設計することが重要です。モバイルフレンドリーテストを使用してモバイルデバイスでのページの動作をテストし、修正の必要な箇所についてのフィードバックを確認します。
画像に適した URL 構造を作成する: Google は URL パスとファイル名を参照して、画像について把握します。画像ファイルを分類して整理し、URL が論理的に構成されるようにします。

ページのタイトルと説明を確認する

Google 画像検索では、それぞれの検索結果とユーザーのクエリとの関連性をわかりやすく示すため、タイトルリンクとスニペットを自動的に生成します。これはユーザーが検索結果をクリックするかどうかを判断するうえで役立ちます。タイトルリンクとスニペットが Google 検索の結果ページでどのように表示されるかについて、次に 2 つの例を示します。

これらの元になる情報は、各ページのタイトルや meta タグ内の説明情報など、いくつかあります。

表示されるページのタイトルリンクとスニペットの品質を高めるため、Google のタイトルとスニペットのガイドラインに沿ってページを構築するようご協力ください。

構造化データを追加する

構造化データを含めると、画像が Google 画像検索上で、わかりやすいバッジなどのリッチリザルトとして表示される可能性があります。これは、ページと関連性の高い情報をユーザーに表示する機能であり、ターゲットとしているトラフィックをサイトに呼び込むために有効です。Google 画像検索は、次のタイプの構造化データに対応しています。

一般的な構造化データのガイドラインや、使用する構造化データタイプに固有のガイドラインに準拠してください。ガイドラインに準拠していない構造化データは、Google 画像検索内でリッチリザルトとして表示されない場合があります。Google 画像検索内でバッジやリッチリザルトとして情報を表示させるには、各構造化データタイプで画像属性を指定しなければなりません。リッチリザルトが Google 画像検索でどのように表示されるかについて、次に 2 つの例を示します。

速度を考慮して最適化する

画像が原因で全体的なページサイズが大きくなり、ページの読み込みが遅く、通信費が高くなる場合がよくあります。最新の画像最適化技術やレスポンシブ画像技術を使用して、高品質で高速なユーザーエクスペリエンスを提供するようにしてください。

PageSpeed Insights でサイトの読み込み速度を分析し、ウェブサイトのパフォーマンスを向上させるためのベストプラクティスと対応方法をウェブの基礎ページにでご確認ください。

高画質の写真を追加する

ぼやけた不明瞭な画像よりも、高画質の写真はユーザーの関心を引きます。また、鮮明な画像は検索結果のサムネイルで目立つため、ユーザートラフィックを得やすくなります。

画像にわかりやすいタイトル、キャプション、ファイル名、テキストを含める

Google は、画像のキャプションやページタイトルなど、画像が掲載されているページのコンテンツから画像に関する情報を抽出します。可能な限り、画像のテーマに関連するページの、関連テキストの近くに画像を配置するようにしてください。

同様に、ファイル名も画像の内容を判断する材料として使用されます。できる限り、簡潔でわかりやすいファイル名を使用してください。たとえば、IMG00023.JPG よりも my-new-black-kitten.jpg が推奨されます。できる限り image1.jpg、pic.gif、1.jpg のような一般的なファイル名の使用は避けてください。サイトに数千点の画像がある場合は、画像の名前指定の自動化を検討してみましょう。

画像をローカライズする場合は、忘れずにファイル名も翻訳してください。その際、ラテン文字以外の文字や特殊文字を使用している場合は、URL エンコードガイドラインに従ってください。

`alt` 属性でわかりやすい代替テキストを使用する

画像タグの代替テキスト（画像について説明するテキスト）は、スクリーンリーダーを使用するユーザーや、低帯域幅のネットワークを使用しているユーザーなど、ウェブページの画像を確認できないユーザー向けの補助機能として役立ちます。

Google では、代替テキストに加えて、コンピュータビジョンアルゴリズムやページのコンテンツを使用して、画像のテーマを理解します。また、画像の代替テキストは、画像をリンクとして使用する場合にアンカーテキストとして使用できます。

代替テキストを設定するときは、適切にキーワードを使用して、ページのコンテンツの内容に沿った、情報に富む、役に立つものになるようにします。alt 属性にキーワードを羅列すること（キーワードの乱用とも呼ばれます）は避けてください。これによって、ユーザーエクスペリエンスが低下し、サイトがスパムとみなされる場合があります。

悪い例（代替テキストがない）:

<img src="puppy.jpg"/>

悪い例（キーワードの乱用）:

<img src="puppy.jpg" alt="puppy dog baby dog pup pups puppies doggies pups litter puppies dog retriever labrador wolfhound setter pointer puppy jack russell terrier puppies dog food cheap dogfood puppy food"/>

良い例:

<img src="puppy.jpg" alt="puppy"/>

最も良い例:

<img src="puppy.jpg" alt="Dalmatian puppy playing fetch"/>

また、W3 ガイドラインに沿って、代替テキストのアクセシビリティについても検討します。<img> 要素の場合、alt 属性を追加できます。インライン <svg> 要素の場合は、<title> 要素を使用できます。次に例を示します。

<svg aria-labelledby="svgtitle1">
  <title id="svgtitle1">Googlebot wearing an apron and chef hat, struggling to make pancakes on the stovetop</title>
</svg>

アクセシビリティを監査し、低速ネットワーク接続エミュレータを使用して、コンテンツをテストすることをおすすめします。

Google に画像を検出されやすくするには

セマンティック HTML 画像要素を使用して、画像を埋め込む

セマンティック HTML マークアップを使用すると、クローラーが画像を検出して処理しやすくなります。Google ではページの HTML <img> 要素（<picture> 要素などの他の要素に囲まれている場合も含む）を解析して画像をインデックスに登録しますが、CSS の画像はインデックスに登録しません。

良い例:

<img src="puppy.jpg" alt="A golden retriever puppy" />

悪い例:

<div style="background-image:url(puppy.jpg)">A golden retriever puppy</div>

画像サイトマップを使用する

画像サイトマップを送信することで、サイトマップの情報を使用しなければ検出されない可能性のある画像の URL を指定できます。

ドメイン間の制限が設けられている通常のサイトマップとは異なり、画像サイトマップには他のドメインの URL を含めることができます。これにより、CDN（コンテンツ配信ネットワーク）を使用して画像を提供できます。CDN を使用している場合は、クロールエラーが検出された際に Google から通知を受け取れるように、Search Console で CDN ドメイン名の所有者を確認しておくことをおすすめします。

サポートされている画像形式を使用する

Google 画像検索では、 BMP、GIF、JPEG、PNG、WebP、SVG の形式の画像をサポートしています。ファイル名の拡張子をファイル形式に一致させるのもおすすめです。

データ URI としてインライン画像にすることもできます。データ URI を利用すると、画像などのファイルをインラインとして埋め込むことができます。次の形式を使用して、img 要素の src 属性を Base64 エンコード形式の文字列で設定します。

<img src="data:image/svg+xml;base64,[data]">

インライン画像によって HTTP リクエスト数は減りますが、ページのサイズが大幅に増加するため、インライン画像の使用は慎重に判断してください。詳細については、web.dev ページに掲載されている、画像のインライン化の長所と短所のセクションをご覧ください。

レスポンシブ画像

ウェブページをレスポンシブデザインにすると、ユーザーがさまざまなデバイスタイプで使用できるため、ユーザーエクスペリエンスが向上します。ウェブサイトで画像を処理するためのおすすめの方法については、レスポンシブ画像に関するガイドをご覧ください。

ウェブページでは、<picture> 要素や、img 要素の srcset 属性を使用してレスポンシブな画像を指定します。しかし、一部のブラウザやクローラーではこれらの属性を理解できません。常に src 属性を使用して代替 URL を指定することをおすすめします。

srcset 属性を使用すると、同じ画像について画面サイズに応じたさまざまなバージョンを指定できます。

例: <img srcset>

<img
  srcset="maine-coon-nap-320w.jpg 320w, maine-coon-nap-480w.jpg 480w, maine-coon-nap-800w.jpg 800w"
  sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
  src="maine-coon-nap-800w.jpg"
  alt="A watercolor illustration of a maine coon napping leisurely in front of a fireplace">

<picture> 要素は、同じ画像の異なる <source> バージョンをグループ化するために使用するコンテナです。この方法は、ピクセル密度や画面サイズなどのデバイスの仕様に応じて、ブラウザが適切な画像を選択できるようにするための代替手段として活用できます。また、新しい画像形式を使用する場合に、その形式をまだサポートしていないクライアント向けにグレースフルデグラデーションを組み込む目的でこの picture 要素を利用することもできます。

HTML 標準のセクション 4.8.1 に従い、picture 要素を使用するときには次のような形式で、src 属性を含む img 要素を代替として提供します。

例: <picture>

<picture>
 <source type="image/svg+xml" srcset="pyramid.svg">
 <source type="image/webp" srcset="pyramid.webp">
 <img src="pyramid.png" alt="An 1800s oil painting of The Great Pyramid">
</picture>

セーフサーチ向けに最適化する

セーフサーチは、露骨な表現を含む画像、動画、ウェブサイトを Google 検索結果で表示するかブロックするかを指定する、Google ユーザーアカウント内の設定です。Google がサイトの性質を把握し、必要に応じてセーフサーチフィルタをサイトに適用できるようご協力ください。セーフサーチ向けのページのラベル付けについては、こちらをご覧ください。

Google 画像検索のインラインリンクを無効にする

必要に応じて Google の画像検索結果ページでインラインリンクを無効にすることで、Google の画像検索結果ページにフルサイズの画像が表示されないようにすることができます。

インラインリンクを無効するには:

画像がリクエストされる際、そのリクエストの HTTP リファラーヘッダーを調べます。
Google ドメインからのリクエストであれば、200 または 204 No Content HTTP ステータスコードを返します。

Google はページのクロールと画像の参照を引き続き行いますが、検索結果にはクロール時に生成されたサムネイル画像を表示します。このオプトアウトはいつでも可能で、ウェブサイトの画像を新たに処理する必要はありません。この行為は画像のクローキングとはみなされず、手動による対策の対象にはなりません。

検索結果に画像がまったく表示されないようにすることもできます。

最後に...

掲載順位を上げるために役立つ多くの情報が掲載されている SEO スターターガイドをご覧ください。また、ご質問がある場合は、Google 検索セントラルヘルプコミュニティに投稿してください。