javascript - 异步图片加载和SEO

Question

我正在开发一个中间人 gem 以异步加载图像，其效果与 Medium 相同。

一切正常，但关于 SEO，我不知道会发生什么。图片标签如下所示:<img src="BIG_IMAGE.jpg" data-compress="SMALL_IMAGE.jpg"> .这是脚本正在执行的操作:

• 用数据压缩替换 SRC
• 创建一个新的 Image() 并加载 BIG_IMAGE
• 加载 BIG_IMAGE 后，BIG_IMAGE 替换 SMALL_IMAGE

您认为这对 SEO 很苛刻吗，也许将其设置在 div 中并加载 SMALL_IMAGE 作为背景或使用 canvas 会更好？

这里是脚本:

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

编辑(02/01/2018):我通过在网站管理员控制台上设置域(没有特定配置)来测试 SEO。一切正常，HQ 图像已完美索引，而 LQ 图像却没有。