web-dev-qa-db-ja.com

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

AJAXを介してロードされた画像、またはI do n'tにインデックスを作成する場合は、data- *属性アプローチを使用します。

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

Javascriptは、data-src属性をsrc属性にマッピングします。

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

しかし、私がdo索引付けしたいHTMLの画像の場合：

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

JavaScriptは、anchorをimageタグに置き換えます：

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

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

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

seogooglejavascript
14
Aeron

このパターンで読み込まれた画像を見ました：

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

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

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

Nb。これは他の検索エンジンには必ずしも当てはまりません。

2
Willster