Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Khắc phục nội dung tải từng phần
Việc trì hoãn tải những nội dung không quan trọng hoặc không hiển thị, hay còn gọi là "tải từng phần", là một phương pháp tối ưu nhất thường được áp dụng để nâng cao hiệu suất và trải nghiệm người dùng. Để biết thêm thông tin, hãy xem các tài nguyên của web.dev về tính năng tải từng phần đối với hình ảnh và video. Tuy nhiên, nếu không được triển khai đúng cách, kỹ thuật này có thể vô tình ẩn nội dung khỏi Google. Tài liệu này giải thích cách để đảm bảo Google có thể thu thập dữ liệu và lập chỉ mục nội dung tải từng phần.
Tải nội dung trong khung nhìn
Để đảm bảo rằng Google nhìn thấy tất cả nội dung trên trang của bạn, hãy đảm bảo phương thức triển khai tải từng phần sẽ tải được tất cả nội dung liên quan bất cứ khi nào nội dung đó xuất hiện trong khung nhìn. Sau đây là một số phương thức để triển khai tính năng tải từng phần:
Thư viện JavaScript hỗ trợ việc tải dữ liệu khi dữ liệu xuất hiện trong khung nhìn
Điều quan trọng là các phương thức được đề cập không dựa vào thao tác của người dùng (chẳng hạn như cuộn hoặc nhấp) để tải nội dung, vì Google Tìm kiếm không tương tác với trang của bạn.
Đừng thêm tính năng tải từng phần vào nội dung có thể xuất hiện ngay khi người dùng mở trang. Điều đó có thể làm cho nội dung mất nhiều thời gian hơn để tải và xuất hiện trong trình duyệt, điều này sẽ khiến người dùng rất khó chịu.
Nói một cách đơn giản, cuộn vô hạn là một kỹ thuật tải thêm nội dung, nhiều trang riêng biệt hơn khi người dùng cuộn xuống một trang dài. Đó có thể là một bài viết dài được chia thành nhiều phần, hoặc một nhóm các mục được chia thành các phần gần giống nhau. Để triển khai trang cuộn vô hạn theo cách có thể lập chỉ mục, hãy đảm bảo trang web của bạn hỗ trợ tính năng tải theo trang của các đoạn này bằng cách làm như sau:
Cung cấp cho mỗi phần một URL riêng biệt, ổn định.
Đảm bảo rằng nội dung hiển thị trên mỗi URL vẫn giữ nguyên mỗi khi được tải trong trình duyệt. Một cách để thực hiện điều này là sử dụng số trang tuyệt đối trong URL, ví dụ: bằng cách sử dụng ?page=12 làm tham số truy vấn.
Tránh sử dụng các phần tử tương đối như ?date=yesterday trong những URL này. Điều này cho phép các công cụ tìm kiếm và người dùng luôn tìm thấy cùng một nội dung trong một URL nhất định, giúp các công cụ tìm kiếm dễ dàng lập chỉ mục nội dung một cách chính xác hơn, đồng thời cho phép người dùng chia sẻ và tương tác lại với phần nội dung đó.
Khi một phần trang mới được tải để phản hồi thao tác cuộn của người dùng và phần này trở thành phần tử chính mà người dùng nhìn thấy, hãy cập nhật URL hiển thị bằng cách sử dụng API Nhật ký. Điều này cho phép người dùng làm mới, chia sẻ và liên kết đến URL hiện tại được hiển thị trong trình duyệt.
Kiểm tra
Sau khi thiết lập phương thức triển khai, hãy đảm bảo phương thức đó hoạt động đúng cách. Bạn có thể sử dụng Công cụ kiểm tra URL trong Search Console để xem hệ thống đã tải tất cả nội dung chưa. Hãy kiểm tra HTML đã kết xuất bằng cách tìm nội dung của bạn trong Công cụ kiểm tra URL để đảm bảo rằng nội dung đó có trong phần HTML đã kết xuất đó. Nếu URL hình ảnh hoặc video của bạn xuất hiện trong thuộc tính src trên phần tử <img> hoặc <video> trong HTML đã kết xuất, thì chế độ thiết lập của bạn đang hoạt động đúng cách.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-08-04 UTC."],[[["\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."]]
