推迟加载非关键或不可见内容(通常也称为”延迟加载”)是一种提升性能和用户体验的常见最佳做法。要了解详情,请参阅”网站开发基础”网站上与延迟加载图片和视频相关的指南。但是,如果实现不当,此技术可能会在无意中使内容对 Google 不可见。本文档介绍了如何确保 Google 可以抓取延迟加载的内容并将其编入索引。
当内容在视口中可见时加载它 #
要确保 Googlebot 能看到您网页上的所有内容,请确保每当相关内容在视口中可见时,您的延迟加载实现方案便会加载所有这些内容。下面几个示例展示了如何达成此目的:
- 原生延迟加载图片和 iframe。
- IntersectionObserver API 和 polyfill
- 一个支持在数据进入视口时加载数据的 JavaScript 库。
请务必测试您的实现效果。
支持分页加载以实现无限滚动 #
如果要实现无限滚动体验,请务必支持分页加载。分页加载对用户很重要,因为它允许用户分享您的内容并与之再次互动。此外,它还允许 Google 显示一个指向内容中特定位置(而不是无限滚动页面顶部)的链接。
若要支持分页加载,请为每个部分提供一个独一无二的链接,便于用户直接分享和加载。我们建议使用 History API 在动态加载内容时更新网址。
测试 #
设置完实现方案后,您应确保它能正常工作。一种方法是使用 Puppeteer 脚本在本地测试实现效果。Puppeteer 是一个控制无头 Chrome 的 Node.js 库。要运行此脚本,您需要 Node.js。请使用以下命令检出并运行此脚本:
git clone https://github.com/GoogleChromeLabs/puppeteer-examples cd puppeteer-examples npm i node lazyimages_without_scroll_events.js -h
运行此脚本后,请手动查看其创建的屏幕截图,以确保截图中包含您希望能被 Googlebot 看到且编入索引的所有内容。
您还可以使用 Search Console 中的网址检查工具查看系统是否已加载所有图片。请检查屏幕截图和所呈现的 HTML,确保系统加载了您的图片。