非同期画像読み込みとSEO

Question

私は中型の宝石を使って画像を非同期的に読み込み、メディアと同じ効果を得ようとしています。

すべては完全に機能していますが、SEOについては何が起こるかわかりません。画像タグは<img src="BIG_IMAGE.jpg" data-compress="SMALL_IMAGE.jpg">のようになります。ここでスクリプトがやっていることです：

は、新しいイメージの作成（データ圧縮により、SRCを交換し

• ）とBIG_IMAGE BIG_IMAGEがロードされた
• をロードし、BIG_IMAGEはSMALL_IMAGEを交換します

あなたはおそらくそれをdivに設定し、SMALL_IMAGEを背景として、またはキャンバスを使用して読み込むほうがよいでしょうか？ここではスクリプト

：

var AsyncImage = { 
    init: function() { 
    this.els = document.querySelectorAll("[data-compress]") 
    this.engine() 
    }, 
    engine: function() { 
    for (var i = 0; i < this.els.length; i++) { 
     var el = this.els[i] 
     var d = el.src 
     this.small(el) 
     this.load(el, d) 
    } 
    }, 
    load: function (el, d) { 
    var img = new Image() 
    img.src = d 
    img.onload = function() { 
     el.src = img.src 
     el.classList.add('async-large-loaded') 
     el.classList.remove('async-small-loaded') 
    } 
    }, 
    small: function (el) { 
    el.src = el.dataset.compress 
    el.classList.add('async-small-loaded') 
    delete el.dataset.compress 
    } 
} 

AsyncImage.init() 

Answer 1

最後に、私はウェブマスターコミュニティの私の質問への答えを見つけたが、私はあまりにもそれをここに投稿する興味深いものになるだろうと思います。

非同期画像の読み込みは、ランキングに大きな影響を与えません。 src属性のデフォルトイメージ（品質不良）を設定し、非同期でロードを待つことで、HQイメージが正常に表示されるようです。

ブラウザでJSを無効にするユーザーのためにnoscriptタグを設定してから、画像の周りにaというタグを設定して、HQ画像のパスを指すように設定することを忘れないようにする技術的修正があります。ランク付けに大きな影響を与えた場合は、aまたはimgというタグが投げられましたが、これはもっと良い方法でランク付けするために必要です。

<a href="BIG_IMAGE.jpg"> 
    <img src="BIG_IMAGE.jpg" data-compress="SMALL_IMAGE.jpg"> 
</a> 

リンク：https://webmasters.stackexchange.com/questions/61761/lazy-loading-images-and-effects-on-seo

EDIT（2018年2月1日）：私はでSEOをテスト

だからここに、より良いオプションは、次のようなコードを取得することになりますウェブマスターコンソールでドメインを設定します（特定の設定なし）。すべてが問題なく、HQイメージは完全に索引付けされ、LQイメージは完全ではありません。