推迟加载非关键性内容或不可见内容（通常也称为“延迟加载”）是一种常见的用于提升性能和用户体验的最佳实践。要了解详情，请参阅“网站开发基础”网站上与延迟加载图片和视频相关的指南。但是，如果实现不当，此技术可能会在无意中使内容对 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，确保系统加载了您的图片。
文章为作者独立观点，不代表站长派立场，本文链接：https://zhanzhangpai.com/?p=4319
免责声明：本站部分内容来源互联网整理，如有侵权请联系站长删除。站长邮箱：1245911050@qq.com
