これは、SEOのイメージレイジーローディングへの良いアプローチですか？

AJAXを介して読み込まれた画像、またはインデックスを作成したくない場合は、data- *属性アプローチを使用します。

<img data-src="path/to/image.jpg" class="js-lazy-load" />

Javascriptをマッピングし、データのsrcに属性のsrc属性を：

<img src="path/to/image.jpg" />

ただし、HTML内の画像については、インデックスを作成する必要があります。

<a href="path/to/image.jpg" class="js-lazy-load">Image alt text here</a>

JavaScriptは、アンカーを画像タグに置き換えます。

<img src="path/to/image.jpg" alt="Image alt text here" />

SEOに影響を与えることなく（願わくば）インデックス機能とページの意図を（アクセシビリティのために）保存するようです。しかし、セカンドオピニオンが大好きです。

編集：このアプローチ（画像へのリンクのあるページとインラインIMGタグのあるページ）についてのフィードバックは、ページランクに関して比較します。インラインIMGタグは、各発信リンクが全体的なページランクを損なうので、より良い結果になると思います（rel = "nofollow"が生産的でない場合を除く）。

それは良いアプローチです。別の方法として、<noscript />要素を使用して、imgGoogleによってインデックスが作成される通常バージョンのタグを保存し、JSを使用して遅延読み込みバージョンを作成することもできます。

または、Googleのhashbang AJAX規則とHTML5の履歴APIを組み合わせて、ブックマークおよびインデックス可能なページの状態を作成できます。あなたは無限スクロールページのいくつかの種類をやっている場合、それはほとんど無限スクロールの実装は必死に必要な擬似ページネーション-何かの形（提供としてこれは、特に好適である::咳:: Google画像検索::咳を::）。

それを望まない場合、または非JSユーザーのためにページを優雅に劣化させたい場合は、反対のルートに行き、通常の画像から始めることができますが、ページロード時に画像の属性をブロックする JSを使用してsrc（または画像要素を削除して、src属性を遅延読み込みキューに保存するだけです）。正しく実行すれば、実際に画像のダウンロードを開始する前にこれを完了できます。

このパターンでロードされた画像を見ました：

<img data-src="path/to/image.jpg" class="js-lazy-load" />

GoogleとGoogle Image Searchに取り上げられ、他の人もそれを見つけました。Googleがページでjavascriptを実行するようになったため、実際の画像をsrc属性に配置する必要はないかもしれません。src属性を無視すると、画像の周囲に灰色の境界線が表示される可能性があるため、次のような方法をお勧めします。

<img src="placeholder.gif" data-src="path/to/image.jpg" class="js-lazy-load" alt="Image alt text here" />

Nb。これは必ずしも他の検索エンジンに適用されるわけではありません。