Lazy LoadはSEOに不向き? Lazy Loadで表示する画像をGooglebotは認識できないことがある

[レベル: 上級]

Lazy Loadを利用して表示する画像に対するGoogleの処理についてJohn Mueller(ジョン・ミューラー)氏が、英語版のオフィスアワーで説明しました。
実装方法によっては、Lazy Loadで表示される画像をGooglebotは認識、インデックスできません。

Lazy Loadとは

はじめに、Lazy Loadを簡単に説明します。

「Lazy Load(レイジー・ロード)」とは、日本語では「遅延読み込み」と呼ばれることもあります。
画像表示に対して使われることが多い技術です。

ページを表示した段階では画像を読み込ませません。
よく利用されるタイプのLazy Loadは、ユーザーがブラウザをスクロールしてその画像を配置している場所に到達した時点で画像の読み込みを実行し、画像を表示します。

ページにアクセスした時にすべての画像を一度に読み込まないので、ページの表示速度が速くなるのが大きなメリットです。

このLazy Loadをサイトに実装しているサイト管理者がミューラー氏に次のように質問しました。

画像中心のサイトを運営しています。
Googlebotがインデックスできるような、画像のLazy Loadを使っているのですが、Fetch as Googleでレンダリングすると画像が空白になっています。

品質という観点から見た場合、この状況はランキングに悪影響を与えますか?

Googlebotはスクロールしない、ページ全体をまとめてレンダリングする

Googlebotが画像を取得できていない可能性をミューラー氏はまず指摘します。

どうやって画像を配信しているかが具体的には私にはわからないが、Fetch as Googleのレンダリング取得で表示されないとしたら、何をやっているかを入念に調べたほうがいいかもしれない。

たとえば、ユーザーがスクロールを始めたときだけ画像を読み込むLazy Loadを使っているサイトを私は見たことがある。

当然のことながら、Googlebotがページをレンダリングするときは、何が発生するかを見るためにページをスクロールするのではない。基本的に1つの大きなページビューとしてレンダリングし、そこにあるコンテンツをすべて取得しようとする。

したがって、画像を表示するのにユーザーとブラウザの何らかのインタラクション(操作、反応)にあなたのサイトのLazy Load画像が頼っているとしたら、画像が読み込まれないからGooglebotがその画像を実際には見ることができていない可能性がある。

こういったことがあなたのサイトのでも起きていないか、コードを調べたほうがいいかもしれない。

つまり、次のようなことにミューラー氏は言及しています。

Lazy Load環境では、人間のユーザーが使うブラウザがスクロールしその画像の表示エリアに入った時点で画像が読み込まれます。
部分的、部分的にレンダリングしていきます。

対して、Googlebotはページ全体を“ひと塊”として一度にレンダリングします。
そのため、ページを表示した最初の時点で存在しないコンテンツをGooglebotは認識できないことがあります。
もっと幅広く言えば、ユーザー(ブラウザ)からの何かのアクションが引き金となって生成されるコンテンツをGooglebotが必ずしも見られるとは限らないのです。

Lazy Load画像をインデックスさせるには

Lazy Loadで読み込ませる画像をGooglebotに適切にインデックスさせる対処策をミューラー氏は続けてアドバイスします。

1つの方法はもちろん、Googlebotに対しても機能する別のLazy Loadに変更することだ。

もう1つの方法は、メインの画像を単純にHTMLにそのまま埋め込むか、あるいは第一段階の画像をHTMLに埋め込むことだ。こうすれば、Googlebotは確実に画像を取得できる。それにユーザーもファーストビューで画像をすぐに見ることができる。

こんなふうにやれば、メインの画像を少なくともGoogleは取得できる。

ともかく、Lazy Loadの画像をGooglebotが認識できないことがあなたのサイトのウェブ検索での検索順位にマイナスに影響することはないはずだ。あるとすれば、画像検索にその画像を掲載できるかどうかに影響するだけだろう。

ミューラー氏が提案する代替策は次の2つです。

  • Googlebotが処理できるLazy Loadを実装する
  • 素直に画像を直接埋め込む

理想は言うまでもなく1つ目でしょう。
高速化という優れたユーザー体験を提供しつつ、インデックス性も確保できます。

技術的に難しいのであれば、Lazy Loadをあきらめる2つ目の選択肢になります。
ユーザー体験よりもSEOを重視します。

あるいは、ページを表示した時点で最初から表示しておく簡易的な画像を準備しておいて、本当に見せたい画像をLazy Loadで表示するという中間を取る方法も考えられます。
ただしこの方法では、Googleにインデックスされるのは簡易的に準備した画像になるでしょう。

Googleが処理できないLazy Loadによってウェブ検索のランキングに直接的な悪影響はないだろうとミューラー氏は言っています。
それでもクエリによっては間接的に、そのページとクエリとの関連性が本来よりも低く評価されてしまうかもしれません。
そして画像検索には直接的に影響を与えるかもしれません。

Lazy Loadを使うのであればGooglebotにもきちんと扱える実装をしたいものです。
一般的にはLazy LoadはJavaScriptを用いることが多いはずです。
現在のGooglebotはかなりの多くの状況でJavaScriptをブラウザと同等に実行できます。
そうはいえど、完全ではありません

GooglebotがLazy Loadを適切に処理して、Lazy Loadコンテンツもレンダリングできているかどうかを必ずFetch as Googleのレンダリングで確認しておきましょう。
Lazy Loadに利用するJavaScriptファイルへのクロールを許可しておくことも忘れてはいけません。