确保 Google 能看到延迟加载的内容

推迟加载非关键或不可见内容(通常也称为“延迟加载”)是一种用于提升性能和用户体验的常见最佳做法。若想了解详情,请参阅“网站开发基础”网站上与延迟加载图片和视频相关的指南。但是,如果实现不当,此技术可能会在无意中使相应内容对 Google 不可见。本文档介绍了如何确保 Google 可以抓取延迟加载的内容并将其编入索引。

当内容在视口中可见时加载内容

若要确保 Googlebot 能看到您网页上的所有内容,请确保每当相应内容在视口中可见时,您的延迟加载实现方案便会加载所有相关内容。下面几个示例展示了如何达成此目的:

请务必测试您的实现效果

支持分页加载以实现无限滚动

如果要实现无限滚动体验,请务必支持分页加载。分页加载对用户很重要,因为它允许用户分享您的内容并与之再次互动。此外,它还允许 Google 显示一个指向内容中特定位置(而不是无限滚动页面顶部)的链接。

要支持分页加载,请为用户可直接分享和加载的每个部分提供一个独一无二的链接。我们建议使用 History API 在动态加载内容时更新网址。

测试

设置完您的实现方案后,您应确保它能正常工作。一种方法是使用 Puppeteer 脚本在本地测试您的实现效果。Puppeteer 是一个用于控制无头 Chrome 的 Node.js 库。若想运行此脚本,您需要 Node.js。请使用以下命令查看此脚本并运行它:

git checkout https://github.com/GoogleChromeLabs/puppeteer-examples
cd puppeteer-examples
npm i
node lazyimages_without_scroll_events.js -h

运行此脚本后,请手动查看其创建的屏幕截图图片,以确保图片中包含您希望能被 Googlebot 看到且编入索引的所有内容。

您还可使用 Search Console 中的网址检查工具查看系统是否已加载所有图片。请检查屏幕截图和所呈现的 HTML,以确保系统加载了您的图片。

发送以下问题的反馈:

此网页