延迟加载图像和对SEO的影响

23

我们正在使用以下技术在我们的网站上延迟加载图像：

对于所有图像，我们在src属性中放置默认img的url（即加载程序），然后在data-src属性中放置实际的图像url 。像这样

<img src="loader.gif" data-src="img1.jpg" />

当图像位于视口外部时，什么也不会发生，但是当图像进入视口内部时，将data-src加载来自属性的url，并且可以正确显示图像。

结果，谷歌认为页面（即搜索结果页面）中的所有图像都具有相同的src属性。因为Google bot当然会只解析带有默认值的'unloaded'img标签src。

我的问题是：具有相同src属性的许多img标签是否会影响页面的SEO？

— 贝梅内克尔
source

2

我认为适当的头衔和替代者是工作的90％。文件名少。我猜它可能会影响Google图片中的结果

— 马丁（Martijn），2014年

另见：webmasters.stackexchange.com/questions/26190/...

— 萨尔曼一个

当然，这可能会影响您在Google图片搜索中建立索引的图片数量。您是在问这个问题，还是对普通网络搜索的排名有何影响？

— 斯蒂芬Ostermiller

@StephenOstermiller我主要关注的是排名，但对SEO有什么影响（直接或次级）感兴趣

— bmenekl

在StackOverflow上已经问过这个问题，但我认为它并没有很好的答案。

— 斯蒂芬Ostermiller

10

我从未见过图像延迟加载对网络搜索排名没有任何负面影响。改善您的网站对用户的感知性能确实可以改善您的排名。当由于您网站的性能问题而导致较少的人跳回搜索结果时，您的排名将会提高。

Google将无法索引延迟加载的图像以进行图像搜索。而是有一些可能的技术修复，例如：

使用<noscript>为未启用JavaScript的用户（和搜索引擎机器人）显示图片的标签
也链接到您的图像。图像搜索似乎无关紧要，无论图像位于img src还是a href中。因此，以下代码段将延迟加载图像，并在图像搜索中索引完整尺寸的图像： <a href="/webmasters//img_large/foo.jpg"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif"></a>

— 斯蒂芬·奥斯特米勒
source

3

我不会依赖“ noscript”-我们看到很多垃圾邮件试图使用它，因此我们并不总是有足够的信心来信任放置在其中的内容。我喜欢使用链接到图像的想法。通常，如果图像是页面上的主要元素之一，那么我仍然倾向于将其自然地嵌入（如果使用的是不同尺寸，则至少是一个版本），以确保索引已被索引一般。我们正在为此做一个更好的故事，但我认为今天或明天都不会改变。

— 约翰·穆勒

1

如果您的图像已经被产品或其他内容的链接所包围，则可以使用策略尝试使用<a>包装器：

<a href="/webmasters//img_large/foo.jpg"><a href="www.example.com/page"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif" /></a></a>

内部链接需要单击UI，而外部链接仍应适用于机器人为图像编制索引。

— dhaupin 2014年

1

这个答案也适用于2017年吗？特别是“ Google无法将懒惰加载的图像编入索引以进行图像搜索。”部分？因此，即使帖子中有10张图片，Google也会认为我们没有图片？

— 我是最愚蠢的人

情况仍然如此，但是您仍然可以链接到图像以对其进行索引。

— 斯蒂芬·奥斯特米勒

1

只要您不使用内联样式来隐藏图像，大多数搜索引擎都会为隐藏的图像编制索引。大多数浏览器不会加载隐藏的图像。

有一个测试页可以验证此声明。某些较旧的移动浏览器是个例外，但我认为在手机上延迟加载可能会不利于良好的浏览体验。

http://www.w3.org/2009/03/image-display-none/test.php

在您的CSS文件中添加以下修改。

.lazy-img { display: none; }

现在，您可以使用这样的惰性图像加载页面，它们将被索引。

<body>
   <img class="lazy-img" src="img1.jpeg" title="image title"/>
   <img class="lazy-img" src="img2.jpeg" title="image title"/>
   <img class="lazy-img" src="img3.jpeg" title="image title"/>
   <img class="lazy-img" src="img4.jpeg" title="image title"/>
</body>

包括title图像的属性很重要。或者，您可以<img用链接<a>标签和链接文本来包围>标签。否则，搜索引擎将通过单词距离将关键字与图像相关联。您将为SEO遇到所有这些麻烦，不妨一路走下去。

如果按原样使用上述内容。由于图像被隐藏，因此什么也不会显示。您要在文档底部删除此类。这里的关键是使用内联纯Javascript。上述元素的布局完成后，立即执行该Javascript。如果您将所有外部JS文件加载到底部（您应该这样做）。您应该将此Javascript块放在这些文件上方。因此，在修改DOM方面没有任何滞后。

<body>
   <!--[if lte IE 8]
   <style type="text/css">.lazy-img { display: block !important; }</style>
   [endif]-->
   <noscript><style type="text/css">.lazy-img { display: block !important; }</style></noscript>
   <img class="lazy-img" src="img1.jpeg" title="image title"/>
   <img class="lazy-img" src="img2.jpeg" title="image title"/>
   <img class="lazy-img" src="img3.jpeg" title="image title"/>
   <img class="lazy-img" src="img4.jpeg" title="image title"/>
   <![if gte IE 9]>
   <script type="text/javascript">
      var images = document.getElementsByClassName('lazy-img');
      Array.prototype.forEach.call(images, function(image){
         image.setAttribute("data-src",image.getAttribute("src"));
         image.setAttribute("src","loading.gif");
      });
      while(images.length > 0) { images[0].className = ""; }
   </script>
   <![endif]>
</body>

现在，我为IE9添加了条件文件，因为它getElementsByClassName在8和更早的版本中不支持。应该发生（未经测试）的是那些浏览器只会按原样加载图像。

这种方法的优点是，从网络爬虫的角度来看，它可以使HTML保持整洁。

— 反应式
source

1

我很好奇，尝试了测试页。Mac上最新的Chrome和Safari似乎确实加载了图像。不幸的是，毕竟不确定这是否非常可靠...

— Pevara 2014年

不幸的是，使用这种方法，所有图像都被延迟加载到文档的底部（还不错），但是正如我在我的问题中所解释的那样，在我的方法中，图像仅在进入视口时才被延迟加载。因此，任何不进入视口的图像（即最终用户不会在页面中向下滚动）将完全不会加载。在包含大量图像的页面中，这确实很重要

— bmenekl 2014年

@bmenekl不，此答案不执行延迟加载。仅当在启用JavaScript的浏览器中查看时，它才会更改HTML，以便第三方脚本可以执行延迟加载。

— Reactgular 2014年

1

Google宣布将与他们的机器人一起执行JavaScript，有关更多说明，请参见这篇文章。

如前所述，您不得禁止将静态文件发送到GoogleBot进行动态抓取。

— 祖鲁族
source