异步图像加载和 SEO答案

【问题标题】：Asynchronous image loading and SEO异步图像加载和 SEO
【发布时间】：2017-12-26 17:30:14
【问题描述】：

我正在开发一个中间人 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 作为背景或使用画布加载会更好吗？

这里是脚本：

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()

【问题讨论】：

我投票结束这个问题作为离题，因为它要求 SEO 建议。这可能是Webmasters 的主题。
是的，但它主要涉及代码。但如果你这么认为，我会在几分钟内关闭它。感谢您的建议！
关于代码本身的问题（或问题）将成为主题，但正如目前所问的，回答这个问题需要 SEO 专业知识（询问它是否对 SEO 友好；并询问什么可能更好对于搜索引擎），这是题外话。 -- 这就是我的想法，但我的投票只算 1/5，所以你也可以让它保持开放状态，看看其他人是否同意。

标签： javascript html seo

【解决方案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 图像没有。

【讨论】：