使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
修正延迟加载的内容
推迟加载非关键性内容或不可见内容(通常也称为“延迟加载”)是一种常见的提升性能和用户体验的最佳实践。如需了解详情,请参阅 web.dev 上有关延迟加载图片和视频的资源。但是,如果实现不当,此技术可能会在无意中使内容对 Google 不可见。本文档介绍了如何确保 Google 可以抓取延迟加载的内容并将其编入索引。
当内容在视口中可见时对其进行加载
若要确保 Google 能看到您网页上的所有内容,请确保每当相关内容在视口中可见时,延迟加载实现策略便会加载所有这些内容。以下是实现延迟加载的一些方法:
上述方法不依赖于用户操作(例如滚动或点击)来加载内容,这一点很重要,因为 Google 搜索不会与您的网页互动。
请勿对用户打开网页时可能立即看到的内容添加延迟加载机制。这可能会导致内容在浏览器中加载和显示所需的时间更长,这对用户来说会非常明显。
请务必测试您的实现效果。
从大体上讲,无限滚动是一种技术,可在用户向下滚动长网页时加载更多内容、更多不同的网页。这可能是一篇被拆分为多个段落的长文章,也可能是一组被类似地拆分为多个分块的内容。如需以可编入索引的方式实现无限滚动,请确保您的网站支持分页加载这些分块,方法如下:
- 为每个分块提供自己的永久性独特网址。
- 确保每次在浏览器中加载每个网址时,显示的内容都保持不变。
一种方法是在网址中使用绝对页码,例如使用
?page=12
作为查询参数。
- 请避免在这些网址中使用
?date=yesterday
等相对元素。这样一来,搜索引擎和用户就可以在给定网址下始终找到相同的内容,搜索引擎更容易将内容正确编入索引,用户也可以分享并重新与相应内容互动。
- 依次链接到各个网址,以便搜索引擎能够在分页集合中发现网址。详细了解实现分页时的最佳实践。
- 当系统加载新的网页块以响应用户滚动操作,并且该块成为主要用户可见元素时,请使用 History API 更新显示的网址。
这样一来,用户就可以刷新、分享和链接到浏览器中显示的当前网址。
测试
配置好实现策略后,请确保该策略能够正常运行。您可以使用 Search Console 中的网址检查工具查看系统是否已加载所有内容。
检查渲染的 HTML,确保您的内容位于渲染的 HTML 中,方法是在网址检查工具中查找相应内容。如果您的图片或视频网址显示在渲染的 HTML 中 <img>
或 <video>
元素的 src
属性中,则表示您的设置正确无误。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-08-04。
[null,null,["最后更新时间 (UTC):2025-08-04。"],[[["\u003cp\u003eEnsure lazy-loaded content is loaded when visible in the viewport, using methods like browser-level lazy-loading or the IntersectionObserver API, so Google can see all content.\u003c/p\u003e\n"],["\u003cp\u003eSupport paginated loading for infinite scroll by giving each content chunk a unique URL, using absolute page numbers, linking sequentially, and updating the URL with the History API.\u003c/p\u003e\n"],["\u003cp\u003eTest your implementation using the URL Inspection Tool in Search Console to verify all content is loaded and appears in the rendered HTML.\u003c/p\u003e\n"]]],["Lazy-loading should load content when visible in the viewport using methods like browser built-in loading, IntersectionObserver API, or JavaScript libraries, avoiding reliance on user actions. For infinite scroll, each content chunk needs a unique, persistent URL (e.g., `?page=12`), and avoid relative elements, also link sequentially to these URL. Update the URL with the History API. Finally, verify implementation with the URL Inspection Tool in Search Console to check if content is present in rendered HTML.\n"],null,["# Fix Lazy-Loaded Website Content | Google Search Central\n\nFix lazy-loaded content\n=======================\n\n\nDeferring loading of non-critical or non-visible content, also commonly known as \"lazy-loading\", is a common performance and UX best practice. For more information, see [web.dev's resources on lazy-loading images and video](https://web.dev/fast#lazy-load-images-and-video).\nHowever, if not implemented correctly, this technique can inadvertently hide content from Google. This document explains how to make sure Google can crawl and index lazy-loaded content.\n\nLoad content when it's visible in the viewport\n----------------------------------------------\n\nTo ensure that Google sees all content on your page, make sure that your lazy-loading implementation loads all relevant content whenever it is visible in the viewport. Here are a few methods to implement lazy-loading:\n\n- [Browser built-in lazy-loading](https://web.dev/articles/browser-level-image-lazy-loading) for images and iframes\n- [IntersectionObserver API](https://web.dev/articles/intersectionobserver) and [a polyfill](https://github.com/GoogleChromeLabs/intersection-observer)\n- A JavaScript library that supports loading data when it enters the viewport\n\nThe methods mentioned don't rely on user actions, such as scrolling or clicking, to load content, which is important as Google Search does not interact with your page.\n\nDon't add lazy-loading to content that is likely to be immediately visible when a user opens a page. That might cause content to take longer to load and show up in the browser, which will be very noticeable to the user.\n\nMake sure to [test your implementation](#test).\n\nSupport paginated loading for infinite scroll\n---------------------------------------------\n\n\nAt a high level, infinite scroll is a technique that loads more content, more distinct pages,\nas the user scrolls down a long page. This could be one long article that's split into multiple\nchunks, or a collection of items that's similarly split into chunks. To implement infinite scroll\nin an indexable way, make sure your website supports paginated loading of these chunks by doing\nthe following:\n\n- Give each chunk its own persistent, unique URL.\n- Ensure that the content shown on each URL remains the same every time it's loaded in a browser. One way this can be done is to use absolute page numbers in the URL, for example by using `?page=12` as a query parameter.\n- Avoid using relative elements like `?date=yesterday` in these URLs. This allows search engines and users to consistently find the same content under a given URL, making it easier for search engines to properly index the content, and allowing users to share and reengage with that part of your content.\n- Link sequentially to the individual URLs so that search engines can discover the URLs in a paginated set. Find out more about [best\n practices when implementing pagination](/search/docs/specialty/ecommerce/pagination-and-incremental-page-loading#best-practices-when-implementing-pagination).\n- When a new page chunk is loaded in response to the user scrolling, and it becomes the primary visible element for the user, update the displayed URL using the [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API). This allows the user to refresh, share, and link to the current URL displayed in the browser.\n\nTest\n----\n\n\nAfter you set up your implementation, make sure it works correctly.\nYou can use the [URL Inspection Tool](https://support.google.com/webmasters/answer/9012289) in Search Console to see if all content was loaded.\nCheck the rendered HTML to make sure your content is in the rendered HTML by looking for it in URL Inspection Tool. If your image or video URLs appear in the `src` attribute on the `\u003cimg\u003e` or `\u003cvideo\u003e` elements in the rendered HTML, your setup works correctly."]]