懒加载img src会对SEO产生负面影响吗？

Question

懒加载img src会对SEO产生负面影响吗？

7

我正在处理一个购物网站，我们在结果中展示了40张图片。我们希望减少页面的加载时间，因为图片会阻塞 onload 事件，所以我考虑通过最初设置 img.src=""，然后在 onload 后再设置图片来懒加载它们。请注意，这不是 HTML 片段的 Ajax 加载。图像 HTML 和 alt 文本已经存在，只是图像 src 被推迟加载。

有人知道这是否会损害 SEO 或导致谷歌惩罚现象吗？现在他们正在衡量网站速度。

- Joe Hanink

1

在Webmasters StackExchange上：图片的懒加载和对SEO的影响 - Stephen Ostermiller

8个回答

3

从纯粹的SEO角度来看，您不应该索引搜索结果页面。您应该索引您的主页和产品详细信息页面，并有一种可爬取的方法来访问这些页面（类别页面，sitemap.xml等）。

以下是Matt Cutts在2007年发布的帖子中对此话题的看法：

“总的来说，我们发现用户通常不想在他们的搜索结果中看到搜索结果页面（或通过代理服务器的网站副本）。网站的代理副本和没有增加太多价值的搜索结果已经包含在我们的质量指南中（例如，“不要创建具有大量重复内容的多个页面，子域或域名。”以及“避免仅为搜索引擎创建的“门户”页面，或其他“饼干切割器”方法...”），因此Google会采取行动减少这些页面在我们的索引中的影响。”

http://www.mattcutts.com/blog/search-results-in-search-results/

这并不意味着你索引搜索结果会受到惩罚，只是Google会对它们的价值评估很低，因此懒加载图片（或不加载）不会有太大影响。

- Ciaran

2

这个问题有不同的解决方法。

图片不会阻塞加载。Javascript会；样式表也会在一定程度上（事情比较复杂）；但图片不会。然而，它们会消耗HTTP连接，浏览器每次只会同时发送2个HTTP请求。

因此，你可以做的无需担心和"正确的事情"是在自己的站点和服务器上使用类似www1、www2、www3等方式实现一个简单的CDN。有许多方法可以做到这一点，而且并不难。

另一方面：不，这不会影响你的SEO。事实上，我认为Google甚至不会加载图片。

- issa marie tseng

所以，onload事件已经被很好地定义了。它等待您的内容完全加载完成，包括脚本、iframe内容和图像。脚本是最糟糕的罪犯，因为它们不会并行加载，但所有这些都会阻止onload事件。我认为谷歌通过安装谷歌工具栏来测量实际页面加载时间。他们监视的页面加载时间是document.complete，也就是window.onload。 - Joe Hanink

FYI：现代浏览器有时具有不同的每个服务器最大连接数设置。它通常不再仅限于2个。但是，大多数（目前）默认值不超过8个。 - Jon Adams

2

我们在搜索结果中展示了40张图片。

首先问题是，这个页面是否是一个落地页？它是否针对特定的关键词进行优化？内部搜索结果页面并不自动成为落地页。如果它们不是落地页，那么你可以随意处理它们（并确保它们不被谷歌索引）。

如果它们是落地页（即针对特定关键词进行优化的页面），网站的性能确实很重要，因为这些页面的转化率以及间接地（在较小程度上也直接地）影响谷歌。因此，对于包含大量图片的页面，采用一种懒加载逻辑是一个好主意。

我建议采用以下方法：

以 SEO 优化的方式加载前两张（产品？）图片（作为普通 HTML，带有针对性的 alt 文本和文件名）。对于其余的图片，采用懒加载逻辑。但不仅仅是将 src 设置为空，而是在 onload（或 onscroll 或其他事件）时将整个 img 标签插入到代码中。

在 HTML 中有很多损坏的 img 标签（即：谷歌、旧移动设备、文本查看器等非 JavaScript 用户），这不是一个好主意（只要懒加载的图片不会误导用户，你就不会受到惩罚），但糟糕的标记永远不是一个好主意。

对于一般的SEO问题，请访问 https://webmasters.stackexchange.com/ （Stack Overflow 更适用于与编程有关的问题）

- Franz Enzenhofer

0

首先，不要使用src = ""，它可能会影响您的页面，而是使用一个小的加载图像代替。其次，我认为这不会影响SEO，实际上我们总是使用alt =“imgDesc..”来描述这个图像，蜘蛛可能会捕捉到这个alt但不会分析这个图像的真正内容。

- SantinoDu

0

我已经在我的网站上添加了懒加载(http://www.amphorashoes.ro)，并且从谷歌获得了更好的页面排名(可能是因为内容加载更快) :)

- Mihai

由Google工具栏测量的PageRank，还是在搜索结果中获得更好的排名？ - Stephen Ostermiller

0

我必须不同意Alex的观点。Google最近更新了其算法以考虑页面加载时间。根据官方Google博客

...今天我们在搜索排名算法中包含了一个新的信号：网站速度。网站速度反映了网站对Web请求的响应速度。

然而，重要的是要记住，SEO最重要的方面是原创、高质量的内容。

http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html

- user677811

是的，正因为这一点，我正在寻求优化页面加载时间（window.onload）。我想知道谷歌是否会将这种方法视为“作弊”或“无效”，因为他们期望图像内容对他们测量的页面加载时间有所贡献。我希望通过懒加载的方式来优先处理内容，无论是脚本、图像还是HTML片段，都被认为是有效的，但也存在一个问题，即最初为空的img.src值是否会影响谷歌对页面的索引。也许谷歌会忽略我的图像中的alt文本。 - Joe Hanink

-2

我发现了这条推文，关于Google的SEO

有多种方法可以懒加载图像，值得思考的是如何为图像搜索索引设计标记（有些工作正常，有些不行）。我们正在研究制定一些更清晰的建议。

2018年2月28日凌晨12:24

John Mueller - 高级网络大师趋势分析师

从我的理解来看，它似乎取决于您如何实现您的懒加载。而且Google尚未推荐一种对SEO友好的方法。

理论上，Google应该在网站上运行脚本，因此懒加载应该没问题。但是，我找不到（来自Google的）证实这一点的来源。

看起来爬取懒加载或延迟加载的图像可能还不完美。这是一篇我写的关于懒加载图像延迟和SEO的文章，详细讨论了这个问题。

这是一个我编写的工作库，专注于以SEO友好的方式懒加载或延迟加载图像。

它的基本功能是在DOM准备就绪时取消图像加载，并在窗口加载事件后继续加载图像。

...
  <div>My last DOM element</div>
  <script>
    (function() {
      // remove the all sources!
    })();

    window.addEventListener("load", function() {
       // return all the sources!
    }, false);
  </script>
</body>

您可以通过移除图片的 src 值或将其替换为占位符图片来取消加载图片。您可以使用 Google Fetch 测试此方法。在 DOM 准备就绪之前，您必须确保拥有正确的 src，以确保 Google Fetch 能够捕获您的 img 的原始 src。

- Philip Badilla

你应该在 Stack Overflow 上发布答案，而不是在你写的文章中放置答案。引用你的文章是可以的；事实上，当你引用你的来源时是很好的。 - jww

@jww 我已经更新了答案，包括核心概念。 - Philip Badilla

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ricardo Tomasi · Accepted Answer

图片不会阻塞任何内容，它们已经被懒加载了。 onload事件会通知您所有的内容已被下载，包括图片，但那是在文档准备好之后很久才发生。

由于丢失关键字和空src属性，这可能会影响您的排名。你可能失去更多比你获得的要多——最好通过其他方式优化页面，包括图片。 Gzip +少请求数+适当的过期时间+快速静态服务器应该会帮助很多。还有一个免费CDN也许会引起您的兴趣。

我相信谷歌并不希望整个网络从源代码中删除它们的图片以获取一些分数。而且请记住，他们认为3秒以下是良好的加载时间，在使用巫术技巧之前还有很大的余地。