ビッグバナー広告

Lazy LoadはSEOに不利 遅延ロードの画像が認識されない

Lazy LoadはSEOに不利か?

ウェブサイトやブログ内の画像を遅延ロードさせて表示速度を向上させるLazy Load(画像の遅延読み込み)は、SEOには不利かもしれません。

実際にFetch as Googleでレンダリングして検証してみたところ、遅延ロード部分の画像は表示されず、Googlebotも画像を取得できませんでした。

Lazy Loadを使われている方は、一度検証してみることをおススメします。

スポンサーリンク
PC用

画像の遅延読み込み Lazy Load

ウェブサイトやブログの表示速度向上に有効な技術「Lazy Load」をご存知でしょうか?

Lazy Load(遅延読み込み)とは、ページロード時に画像など容量の大きなデータを後から読み込ませることで、表示速度を向上させるという技術です。ページロード時に取得するデータを抑えることで、サーバ間でやりとりするHTTPリクエスト数とデータ容量を減らすことができます。

Lazy Loadで一般的に使われているのは、ページ全体をロードする際にファーストビューの画像だけを取得して、後はスクロールによって表示領域に入ると画像が読み込まれるという方法です。

後ろの画像はスクロールされるまで表示されないので、サイトの表示速度が大幅に向上します。画像サイズや画像数の多いページには特に有効です。

Lazy Load には様々な種類があり、WordPressプラグインや jQuery プラグインといった形でたくさん発表されています。実際にいわしブログでLazy Loadを使用してみたところ、表示速度とパフォーマンススコアが向上しました。GTmetrixで検証した時の画像を貼っておきます。

Lazy Load GTmetrixで表示速度検証

Lazy Load GTmetrixで表示速度検証

上がLazy Load使用前、下がLazy Load使用後です。ページサイズが遅延ロードされる画像分小さくなっています。これによってパフォーマンススコアが向上し、ページのロード時間が短縮されています。

Lazy LoadはSEOに不向き!?

ウェブサイトの表示速度にはとても有効なLazy Loadですが、SEOに向いていないかもしれません。先日、海外SEO情報ブログの鈴木さんがこんなことを書いてました。

Lazy Loadの使い方によっては、Googlebotが表示される画像を認識できないかもしれないとのことです。

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

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

上記は「海外SEO情報ブログ」からの引用です。

これを読む限り、Lazy Loadの遅延ロード部分の画像はGoogleに認識されないかもしれないということになります。これだとGoogleの画像検索結果にも表示されないだろうし、SEOにはマイナスの要素ですよね。

というわけで、実際にFetch as Googleでレンダリングして検証してみました。

Lazy Loadの画像 Fetch as Googleで検証

こちらがFetch as Googleの検証結果です。「取得」タブから「ダウンロードされた HTTP レスポンス」を見ると、画像部分のimgタグがちゃんと認識されていました。HTML上では大丈夫みたいですね。

Lazy Load Fetch as Googleで検証

続いて「レンダリング」タブで画像を見ると・・・空白です。「Googlebot ではこのページを以下のように認識しました。」で下へスクロールすると、画像の部分には何も表示されません。

右側の「貴サイトへの訪問者にはこのページが以下のように表示されます。」はファーストビューの部分です。Lazy Loadの仕様通り、ファーストビューでは遅延読み込みを行わないので、Googlebotも画像を認識しています。こちらも下にスクロールすると、画像は表示されませんでした。

Lazy Load Fetch as Googleで画像を検証

「取得できなかったリソースは次のとおりです」を見ると、遅延読み込み部分の画像がすべて「一時的にアクセスできません」となっています。

Lazy Load Fetch as Googleで取得できなかったリソース

Googleの画像検索でも、遅延読み込み部分の画像は検索結果に表示されませんでしたが、Lazy Loadを停止してから再度Fetch as Googleでページを取得すると、遅延読み込み部分の画像が表示されるようになりました。

Lazy Load 検索順位への影響は?

Fetch as Googleで検証した結果、Lazy Loadの遅延読み込み画像は認識されないという結論になりました。さて、これをどう捉えればいいのか・・・

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

「ウェブ検索での検索順位にマイナスに影響することはないはずだ」とのことですが、Google画像検索には掲載されないってことですよね。これはSEOにとってマイナスの要素だと思うのですが・・・いわしの私見ですけど。

あと、この記事をアップした直後に「Lazy Load SEO」で検索すると8位でしたが、Lazy Loadを外してから再度インデックスさせると、検索順位が上昇して2位になりました。

この結果から考えると、Googlebotがページ内の画像を認識できるかどうかで、SEOの結果が変わってくるということになります。

とはいえ、1つの事例だけでは何とも言えないし、もっと検証しないと断定はできませんけどね。

Lazy Loadのメリットとデメリット

さて、SEOには不向きな感じのLazy Loadですが、ページ表示速度向上効果は認めざるを得ません。GoogleのPageSpeed Insightsで計測してみると、Lazy Load使用前と使用後ではかなりスコアが変わってきます。

Lazy Load SEOスコア

Googlebotが遅延読み込み部分の画像を認識しないというのはSEO上のデメリットですが、ページ表示速度向上はSEOにとってのメリットになります。結局、どちらを取るかですね。

いわしは最終的にSEOのデメリットになると判断して、Lazy Loadを外すことにしました。ページ表示速度は他の方法で向上させることにします。皆さんも一度検証してみてください。

Googlebot にlazy load画像を認識させる

CreativeTipsさんのブログに、「wordpressでLazy Load系pluginをGooglebot に認識させる方法」いう記事がありました。

画像だけでなくiframeまでlazy load化してくれる「BJ Lazy Load」というプラグインを使い、コード内の条件分岐部分を修正してGooglebot に画像を認識させています。

http://11neko.com/lazy-load-seo/

WordPressでLazy Load系pluginをGooglebot に認識させる方法 | CreativeTips

Lazy Loadの欠点であるSEOのデメリットを排除して、ページ表示速度を向上させるという一石二鳥の方法です。クローキング扱いされるリスクはありますが、これでペナルティを喰らったという話も聞かないので、多分大丈夫かと・・・

どうしてもLazy Loadを使いたいという方は、ぜひ参考にしてください。

スポンサーリンク
PC用
PC用

フォローする

コメント

  1. yokudekiru より:

    突然ですがこんにちは。ワードプレスでサイト運営しているよくできる?学生です。

    つい先日、この記事をみて初めて「Lazy load」がSEOに与える影響について知りました。これは私にとってもかなりの衝撃でその日から「Lazy load」を使うのをやめました。

    その後、ふと思いつきました。「グーグルのBOTのアクセス時では「Lazy load」を無効にすればSEOにに悪影響は出ないのではないか?」さっそく私の開発しているH Speed WP(詳しくは→http://学学.jp/h-speed-wp)というプラグインのなかにある「Lazy load」機能で実際にやってみるとそれが大当たりでFetch as Googleでも画像が表示されました!

    この一連の流れができたのはこのページのお陰です。いわしさん素晴らしい記事をありがとうございました。

    • wind-mill_iwashiblog より:

      記事の紹介ありがとうございます。
      なるほど、GoogleBOTアクセス時だけ「Lazy load」を無効にするという手がありましたか。
      これならSEO対策もバッチリですね!

  2. 表示速度をあげるには画像サイズを落とせばいいだけ!

    基本的に、googleのpagespeedテストで表示速度の点数をあげるには、画像の圧縮をしてサイズを落としてください。lazyloadは必要ありません。

    小さな画像はpng圧縮、大きな画像はjpg圧縮、アニメーションはgif圧縮にします。また、小さな画像はpngにしたあとbase64で埋め込むといいでしょう。

    あとは画像キャッシュも.htaccessで指定しておきます。これで画像に関する減点はほとんどなくなります。

    もしもlazyloadを使うのであれば、はじめは画質を落とした容量の小さな画像を読み込ませ、その画像がページ内に2秒ほど表示された時点で元々の容量の大きな画像を読み込ませる方法があります。
    この方法ならば、一応、(程画質のほうは)グーグルにインデックスされるし、早く表示されます。また、ユーザーからしても、「どうでもいい画像を高画質で読み込まれるのは辛い」という気持ちもあります。

    そこら辺のバランスのいい方法が今のところは、これくらいしかないということでしょう。そのうち、こんなことで悩む必要もなくなるでしょうが、、

    • wind-mill_iwashiblog より:

      なるほど、そんな手法もありましたか・・・参考になります。
      ありがとうございます。