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

Google は、テキスト検索結果画像、Google Discover、Google 画像検索など、ユーザーがウェブ上にある画像を検索できる検索機能やサービスをいくつか提供しています。機能やサービスの外観はそれぞれ異なりますが、検索結果に画像を表示するための一般的な推奨事項は同じです。

Google 検索の検索結果、画像タブ、Discover に画像が表示されている図

次のベスト プラクティスを実施することで、画像が Google の検索結果に表示されるよう最適化できます。

  1. Google が画像を検出してインデックスに登録できるようにする
  2. 画像のランディング ページを最適化する

Google が画像を検出してインデックスに登録できるようにする

コンテンツを Google の検索結果に表示するための技術要件は、画像にも適用されます。画像は HTML とは大きく異なる形式であるため、画像のインデックス登録には追加の要件が存在します。たとえば、サイト上の画像を見つけるプロセスが異なることに加えて、画像の表示方法は、画像がインデックスに登録されるかどうか、また適切なキーワードで登録されるかどうかに影響します。

HTML 画像要素を使用して、画像を埋め込む

標準の HTML 画像要素を使用すると、クローラーが画像を検出して処理しやすくなります。Google は、<img> 要素の src 属性の画像を検出できます（<picture> 要素などの他の要素に囲まれている場合も含む）。ただし、CSS の画像はインデックスに登録しません。

良い例:

<img src="puppy.jpg" alt="ゴールデン レトリーバーの子犬" />

悪い例:

<div style="background-image:url(puppy.jpg)">ゴールデン レトリーバーの子犬</div>

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

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

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

レスポンシブ画像

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

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

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>
  <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 検索は、img の src 属性で参照される、次のファイル形式の画像をサポートしています: BMP、GIF、JPEG、PNG、WebP、SVG、AVIF 。ファイル名の拡張子をファイル形式に一致させるのもおすすめです。

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

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

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

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

ぼやけた不明瞭な画像よりも、高画質の写真はユーザーの関心を引きます。また、鮮明な画像は検索結果のサムネイルで目立つため、ユーザー トラフィックを得やすくなります。一方、画像が原因で全体的なページサイズが大きくなり、ページの読み込みが遅く、通信費が高くなる場合がよくあります。最新の画像最適化技術やレスポンシブ画像技術を使用して、良質で高速なユーザー エクスペリエンスを提供するようにしてください。

PageSpeed Insights でサイトの読み込み速度を分析し、スピードが重要な理由とは？にアクセスして、ウェブサイトのパフォーマンスを向上させるためのベスト プラクティスと手法をご確認ください。

画像のランディング ページを最適化する

画像が埋め込まれているページのコンテンツとメタデータは、Google の検索結果のどこに、またどのように画像が表示されるかに後々大きな影響を及ぼす可能性があります。

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

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

画像検索結果にタイトルと説明が表示されている図

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

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

構造化データを追加する

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

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

Google 画像検索でリッチリザルトがどのように表示されるかを示す図

わかりやすいファイル名、タイトル、代替テキストを使用する

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

同様に、ファイル名も画像の内容を判断する材料として使用される場合があります。できる限り、簡潔でわかりやすいファイル名を使用してください。たとえば、IMG00023.JPG よりも my-new-black-kitten.jpg が推奨されます。できる限り image1.jpg、pic.gif、1.jpg のような一般的なファイル名の使用は避けてください。サイトに数千点の画像がある場合は、画像の名前指定の自動化を検討してみましょう。画像をローカライズする場合は、忘れずにファイル名も翻訳してください。その際、ラテン文字以外の文字や特殊文字を使用している場合は、URL エンコード ガイドラインに従ってください。

画像に関してより多くのメタデータを提供するうえで最も重要な属性は、代替テキスト（画像について説明するテキスト）です。代替テキストは、スクリーン リーダーを使用するユーザーや、低帯域幅のネットワークを使用しているユーザーなど、ウェブページの画像を見ることができないユーザー向けの補助機能としても役立ちます。

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

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

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

<img src="puppy.jpg"/>

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

<img src="puppy.jpg" alt="子犬 犬 赤ちゃん犬 小犬 仔犬 パピー わんちゃん 子犬 兄弟 レトリーバー ラブラドール ウルフハウンド セッター ポインター 子犬 ジャック ラッセル テリア パピー ドッグ フード ドッグフード 安い 子犬用 フード"/>

良い例:

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

最も良い例:

<img src="puppy.jpg" alt="「取ってこい」遊びをするダルメシアンの子犬"/>

また、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 画像検索のインライン リンクを無効にする

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

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

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

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

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