异步图片加载和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

最后，我在网站管理员社区找到了问题的答案，但我认为 post 在这里也很有趣。

异步图片加载对排名没有真正的影响。在 src 属性上设置默认图像（质量差），等待它异步加载 HQ 图像似乎没问题。

不要忘记技术修复，例如为在浏览器上禁用 JS 的人设置 noscript 标签，然后在图像周围设置 a 标签，指向HQ 图像路径，如果您对图像进行排名并抛出 a 或 img 标签，似乎对排名没有太大影响，但无论如何都需要以更好的方式对其进行排名。

所以在这里，更好的选择是获取如下代码：

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

link: https://webmasters.stackexchange.com/questions/61761/lazy-loading-images-and-effects-on-seo

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

异步图片加载和SEO

Asynchronous image loading and SEO

html

javascript

seo