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

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

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

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

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

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

私の質問は、同じsrc属性を持つ多くのimgタグがページのSEOに影響するかどうかです。

— ブメネクル
ソース

適切な肩書きとaltが仕事の90％だと思います。ファイル名が少ない。それは私が推測するGoogle画像検索で結果に影響を与えることができます

— マルタイン

参照：webmasters.stackexchange.com/questions/26190/...

— サルマンA

確かに、Google画像検索でインデックスを作成した画像の数に影響を与える可能性があります。それについて、またはそれが通常のウェブ検索のランキングに与える影響について尋ねていますか？

— スティーブンオステルミラー

@StephenOstermiller私の主な関心事はランキングですが、SEOへの影響（即時または二次）は興味があります

— bmenekl

この質問はStackOverflowで尋ねられましたが、私の意見では素晴らしい答えはありません。

— スティーブン・オステルミラー

回答:

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

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

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

— スティーブン・オステルミラー
ソース

「noscript」に頼るつもりはありません。多くのスパムがそれを使用しようとしているので、そこに置かれたコンテンツを常に信頼できるとは限りません。画像へのリンクを使用するアイデアが好きです。一般に、画像がページの主要な要素の1つである場合、自然に埋め込むだけです（異なるサイズを使用している場合は少なくとも1つのバージョン）ため、インデックスが作成されていることを確認できます通常は。私たちはこのためにより良いストーリーに取り組んでいますが、今日も明日も変わることはありません。

— ジョンミューラー

戦術を使用して、画像が既に製品または何かのリンクで囲まれている場合、<a>ラッパーを試すことができます

<a href="/webmasters//img_large/foo.jpg"><a href="www.example.com/page"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif" /></a></a>

。内側のリンクはUIクリックを取得しますが、外側は画像のインデックス作成を行うボットに対して引き続き機能します。

— ドーピン

この回答は2017年にも有効ですか？特に、「Googleは、画像検索のために遅延読み込みされた画像のインデックスを作成できません。」パート？投稿に10枚の画像がありますが、Googleは画像がないと思いますか？

— 私は最も愚かな人です

それでも問題はありませんが、画像にリンクしてインデックスを作成できます。

— スティーブンオステルミラー

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

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

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>タグとリンクテキストでます。それ以外の場合、検索エンジンは単語の距離によってキーワードを画像に関連付けます。あなたは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がサポートしていないため、IE9の条件を追加しました getElementsByClassName8れ、。何が起こるべきか（テストされていない）は、これらのブラウザは画像をそのままロードするだけです。

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

— Reactgular
ソース

私は興味があり、テストページを試しました。Mac上の最新のChromeとSafariは、画像をロードするようです。それほど確かこれは...残念ながら、すべての後、非常に信頼性が高い

— Pevara

残念ながら、この方法では、画像はすべてドキュメントの下部に遅延ロードされます（悪くはありません）が、質問で説明しているように、私のアプローチでは、画像はビューポートに入るときにのみ遅延ロードされます。そのため、ビューポートに入らない画像（つまり、エンドユーザーがページ内で下にスクロールしない）はまったく読み込まれません。画像の多いページでは、これは本当に重要です

— bmenekl

@bmeneklいいえ、この回答は遅延読み込みを実行しません。サードパーティのスクリプトが遅延読み込みを実行できるように、javascript対応のブラウザーで表示される場合にのみHTMLを変更します。

— Reactgular

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

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

— ズールー
ソース