修正延迟加载的内容
推迟加载非关键性内容或不可见内容(通常也称为“延迟加载”)是一种常见的用于提升性能和用户体验的最佳实践。要了解详情,请参阅“网站开发基础”网站上与延迟加载图片和视频相关的指南。但是,如果实现不当,此技术可能会在无意中使内容对 Google 不可见。本文档介绍了如何确保 Google 可以抓取延迟加载的内容并将其编入索引。
当内容在视口中可见时对其进行加载
若要确保 Google 能看到您网页上的所有内容,请确保每当相关内容在视口中可见时,您的延迟加载实现策略便会加载所有这些内容。下面几个示例说明了如何实现上述目的:
原生延迟加载图片和 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
运行此脚本后,请手动查看其创建的屏幕截图,以确保截图中包含您希望能被 Google 看到且编入索引的所有内容。
您还可以使用 Search Console 中的网址检查工具查看系统是否已加载所有图片。请检查屏幕截图和所呈现的 HTML,确保系统加载了您的图片。