Google 画像検索に最適化する方法

Google 画像検索に最適化する方法を紹介します。

2019年4月8日、Google主催のイベント「Webmaster Conference Okinawa」に参加しました。Google の Gary Illyes氏による画像検索についてのお話がありましたので、みなさまに情報を共有したいと思います。

また、イベントで出なかった話についても、画像検索の最適化に関するものを紹介します。Googleの公式ページでは、Google 画像検索に最適化する方法について、ヘルプページやリファレンスなど、様々なページで紹介しています。可能な限り記事を参照しながら、情報を共有します。

なぜ画像検索に最適化するのか？
画像がインデックスされるまでのプロセスや画像クローラの動き
Google 画像検索に最適化する
画像にコンテキストを入れないと、Googlebotは画像を理解できないのか？
さいごに

なぜ画像検索に最適化するのか？

画像検索に最適化する理由はいくつもあります。

画像検索を利用するユーザーが増えている
画像検索からのトラフィックは質が高い
通常のウェブページとは異なり、画像はインデックスに時間がかかる

画像検索に最適化することで、画像検索のパフォーマンスが上がり、画像が露出する機会が増えます。画像のコンテキストなどを追加することによって、ユーザーの満足度も高まります。

具体的な方法を紹介しますので、ご自身のサイトの画像を Google 画像検索に最適化してください。

画像がインデックスされるまでのプロセスや画像クローラの動き

最初に、画像がインデックスされるまでのプロセスや画像クローラの動きについて説明します。

Googleのクローラーはいくつか種類があり、通常のページには「Googlebot」、画像用には「Googlebot-Image」があります。

画像がインデックスされるまでのプロセス

通常の記事ページと同様に、discovery → crawling → indexing → ranking のプロセスは同じです。

ですが、通常の記事と比べると、画像はクロールされにくく、インデックスにも時間がかかります。

画像クローラの動き

画像クローラの動きや特徴についてです。

imgパスをdiscovery → 画像クローラのキューへ → crawling → インデックス
画像クローラのキューは、通常の記事ページのクローラのキューとは異なる
imgパスをdiscoveryする場合、通常のGooglebotを呼んでレンダリングする必要があるので、インデックスに時間がかかる。画像サイトマップの方がインデックスまでの時間は早い
画像クローラのキューに行くステップは、「imgパスをdiscovery」と「画像サイトマップ」では異なる

ランキングの部分に関しては、通常のHTMLとは若干異なる模様です。

“Indexingの仕組み food > fruit > apple > pie(apple pie) > と分類される.” ウェブサイトとはindexといかクエリに対してranking付けするときのロジックがちょっと違うよな。
#WebmasterConferenceOkinawa

— 木村賢(Satoshi Kimura) (@kimuyan) 2019年4月9日

Google 画像検索に最適化する

お待たせしました。Googleの画像検索に最適化する方法を紹介します。

Google 画像検索に最適化するには、検索エンジンに向くだけでなく、画像検索するユーザーの利便性の向上に繋がるかといった視点を持つことが重要です。

Googlebotがアクセスできるようにする
画像の周辺にテキスト
画像のキャプション
alt属性
ファイル名
高画質の画像
画像サイトマップ
構造化データを追加
端末に合わせて画像を最適化
Google Discoverに画像を最適化
ニュース・ブログ・スポーツの記事ページ

Googlebotがアクセスできるようにする

Googlebotがアクセスできるようにします。画像を robots.txt でブロックしていると、Googlebotはアクセスできず、画像検索で表示されませんのでご注意ください。

以下の方法で、画像にGooglebotがアクセスできるかどうか確認できます。

モバイルフレンドリーテスト
URL 検査ツール

画像の周辺にテキスト

画像の周辺にテキストを入れると、検索エンジンは画像の中身を理解する手助けになります。

画像のキャプション

画像のキャプションも、検索エンジンが画像の内容を理解する際の手助けになります。

Google本社にある Google Merchandise Store

alt属性

alt属性とは、HTMLの中のimg要素に記載する画像の代替テキストです。画像が表示されない読み上げブラウザでは、alt属性に書かれた情報が読み上げられます。

検索エンジンは、alt属性を画像のテーマを判断する材料として使います。

以下の例をご覧いただき、alt属性を設定してください。良い例を参考にするといいでしょう。

悪い例 : <img src=”puppy.jpg” alt=”” />・・・代替テキストがない
良い例 : <img src=”puppy.jpg” alt=”Dalmatian puppy playing fetch” /> ・・・画像を意味する代替テキストがある

また、画像をリンクとして使う場合、画像の alt属性が、テキストリンクのアンカーテキストと同じように扱われます。

ファイル名

ファイル名も、検索エンジンが画像のテーマを決める際の要素となります。
iPhoneの画像ならば、「IMG00001.jpg」よりも「iPhone-xs.jpg」の方が優れています。

高画質の画像を提供

ぼやけた画像ではなく、鮮明な高画質の画像を提供します。
これは当たり前ですよね。

画像サイトマップ

画像クローラが画像を発見してからインデックスするまでのプロセスは前述したとおりです。

通常のウェブページとは異なり、Googlebotが画像を発見するには時間がかかります。また画像は必ず発見されるわけではありません。画像サイトマップを送信することで、検索エンジンが画像を発見しやすくなります。

Google 画像検索に最適化して、画像検索でのパフォーマンスを上げたいのであれば、画像サイトマップを送信することをオススメします。

画像サイトマップの一例です。

/?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>http://example.com/sample.html</loc>
    <image:image>
      <image:loc>http://example.com/image.jpg</image:loc>
    </image:image>
    <image:image>
      <image:loc>http://example.com/photo.jpg</image:loc>
    </image:image>
  </url> 
</urlset>

画像サイトマップの詳細は、以下のヘルプページを参考にしてください。

参考画像サイトマップ

構造化データを追加

画像の構造化データを追加すると、画像検索内においてリッチリザルトとして表示されます。

Google画像検索が対応している構造化データは、次の3つのタイプの画像です。

画像に構造化データを追加する場合は、構造化データに関する一般的なガイドラインを守って実装してください。

端末に合わせて画像を最適化

Googleのガイドラインでは、画像のサイズ・解像度で評価が変わることはありません。
ですが、端末に合わせて画像を最適化することをオススメします。
モバイル端末で幅が2000pxの画像があれば、読み込みに時間がかかり、ユーザーの利便性は大きく損なわれることは一目瞭然ですよね。

端末に合わせて画像を最適化するには、レスポンシブ画像・ベクター画像・ラスター画像などの技術を使ってください。

例えば、レスポンシブ画像では、以下のように<img />要素内に srcset属性を記述することで、端末の画面サイズに合わせて画像を指定できます。

<img srcset="example-320w.jpg 320w,
             example-480w.jpg 480w,
             example-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="example-800w.jpg" alt="responsive web!">

ベクター画像・ラスター画像についてはweb.devのリファレンスを参考にしてください。

参考画像の最適化

Google Discoverに画像を最適化

サイトによっては、Google Discoverからの流入も多いはずです。
Google Discoverに画像を最適化することもオススメします。

幅1200px以上の画像を使用する

ニュース・ブログ・スポーツの記事ページ

ニュース・ブログ・スポーツの記事ページならば、構造化データを含めることで、リッチリザルトなどに表示される可能性がでてきます。
構造化データの例を紹介します。

{
"@context": "http://schema.org",
"@type": "NewsArticle",
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
]
}

AMPページと非AMPページで画像サイズの要件が異なります。

AMPページ

幅1200px以上の画像を使用する
AMPページならば、アスペクト比が 16×9、4×3、1×1 の高解像度画像 (800,000px以上の画像) を使用する
構造化データを含める

参考 AMPページのガイドライン

非AMPページ

幅696px以上の画像を使用する
非AMPページならば、アスペクト比が 16×9、4×3、1×1 の高解像度画像 (300,000px以上の画像) を使用する
構造化データを含める

AMPページで「推奨サイズより大きい画像を指定してください」と警告が出たときの対処方法

Googleは、2019年1月15日にAMPページの画像についての警告をSearch Consoleのステータスレポートに送信しました。このサイト (iSchool) もAMP対応しておりますが、以下の警告がSearch Consoleの...

画像にコンテキストを入れないと、Googlebotは画像を理解できないのか？

公式の発表があるわけではないので、正確なところはよく分かりません。

でも、個人的にはGooglebotは画像をある程度理解しているのではと思っています。
Googleフォトではテキストで画像検索できるし、Googleドライブで画像からOCRを抽出できたりしますからね。

実際、Gary Illyes氏のセッションの中でも、画像にコンテキストがなくても、なるべく画像を理解できるように頑張っているという発言がありました。

“十分なテキストがないページの画像は画像検索で不利になるか？”“ならないように努力しているが、なるべく入れるようにすべき”
画像認識系で画像そのものも評価をしようとしていることは伺い知れる。
#WebmasterConferenceOkinawa

— 木村賢(Satoshi Kimura) (@kimuyan) 2019年4月9日