web-dev-qa-db-ja.com

遅延読み込み画像とSEOの効果

次の手法を使用して、サイトの画像を遅延読み込みします。

すべての画像について、src属性にデフォルトimg（つまり、ローダー）のURLを入れ、data-src属性に実際の画像URLを入れます。そのようです

<img src="loader.gif" data-src="img1.jpg" />

画像がビューポートの外側にある場合、何も起こりませんが、画像がビューポートの内側にある場合、data-src属性からのURLがロードされ、画像が正しく表示されます。

その結果、Googleはページ（つまり、検索結果ページ）内のすべての画像が同じsrc属性を持っていると見なします。 Googleボットはもちろん、デフォルトのsrcを持つ 'unloaded' imgタグのみを解析するためです。

私の質問は：同じsrc属性を持つ多くのimgタグを持つことはページのSEOに影響します？

seogoogle-searchjavascriptimagesgoogle-image-search
23
bmenekl

画像の遅延読み込みがWeb検索のランキングに悪影響を与えるのを見たことはありません。ユーザーのサイトの知覚パフォーマンスを改善すると、ランキングの向上に役立ちます。サイトのパフォーマンスの問題が原因で検索結果に戻るユーザーが少なくなると、ランキングが向上します。

Googleは、画像検索のために遅延読み込みされた画像のインデックスを作成できません。代わりに、次のような技術的な修正が可能です。

  • javaScriptが有効になっていないユーザー（および検索エンジンボット）に画像を表示する<noscript>タグを使用する
  • また、画像へのリンク。画像がimg srcにあるかa hrefにあるかに関係なく、画像検索は重要ではないようです。そのため、次のスニペットは、画像検索で遅延読み込みされた画像とフルサイズの画像のインデックスを取得します：<a href="/img_large/foo.jpg"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif"></a>
10
Stephen Ostermiller

ほとんどの検索エンジンは、インラインスタイルを使用して画像を非表示にしない限り、非表示の画像にインデックスを付けます。ほとんどのブラウザは、非表示の画像をnotロードします。

この主張を検証できるテストページがあります。一部の古いモバイルブラウザは例外ですが、携帯電話での遅延読み込みは優れたブラウジングエクスペリエンスに逆効果になる可能性があると主張します。

http://www.w3.org/2009/03/image-display-none/test.php

CSSファイルに次の変更を追加します。

.lazy-img { display: none; }

これで、このような遅延イメージを含むページをロードでき、インデックスが作成されます。

<body>
   <img class="lazy-img" src="img1.jpeg" title="image title"/>
   <img class="lazy-img" src="img2.jpeg" title="image title"/>
   <img class="lazy-img" src="img3.jpeg" title="image title"/>
   <img class="lazy-img" src="img4.jpeg" title="image title"/>
</body>

画像にtitle属性を含めることが重要です。または、<img>タグをリンク<a>タグとリンクテキストで囲みます。それ以外の場合、検索エンジンはWordの距離によってキーワードを画像に関連付けます。あなたはSEOのためにこの問題をすべて解決するつもりです。

上記をそのまま使用する場合。画像が非表示になっているため、何も表示されません。ドキュメントの下部にあるこのクラスを削除します。ここで重要なのは、インラインの純粋なJavascriptを使用することです。このJavascriptは、上記の要素のレイアウトが終了した直後に実行されます。すべての外部JSファイルを下部にロードする場合（必要に応じて）。これらのファイルの上にこのJavascriptブロックを配置する必要があります。そのため、DOMの変更に遅れはありません。

<body>
   <!--[if lte IE 8]
   <style type="text/css">.lazy-img { display: block !important; }</style>
   [endif]-->
   <noscript><style type="text/css">.lazy-img { display: block !important; }</style></noscript>
   <img class="lazy-img" src="img1.jpeg" title="image title"/>
   <img class="lazy-img" src="img2.jpeg" title="image title"/>
   <img class="lazy-img" src="img3.jpeg" title="image title"/>
   <img class="lazy-img" src="img4.jpeg" title="image title"/>
   <![if gte IE 9]>
   <script type="text/javascript">
      var images = document.getElementsByClassName('lazy-img');
      Array.prototype.forEach.call(images, function(image){
         image.setAttribute("data-src",image.getAttribute("src"));
         image.setAttribute("src","loading.gif");
      });
      while(images.length > 0) { images[0].className = ""; }
   </script>
   <![endif]>
</body>

IE9は8以前のgetElementsByClassNameをサポートしていないため、条件式を追加しました。何が起こるべきか（テストされていない）は、これらのブラウザは画像をそのままロードするだけです。

このアプローチの利点は、Webクローラーの観点からHTMLをきれいに保つことです。

1
Reactgular

Googleは、ボットでJavaScriptを実行することを宣言しました。詳細については、 この投稿 を参照してください。

文書化されているように、動的クロールのためにGoogleBotに静的ファイルを禁止することはできません。

1
Zulu