Google 的 Martin Splitt 不得不提醒 SEO 和网站所有者 Googlebot 不会滚动页面。
在网页上实现无限滚动时,可能会导致内容在 Google 搜索中的索引方式出现问题。
在 Splitt 在虚拟会议期间解决的一个问题中,由于无限滚动,网站的内容从 Google 搜索索引中丢失。
这里有更多关于这个问题,为什么无限滚动会阻止内容被索引,以及谷歌建议做什么。
谷歌的 Martin Splitt 在虚拟会议上调试 JavaScript SEO 问题
斯普利特是 4 月 14 日举行的名为“Better Together”的技术 SEO 虚拟会议的几位演讲嘉宾之一。
作为一个虚拟活动,Splitt 可以共享他自己的屏幕并实时向人们展示他如何调试 SEO 问题。
他查看的每个问题都是基于他过去调试的一个真实案例。
其中一个问题涉及 Google 索引中缺少的内容。
斯普利特带领人们进行了一系列测试,最终导致他发现该网站正在使用无限滚动。
这就是为什么在索引方面存在问题的原因。
为什么无限滚动是一个问题
Splitt 提供了一个依赖无限滚动(也称为“延迟加载”)来加载新内容的新闻网站的示例。
这意味着网页(在本例中为主页)在访问者滚动到屏幕底部之前不会加载其他内容。
斯普利特解释了为什么这是一个问题: “Googlebot 不做什么? 它不会滚动。 ”
Googlebot 所做的是登陆页面并抓取立即可见的内容。
根据 Splitt 的说法,Googlebot 无法抓取仅在页面滚动后才加载的内容。
值得注意的是,这一声明与斯普利特上个月提供的声明明显不同,他没有明确说明 Googlebot 是否可以看到其他内容。
请参阅:Google 的 Martin Splitt 在 Indexing Pages with Infinite Scroll
Googlebot 无法滚动可能会导致 Google 搜索索引中缺少大量内容。
这是网站所有者应该考虑做的事情。
无限滚动的替代品
斯普利特说,网站所有者应该改变他们的实施方式,而不是仅仅依靠滚动。
他提到图像的原生延迟加载很好,并且使用 IntersectionObserver API 也是可以接受的。
如果您绝对必须对关键网页内容使用延迟加载,那么请确保您的 JavaScript 库支持在数据进入视口时加载数据。
除了无限滚动之外,您可以采用的另一条路线是使用分页加载。
谷歌的 官方文档 在修复延迟加载的内容时,建议支持无限滚动的分页加载:
“如果您要实现无限滚动体验,请确保支持分页加载。
分页加载对用户很重要,因为它允许他们分享和重新参与您的内容。
它还允许谷歌显示指向内容中特定点的链接,而不是无限滚动页面的顶部。”
为确保您的网站完全支持分页加载,您必须能够提供指向用户可以直接共享和加载的每个部分的唯一链接。
测试你的实现
无论您选择哪种方法,Splitt 都强调测试您的实现的重要性。

如果站点所有者测试了无限滚动的实现,Split 调试的问题可能已经由站点所有者自己发现。
斯普利特实际上是使用 Google 的富结果测试自己来发现问题的。
丰富的结果测试允许您查看 Googlebot 在到达 URL 时能够抓取的确切信息。

以斯普利特正在与之交谈的新闻网站为例,当主页上的文章明显超过十篇时,Googlebot 只能看到十篇文章。
这是测试延迟加载实现的一种方法。
另一种方法,包含在 Google 的官方帮助文档中,是使用 Puppeteer 脚本:
以下是一些额外的资源:
在下面的视频中查看 Martin Splitt 的完整演示:
来自 31:34 标记:
“我们看到有一个window.onoverscroll。 什么是window.onoverscroll?
Window.onoverscroll 是一个函数,它允许我们调用此代码,并在页面打开时运行此 JavaScript 滚动的…
Googlebot 不做什么? 它不滚动。
这就是为什么在涉及 Googlebot 时实际上没有调用它的原因,因为我们没有在页面上滚动任何内容。
所以这里简单的事情是他们需要修复并实际改变他们的实现,而不仅仅是使用滚动。
他们可以对图像使用原生延迟加载之类的东西。
或者,如果他们想使用它来实际进行无限滚动,一些库做得更好,而其他一些库则使用 IntersectionObserver。
这两种方式都很有价值。
这里要学习的最重要的一课是测试你的 实现.
如果你实现一些东西——他们可以做同样的事情,因为他们理解他们在看什么,并且可以看到他们缺少的是他们正在做的事情是滚动,在我们的文档中我们说我们不滚动所以他们需要改变他们的代码。”