Hướng dẫn về Infinite Scroll SEO

Tóm tắt — Infinite scroll loads nhiều hơn nội dung as bạn scroll xuống, thay vì đang làm bạn nhấp để trang 2, trang 3, và so on. catch: Googlebot không scroll và không nhấp. So nếu của bạn các sản phẩm hoặc các bài viết chỉ xuất hiện sau khi khách truy cập scrolls, Google có thể không bao giờ see them. khắc phục là để cho mỗi “trang” của nội dung thực URL của nó own, so các công cụ tìm kiếm có điều gì đó để crawl ngay cả though họ không bao giờ touch của bạn scroll.

Điều gì infinite scroll là

bạn’ve được sử dụng nó hundred times không có naming nó. On social feed, shopping category, hoặc dài bài viết, bạn giữ scrolling và nhiều hơn stuff giữ appearing — không “Tiếp theo trang” button, không trang numbers. đó infinite scroll: JavaScript watches Cách far bạn’ve scrolled và, as bạn near bottom, âm thầm fetches và adds tiếp theo batch của nội dung.

nó feels seamless cho mọi người. vấn đề là đó các công cụ tìm kiếm không phải mọi người.

Vì sao nó risky Đối với SEO

Google tìm thấy và đọc của bạn các trang với automated program được gọi là Googlebot. Googlebot loads của bạn trang, nhưng nó làm không behave như human khách truy cập:

• nó không scroll xuống trang.
• nó không nhấp buttons.

So bất kỳ nội dung đó chỉ loads sau khi ai đó scrolls (hoặc clicks “Load hơn”) đơn giản không phải ở đó as far as Googlebot là concerned. nếu của bạn category trang hiển thị 24 các sản phẩm lên front và loads rest on scroll, Google có thể chỉ bao giờ see những điều đó đầu tiên 24.

một rule đó giữ nó safe

Ở đây toàn bộ trick trong một sentence: mỗi chunk của nội dung cần của nó own thực web address.

thay vì relying chỉ on scrolling, tìm kiếm-friendly setup cũng có đơn giản, crawlable các trang behind scenes — example.com/shoes?page=2, ?page=3, và so on — linked together với thông thường links Google có thể follow. infinite scroll là nice experience cho humans; numbered các URL là safety net Đối với tìm kiếm engines. Modern implementations ngay cả đổi address trong của bạn trình duyệt bar as bạn scroll, so nếu bạn copy URL bạn land lại trong chính xác giống nhau spot.

Điều gì phần lớn mọi người nhận sai

• “Google can render JavaScript now, so it’ll figure it out.” (bản dịch) «Google có thể render JavaScript hiện tại, so điều này’ll hình điều này out.» Google có thể chạy của bạn JavaScript — nhưng điều này vẫn sẽ không scroll hoặc nhấp để trigger đó loader. Đang able để render không đó giống nhau as taking hành động.
• “A ‘Load more’ button is safer than auto-scroll.” (bản dịch) «MỘT ‘Load hơn’ button là safer hơn auto-scroll.» Chỉ nếu đó button là một real link để một real trang. MỘT button đó chỉ chạy một nhấp handler là invisible để Google cũng.
• “If a page isn’t indexed, Google is ignoring it.” (bản dịch) «Nếu một trang không được lập chỉ mục, Google là ignoring điều này.» Với infinite scroll, “not indexed” (bản dịch) «không được lập chỉ mục» sometimes có nghĩa là đó nội dung đã nhận đã hợp nhất vào một sản phẩm khác trang by accident — mà là một khác nhau vấn đề với một khác nhau cách sửa.

Infinite scroll không phải banned hoặc penalized. Đã xong right — với thực các URL underneath — nó completely fine. Muốn mechanics của Vì sao hai các trang đôi khi nhận được lập chỉ mục as một, plus thực tế code pattern để implement nó? Chuyển để Nâng cao tab.

Tóm tắt — Googlebot không bao giờ scrolls và không bao giờ clicks, so scroll-gated nội dung là invisible theo mặc định. Google workaround là để render trong rất tall viewport (khoảng 411×12 140px mobile, 1024×9 307px desktop) — nhưng đó giống nhau height có thể trigger scroll loader during kết xuất, folding tiếp theo logical trang vào hiện tại một so hai các trang nhận được lập chỉ mục as single URL. durable khắc phục là architectural: persistent, absolute, theo-chunk các URL (e.g. ?page=12), linked với crawlable anchors, với History API updating address bar as mỗi chunk becomes chính. rel=next/rel=prev là legacy cho Google (dropped 2019) nhưng vẫn respected by Bing. On ecommerce PLPs, sitemaps hoặc Merchant Center feed là phát hiện backstop. Verify mọi thứ trong URL Inspection Tool được kết xuất HTML.

đầu tiên, disambiguation

Nếu bạn tìm kiếm “Google infinite scroll” (bản dịch) «Google infinite scroll» bạn’ll hit kết quả về Google own continuous scroll on của nó kết quả tìm kiếm các trang — một SERP feature Google turned on và thì discontinued trong mid-2024. đó là một Google-sản phẩm UX decision và có không có gì để làm với cách Googlebot crawl của bạn site. Này bài viết là về đó latter: infinite scroll as một loading pattern on của bạn own các trang, và liệu Google có thể chỉ mục điều gì điều này loads.

cốt lõi constraint: Google không interact với của bạn trang

Mọi thứ ở đây follows từ một fact. Google own lazy-loading tài liệu chẳng hạn đó được khuyến nghị patterns “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.” (bản dịch) «không rely on người dùng actions, such as scrolling hoặc clicking, để load nội dung, mà là quan trọng as Google Search không interact với trang của bạn.» Đó pagination doc says điều này ngay cả hơn plainly: “Google’s crawlers don’t ‘click’ buttons and generally don’t trigger JavaScript functions that require user actions to update the current page contents.” (bản dịch) «Google các crawler không ‘nhấp’ buttons và generally không trigger JavaScript functions đó require người dùng actions để cập nhật đó hiện tại trang nội dung.»

As I put điều này trong my own JavaScript SEO hướng dẫn: “Googlebot doesn’t take action on webpages. It’s not going to click things or scroll, but that doesn’t mean it doesn’t have workarounds. As long as content is loaded in the DOM without a needed action, Google will see it. If it’s not loaded into the DOM until after a click, then the content won’t be found.” (bản dịch) «Googlebot không take hành động on webpages. đây là không going để nhấp điều hoặc scroll, nhưng đó không có nghĩa là điều này không có workarounds. Miễn là nội dung là loaded trong đó DOM không có một needed hành động, Google sẽ see điều này. Nếu đây là không loaded vào đó DOM until sau một nhấp, thì đó nội dung sẽ không là được tìm thấy.»

So infinite scroll đó chỉ triggers on thực scroll event là nội dung-phát hiện vấn đề trước khi nó bất cứ điều gì khác.

Google workaround: rất tall viewport

Google không simulate scrolling. Thay vì điều này renders trang của bạn trong an unusually tall viewport, so nội dung vài screens xuống là đã bên trong đó được kết xuất area không có anyone scrolling. Đó earliest on-record hint of này đã là John Mueller 2017 note đó “Googlebot renders with a very tall viewport, which skews some CSS (often images). Try in Chrome dev-tools, eg 9000px high viewport.” (bản dịch) «Googlebot renders với một very tall viewport, mà skews some CSS (thường images). Try trong Chrome dev-tools, eg 9000px cao viewport.»

Đó cụ thể numbers I’ve được ghi lại: cho mobile, Google loads đó trang tại một screen size of 411×731 pixels và resizes đó length để 12 140 pixels — “essentially, it becomes a really long phone with a screen size of 411×12140 pixels. For desktop, it does the same and goes from 1024×768 pixels to 1024×9307 pixels.” (bản dịch) «essentially, điều này becomes một thực sự dài phone với một screen size of 411×12140 pixels. Cho desktop, điều này làm đó giống nhau và goes từ 1024×768 pixels để 1024×9307 pixels.» (I haven’t seen gần đây re-các kiểm thử of những chính xác figures, và they có thể vary với trang length; đó original dimensions trace lại để independent kiểm thử by SEO researcher JR Oakes.) Đó point không đó chính xác pixel count — đây là đó Google fakes “seeing far down the page” (bản dịch) «seeing far xuống đó trang» với height, không với movement.

Treat cả hai chính xác pixel dimensions và hai-các trang-đã hợp nhất behavior dưới as dated, implementation-cụ thể observations thay vì ổn định nền tảng contract — Google không publish chính thức spec cho either number, và kết xuất behavior có thể thay đổi. không assume của bạn trang web behaves giống nhau way; xác nhận hiện tại behavior cho của bạn own các URL với được kết xuất-HTML kiểm thử trong tiếp theo section thay vì taking những điều này figures as bảo đảm.

thất bại chế độ không ai giải thích: hai các trang được lập chỉ mục as một

Ở đây nơi tall viewport bites lại. vì render viewport là so tall, scroll-triggered loader có thể fire during kết xuất mặc dù không có gì “scrolled” trong human hợp lý — sheer DOM height có thể là đủ để satisfy IntersectionObserver hoặc scroll-position kiểm tra. Khi đó happens, loader appends tiếp theo logical trang nội dung vào hiện tại trang render, và Google indexes đã hợp nhất kết quả as single URL.

I’ve diagnosed điều này several times. từ my JavaScript SEO hướng dẫn:

“Another issue I’ve seen with this setup is, occasionally, two pages get indexed as one. I’ve seen this a few times when people said they couldn’t get their page indexed. But I’ve found their content indexed as part of another page that’s usually the previous post from them.” (bản dịch) «Một vấn đề khác tôi từng thấy với cách triển khai này là đôi khi hai trang bị lập chỉ mục như một. Tôi đã gặp trường hợp này vài lần khi mọi người nói họ không thể lập chỉ mục trang của mình. Nhưng tôi phát hiện nội dung của họ được lập chỉ mục như một phần của một trang khác, thường là bài đăng trước đó của chính họ.»

“My theory is that when Google resized the viewport to be longer, it triggered the infinite scroll and loaded another article in when it was rendering. In this case, what I recommend is to block the JavaScript file that handles the infinite scrolling so the functionality can’t trigger.” (bản dịch) «Theo giả thuyết của tôi, khi Google thay đổi kích thước viewport thành dài hơn, thao tác đó đã kích hoạt infinite scroll và tải thêm một bài viết trong lúc kết xuất. Trong trường hợp này, tôi khuyến nghị chặn JavaScript tệp xử lý infinite scroll để chức năng đó không thể’t trigger.»

John Mueller described đó giống nhau mechanic từ Google side trong một 2022 office-hours session: Google renders với một cao viewport, đó “would trigger some amount of infinite scrolling,” (bản dịch) «sẽ kích hoạt một phần thao tác infinite scroll,» và “we might have two or three of these pages loaded on one page with infinite scroll, but not everything.” (bản dịch) «chúng tôi có thể tải hai hoặc ba trang trên cùng một trang bằng infinite scroll, nhưng không phải mọi thứ.» (Đó office-hours quote là relayed qua Search Engine Journal’s ghi-lên, không confirmed so với đó chính recording.)

Hai consequences fall out của điều này:

1. có không có bảo đảm của Cách nhiều nhận pulled trong. có thể là không có gì extra, có thể là hai hoặc three các trang, không bao giờ reliably mọi thứ. Infinite scroll alone không phải dependable way để nhận deep nội dung được lập chỉ mục.
2. “Không được lập chỉ mục” có thể là misdiagnosis. bị thiếu trang có thể không là bị thiếu tại all — nó có thể là được lập chỉ mục as part của trước đó URL. đó cần khác khắc phục hơn thông thường lập chỉ mục bug.

Cách chẩn đoán nó

Dùng Search Console’s URL Inspection Tool và đọc đó được kết xuất HTML, không đó thô nguồn. Google tài liệu là rõ ràng: “You can use the URL Inspection Tool in Search Console to see if all content was loaded. Check the rendered HTML to make sure your content is in the rendered HTML by looking for it in URL Inspection Tool.” (bản dịch) «Bạn có thể dùng đó URL Inspection Tool trong Search Console để see nếu all nội dung đã là loaded. Kiểm tra đó được kết xuất HTML để hãy bảo đảm nội dung của bạn là trong đó được kết xuất HTML by looking cho điều này trong URL Inspection Tool.» Tìm kiếm đó được kết xuất HTML cho nội dung bạn expect để là on trang 1 chỉ. Nếu bạn tìm nội dung từ trang 2 (hoặc đó tiếp theo bài viết) sitting bên trong trang 1’s render, bạn đã reproduced đó hợp nhất bug.

Bạn có thể cũng replicate tall viewport locally: open Chrome DevTools, đặt rất tall custom viewport (Mueller suggestion là ~9000px), và load trang để see liệu của bạn loader fires với không scrolling.

khắc phục: paginated các URL + History API

Đó durable cách sửa là architectural, straight từ Google hiện tại lazy-loading doc. Để làm infinite scroll indexable, “make sure your website supports paginated loading of these chunks” (bản dịch) «hãy bảo đảm của bạn website hỗ trợ paginated loading of những chunks»:

• “Give each chunk its own persistent, unique URL.” (bản dịch) «Cho mỗi chunk của nó own persistent, unique URL.»
• “Ensure that the content shown on each URL remains the same every time it’s loaded in a browser” (bản dịch) «Bảo đảm đó nội dung shown on mỗi URL vẫn đó giống nhau mỗi khi đây là loaded trong một trình duyệt» — Google suggests absolute trang numbers như ?page=12.
• “Avoid using relative elements like ?date=yesterday in these URLs” (bản dịch) «Tránh dùng relative elements như ?date=yesterday trong những URLs» — an address đó trả về khác nhau nội dung mỗi load là unusable as một canonical.
• “Link sequentially to the individual URLs so that search engines can discover the URLs in a paginated set” (bản dịch) «Link sequentially để đó riêng lẻ URLs so đó các công cụ tìm kiếm có thể discover đó URLs trong một paginated set» — real <a href> links, không nhấp handlers.
• “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.” (bản dịch) «Khi một new trang chunk là loaded trong phản hồi để người dùng scrolling, và điều này becomes đó chính visible element cho người dùng, cập nhật đó displayed URL dùng đó History API.»

đó cuối cùng point là elegant part. history.pushState() / replaceState() swaps URL trong address bar as người dùng scrolls past mỗi boundary — so visible URL luôn matches chính nội dung, và người dùng có thể refresh, share, và link để chính xác nơi họ là. Meanwhile crawlable ?page=N các URL exist independently, so Google có thể reach mỗi chunk trực tiếp liệu hoặc không renderer bao giờ triggers scroll.

Hai implementation notes đó quan trọng:

• Dùng IntersectionObserver (hoặc native trình duyệt lazy-loading), không một thô scroll listener. Điều này thực hiện far tốt hơn (không scroll-thrash) và đây là đó “load when visible” (bản dịch) «load khi visible» mechanism Google endorses cho deferred nội dung.
• Giữ đó paginated set discoverable independently of đó JS. Real anchors trong đó DOM, và/hoặc đó ?page=N URLs listed trong của bạn XML sitemap. Whatever đó renderer captures, đó sitemap-và-links layer là của bạn backstop.

nếu trực tiếp trang web là đã exhibiting hợp nhất bug và bạn cần dừng bleeding trước khi bạn có thể rebuild, my blunt emergency khắc phục là để block JavaScript file đó triggers infinite scroll trong robots.txt so nó physically có thể’t fire during kết xuất — buying time để ship proper paginated-URL architecture.

Navigation state: lại, forward, refresh, và share có để reconstruct giống nhau view

History API point trên covers half contract — updating address bar as chunk becomes chính. khác half là đang làm sure mỗi entry path lại vào đó URL thực ra reconstructs right nội dung, không chỉ right scroll position:

• sử dụng pushState() Khi chunk becomes chính visible nội dung cho đầu tiên time — đó thực navigation step, và nó Điều gì làm lại button có ý nghĩa.
• sử dụng replaceState() cho corrections đó không nên tạo của họ own lại-button dừng, như syncing URL sau khi fast scroll past several chunks tại sau khi.
• Listen cho popstate và re-render (hoặc re-fetch) chunk đó matches URL trong event. trình duyệt default lại/forward behavior restores scroll position, không dynamic list state của bạn JavaScript được xây dựng — nếu người dùng hits lại sau khi của bạn loader appended 40 nhiều hơn items, bạn cần reconstruct mà items belong on đó trang, không chỉ scroll them ở đó.
• không lean on tự động scroll restoration alone để solve điều này. nó controls nơi viewport lands, không Điều gì nội dung là present — nếu underlying list có thể thay đổi giữa visits (new các sản phẩm đã thêm, items out của stock), scroll position không có nội dung reconstruction có thể strand người dùng trong sai context.

Đây là giống nhau discipline paginated-URL khắc phục đã phụ thuộc vào: chunk URL có để trả về nội dung nó promised on fresh load, refresh, và Tìm kiếm-Console trực tiếp kiểm thử — không chỉ đầu tiên time nó fetched mid-scroll.

Loading, lỗi, và end-của-kết quả trạng thái

production implementation cần nhiều hơn trạng thái hơn “loading” và “loaded”:

• Ban đầu load — đầu tiên chunk nên đã là trong thô HTML máy chủ gửi, không assembled hoàn toàn by JS sau khi fact.
• tiếp theo-chunk loading — visible trong-progress indicator so người dùng (và anyone kiểm thử với assistive tech) know fetch là underway.
• rỗng — distinct state cho zero kết quả, không blank space đó looks hỏng.
• lỗi / retry — thất bại fetch không nên silently strand trang với không way để try again, và retry không nên duplicate hoặc reorder items đã on trang.
• End của kết quả — clear tín hiệu, không infinite spinner, sau khi có không có gì left để load.

None của Đây là Google-cụ thể, nhưng nó giống nhau reliability paginated-URL khắc phục phụ thuộc vào: nếu loader có thể silently break mid-fetch, Bạn có thể’t trust đó bất kỳ được cho crawl hoặc người dùng session thực ra captured chunk nó nên có.

Accessibility và performance: hai điều infinite scroll không cho bạn cho free

Infinite scroll có không inherent Core Web Vitals outcome, good hoặc bad — nó determined hoàn toàn by Cách bạn xây dựng nó. mỗi appended chunk grows DOM, và lớn đủ DOM raises layout và style-recalculation cost, so watch append cost, image loading, layout shift từ nội dung không có reserved space, và dài tasks as list grows. On rất dài các trang, cân nhắc virtualizing chunks đó có scrolled far out của view (removing của họ DOM nodes) thay vì letting DOM grow unbounded.

Accessibility cần của nó own deliberate design, không an assumption đó “it renders, so it’s fine” (bản dịch) «điều này renders, so đây là fine»:

• Keyboard người dùng cần để là able để reach new nội dung — và footer hoặc end-của-trang navigation — không có trang silently growing out từ dưới của họ tab order.
• Screen reader người dùng cần new nội dung announced không có interrupting Điều gì họ’re đang làm — polite status region, không disruptive alert, là thông thường pattern.
• WAI-ARIA feed design pattern là được xây dựng cho chính xác điều này case: bài viết-cấp độ regions bên trong feed container, với được định nghĩa keyboard behavior cho moving giữa items và cho reaching nội dung trước khi và sau khi feed.
• Focus không nên silently jump hoặc nhận lost Khi new chunk loads.

None của Đây là tùy chọn cleanup. nó khác biệt giữa infinite scroll đó hoạt động cho mọi người và một đó chỉ hoạt động cho mouse người dùng với JavaScript ai không bao giờ strays từ happy path.

lịch sử context: rel=tiếp theo/prev là legacy

Nếu bạn learned pagination năm ago, bạn learned rel="next" / rel="prev". Google introduced them trong 2011 và paired them với của nó original 2014 “infinite scroll search-friendly recommendations” (bản dịch) «infinite scroll tìm kiếm-friendly các khuyến nghị» (paginate đó nội dung, cung cấp component các trang). Thì trong 2019 Google announced điều này hadn’t đã dùng những tags cho năm và formally dropped them. Đó pagination doc xác nhận điều này hôm nay: “In the past, Google used <link rel="next" href="..."> and <link rel="prev" href="..."> to identify next page and previous page relationships. Google no longer uses these tags, although these links may still be used by other search engines.” (bản dịch) «Trong đó past, Google dùng <link rel="next" href="..."> và <link rel="prev" href="..."> để identify tiếp theo trang và trước đó trang relationships. Google không lâu hơn dùng những tags, although những links có thể vẫn là dùng by other các công cụ tìm kiếm.»

So đó hiện tại Google recipe là unique URLs + crawlable links + đó History API — không rel=next/rel=prev bắt buộc. Nhưng “other search engines” (bản dịch) «other các công cụ tìm kiếm» bao gồm Bing, mà vẫn respects them, so có không harm trong giữ them trong của bạn markup cho cross-engine benefit và accessibility. Bing itself không publish infinite-scroll-cụ thể hướng dẫn; của nó stance reduces để đó chung JS-kết xuất caution của nó team laid out — bingbot có thể render JavaScript nhưng “it is difficult for bingbot to process JavaScript at scale,” (bản dịch) «điều này là difficult cho bingbot để xử lý JavaScript tại quy mô,» so một crawlable paginated fallback helps Bing cho chính xác đó giống nhau reason điều này helps Google.

Ecommerce category các trang: highest-stakes case

phần lớn phổ biến thực-world infinite scroll là on ecommerce category / sản phẩm listing các trang (PLPs), và nó nơi risk costs thực tế money. nếu deep-catalog các sản phẩm past đầu tiên screenful không bao giờ nhận được lập chỉ mục, họ có thể’t xếp hạng, và bạn lose dài tail của sản phẩm-cấp độ lưu lượng tự nhiên. Đây là giống nhau territory covered trong depth trong category-trang material — infinite scroll là một nhiều hơn reason những điều đó các trang cần crawlable structure underneath UX.

Hai backstops quan trọng ở đây:

• XML sitemaps listing mỗi canonical sản phẩm và paginated category URL, so phát hiện không phụ thuộc on renderer.
• ** Merchant Center sản phẩm feed**, mà feeds Google sản phẩm dữ liệu independently của whatever category trang renderer captures.

Lumar analysis of top UK fashion retailers được tìm thấy infinite scroll để là, trong của họ words, “the biggest loser when it comes to indexability and SEO friendliness” (bản dịch) «đó biggest loser khi điều này xuất hiện để indexability và SEO friendliness» among đó pagination patterns — một hữu ích reminder đó này không một theoretical trường hợp biên, đây là đó default chế độ lỗi of một very popular PLP UX. (Lumar cụ thể percentage figures nên là đọc từ của họ trực tiếp báo cáo trước citing an chính xác number.)

Infinite scroll so với. pagination so với. load nhiều hơn

Google pagination doc frames three UX patterns và là honest về đó tradeoffs. Infinite scroll “uses a single page for all content” (bản dịch) «dùng một single trang cho all nội dung» và là “intuitive — the user just keeps scrolling,” (bản dịch) «intuitive — người dùng chỉ giữ scrolling,» nhưng điều này “can lead to ‘scrolling fatigue’ because of unclear result size” (bản dịch) «có thể lead để ‘scrolling fatigue’ làm unclear kết quả size» và “can’t handle very large numbers of results.” (bản dịch) «không thể xử lý very lớn numbers of kết quả.» Classic numbered pagination là đó hầu hết robust cho SEO vì mỗi trang là inherently một real URL. “Load hơn” sits trong giữa — fine nếu đó button là (hoặc wraps) một real link để một paginated URL, useless cho SEO nếu đây là một pure nhấp handler.

Đó decision không “which is allowed” (bản dịch) «mà là được phép» — all three là được phép. đây là “which UX do you want, and did you build the crawlable URL layer underneath it.” (bản dịch) «mà UX làm bạn muốn, và đã làm bạn xây dựng đó crawlable URL layer underneath điều này.» Mueller 2023 summary là đó toàn bộ điều trong một line: “if each piece or virtual page is also accessible and findable through a unique URL, generally it should be fine to have infinite scroll.” (bản dịch) «nếu mỗi piece hoặc virtual trang là cũng accessible và findable qua một unique URL, generally điều này nên là fine để có infinite scroll.»

AI summary

condensed take on Nâng cao version:

• Root constraint: Googlebot không scroll hoặc nhấp. Nội dung gated behind một scroll hoặc nhấp event là invisible để điều này theo mặc định (“Google Search does not interact with your page” (bản dịch) «Google Search không interact với trang của bạn»).
• Google workaround: điều này renders trong một very tall viewport (~411×12 140px mobile, ~1024×9 307px desktop) thay vì scrolling.
• Đó chế độ lỗi: đó tall viewport có thể trigger đó scroll loader during kết xuất, folding đó tiếp theo logical trang vào đó hiện tại một — so hai các trang nhận được lập chỉ mục as một single URL. MỘT “không được lập chỉ mục” trang có thể thực ra là được lập chỉ mục as part of một sản phẩm khác URL.
• Không có bảo đảm: theo Mueller, Google có thể load “two or three of these pages … but not everything.” (bản dịch) «hai hoặc three of những các trang … nhưng không mọi thứ.» Infinite scroll alone không phải một reliable deep-lập chỉ mục phương thức.
• Đó cách sửa (architectural): persistent, unique, absolute theo-chunk URLs (e.g. ?page=12), linked với crawlable <a href>, với đó History API (pushState/replaceState) updating đó address bar as mỗi chunk becomes chính.
• Trigger mechanism: IntersectionObserver / native lazy-load, không một thô scroll listener.
• Legacy note: rel=next/rel=prev dropped by Google trong 2019; Bing vẫn hỗ trợ điều này, so giữ điều này cho cross-engine benefit.
• Ecommerce: PLPs là đó highest-stakes case; lại them với sitemaps và một Merchant Center feed. Verify trong đó URL Inspection Tool được kết xuất HTML.
• Emergency cách sửa on một trực tiếp hợp nhất bug: block đó infinite-scroll JS file so điều này không thể fire during kết xuất trong khi bạn rebuild.
• Navigation state: pushState cho một real navigation step, replaceState cho trong-place corrections, và một popstate handler đó reconstructs đó chunk nội dung — không chỉ của nó scroll position — on lại/forward.
• Loading/lỗi/end trạng thái: distinct ban đầu-load, tiếp theo-chunk-loading, empty, lỗi/retry, và end-of-kết quả trạng thái; một hỏng loader là một reliability vấn đề trước đây là an SEO một.
• Accessibility và performance: infinite scroll có không inherent Core Web Vitals outcome (đây là điều gì bạn xây dựng); keyboard reachability, non-disruptive announcements, và đó WAI-ARIA feed pattern là tách biệt design hoạt động từ đó lập chỉ mục cách sửa.
• Dated observations: treat đó chính xác viewport pixel dimensions và đó hợp nhất-bug mechanics as implementation-cụ thể, không một ổn định spec — verify theo URL.

Tài liệu chính thức

Chính-nguồn tài liệu on infinite scroll, pagination, và JS kết xuất.

Google

• Cách sửa lazy-loaded nội dung — bao gồm đó “Support paginated loading for infinite scroll” (bản dịch) «Hỗ trợ paginated loading cho infinite scroll» section (unique theo-chunk URLs, absolute trang numbers, History API) và đó URL Inspection kiểm thử step. Cuối cùng đã cập nhật 2025-12-10.
• Pagination, incremental trang loading, và của họ impact on Google Search — đó three UX patterns (pagination / load hơn / infinite scroll), của họ pros/cons, đó crawler-interaction note, và đó rel=next/rel=prev deprecation.
• Infinite scroll tìm kiếm-friendly các khuyến nghị — đó original 2014 blog post (lịch sử; đó rel=next/rel=prev pairing điều này described là hiện tại superseded).
• September 2023 SEO Office Hours Transcript — Mueller on-đó-record restatement of đó unique-URL rule.
• Understand đó JavaScript SEO basics — đó rộng hơn kết xuất context infinite scroll sits bên trong.

Bing / Microsoft

• bingbot Series: JavaScript, Dynamic Kết xuất, và Cloaking. Oh My! — Bing chung JS-kết xuất hướng dẫn (không infinite-scroll-cụ thể trang tồn tại; Bing vẫn respects rel=next/rel=prev).

Quotes từ nguồn

On—record statements từ Google và Bing. mỗi link là deep link đó jumps để quoted passage on nguồn trang.

Google — infinite scroll & paginated-loading rule

• “To implement infinite scroll in an indexable way, make sure your website supports paginated loading of these chunks.” (bản dịch) «Để implement infinite scroll trong an indexable way, hãy bảo đảm của bạn website hỗ trợ paginated loading of những chunks.» … “Give each chunk its own persistent, unique URL.” (bản dịch) «Cho mỗi chunk của nó own persistent, unique URL.» — Google Search Central, “Fix lazy-loaded content.” (bản dịch) «Cách sửa lazy-loaded nội dung.» Nhảy đến trích dẫ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.” (bản dịch) «Khi một new trang chunk là loaded trong phản hồi để người dùng scrolling, và điều này becomes đó chính visible element cho người dùng, cập nhật đó displayed URL dùng đó History API.» Nhảy đến trích dẫn
• “The 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.” (bản dịch) «Đó các phương thức mentioned không rely on người dùng actions, such as scrolling hoặc clicking, để load nội dung, mà là quan trọng as Google Search không interact với trang của bạn.» Nhảy đến trích dẫn
• “You can use the URL Inspection Tool in Search Console to see if all content was loaded. Check the rendered HTML to make sure your content is in the rendered HTML by looking for it in URL Inspection Tool.” (bản dịch) «Bạn có thể dùng đó URL Inspection Tool trong Search Console để see nếu all nội dung đã là loaded. Kiểm tra đó được kết xuất HTML để hãy bảo đảm nội dung của bạn là trong đó được kết xuất HTML by looking cho điều này trong URL Inspection Tool.» Nhảy đến trích dẫn

Google — pagination doc: crawler behavior & rel=tiếp theo/prev

• “Google’s crawlers don’t ‘click’ buttons and generally don’t trigger JavaScript functions that require user actions to update the current page contents.” (bản dịch) «Google các crawler không ‘nhấp’ buttons và generally không trigger JavaScript functions đó require người dùng actions để cập nhật đó hiện tại trang nội dung.» Nhảy đến trích dẫn
• “In the past, Google used <link rel="next" href="..."> and <link rel="prev" href="..."> to identify next page and previous page relationships. Google no longer uses these tags, although these links may still be used by other search engines.” (bản dịch) «Trong đó past, Google dùng <link rel="next" href="..."> và <link rel="prev" href="..."> để identify tiếp theo trang và trước đó trang relationships. Google không lâu hơn dùng những tags, although những links có thể vẫn là dùng by other các công cụ tìm kiếm.» Nhảy đến trích dẫn

John Mueller, Google — September 2023 office hours

• “It depends how you implement infinite scrolling. if each piece or virtual page is also accessible and findable through a unique URL, generally it should be fine to have infinite scroll.” (bản dịch) «Điều này phụ thuộc cách bạn implement infinite scrolling. nếu mỗi piece hoặc virtual trang là cũng accessible và findable qua một unique URL, generally điều này nên là fine để có infinite scroll.» Nhảy đến trích dẫn

John Mueller, Google — đó “9000px viewport” (bản dịch) «9000px viewport» tweet (Nov 2017)

• “Googlebot renders with a very tall viewport, which skews some CSS (often images). Try in Chrome dev-tools, eg 9000px high viewport.” (bản dịch) «Googlebot renders với một very tall viewport, mà skews some CSS (thường images). Try trong Chrome dev-tools, eg 9000px cao viewport.» — reproduced by Công cụ tìm kiếm Roundtable. Đọc bài đưa tin

Bing — chung JS kết xuất (không infinite-scroll-cụ thể trang)

• “As we shared last week at SMX East, bingbot is generally able to render JavaScript. However, bingbot does not necessarily support all the same JavaScript frameworks that are supported in the latest version of your favorite modern browser.” (bản dịch) «As we shared cuối cùng week tại SMX East, bingbot là generally able để render JavaScript. Tuy nhiên, bingbot không nhất thiết hỗ trợ all đó giống nhau JavaScript các framework đó là supported trong đó latest version of của bạn favorite modern trình duyệt.» — Fabrice Canel & Frédéric Dubut, Microsoft Bing. Nhảy đến trích dẫn

Mà pagination pattern nên bạn sử dụng?

Hoạt động top để bottom.

1. Làm nội dung past đầu tiên screen cần để xếp hạng trong tìm kiếm?

• Không (e.g. internal-chỉ feed, logged-trong dashboard) → bất kỳ pattern là fine; optimize purely cho UX.
• Có → giữ going.

2. Làm bạn đã có (hoặc có thể bạn xây dựng) thực theo-chunk URL cho mỗi batch?

• Không, và Bạn có thể’t → sử dụng kinh điển numbered pagination. mỗi trang là thực URL theo mặc định, so nó lowest-risk pattern Đối với SEO.
• Có → infinite scroll hoặc “load hơn” là cả hai fine, continue.

3. Cách lớn là đó set?

• Very lớn (thousands of items, deep catalog) → ưu tiên numbered pagination hoặc infinite-scroll-over-real-URLs; pure infinite scroll “can’t handle very large numbers of results.” (bản dịch) «không thể xử lý very lớn numbers of kết quả.» Thêm sitemaps as một phát hiện backstop.
• Moderate → infinite scroll hoặc load hơn, được hỗ trợ by paginated URLs, là fine.

4. Building infinite scroll — là nó wired để thực các URL + History API?

• Không (scroll event chỉ, không các URL) → không ship. Đây là setup đó nhận deep nội dung đã hợp nhất/unindexed.
• Có (?page=N các URL + crawlable anchors + pushState) → ship nó, sau đó verify trong URL Inspection Tool được kết xuất HTML.

5. Đã trực tiếp và một deep trang “isn’t indexed” (bản dịch) «không được lập chỉ mục»?

• Kiểm tra đó URL Inspection Tool được kết xuất HTML of đó trước đó trang/post đầu tiên — đó “bị thiếu” nội dung có thể là đã hợp nhất ở đó.
• Nếu điều này là → emergency cách sửa: block đó infinite-scroll JS file so điều này không thể fire during kết xuất, thì rebuild on paginated URLs.

Tìm kiếm-friendly infinite scroll checklist

• mỗi nội dung chunk có của nó own persistent, unique, absolute URL (e.g. ?page=2, không ?date=yesterday).
• mỗi URL trả về giống nhau nội dung mỗi time nó loads (ổn định, không session-phụ thuộc).
• Chunks là linked với thực <a href> links, discoverable không có đang chạy JS.
• visible URL cập nhật qua History API (pushState/replaceState) as mỗi chunk becomes chính nội dung.
• scroll loader dùng IntersectionObserver (hoặc native lazy-loading), không thô scroll event listener.
• Paginated các URL là listed trong XML sitemap (và, cho ecommerce, được hỗ trợ by Merchant Center feed).
• rel=next/rel=prev tùy chọn present cho Bing (harmless cho Google, mà bỏ qua nó).
• URL Inspection Tool → được kết xuất HTML xác nhận deep nội dung là present và không đã hợp nhất từ liền kề trang.
• Locally reproduced với tall DevTools viewport (~9000px) để xác nhận loader không over-fire during render.
• popstate handler reconstructs chunk nội dung on lại/forward, không chỉ scroll position.
• Distinct loading, lỗi/retry, rỗng, và end-của-kết quả trạng thái exist — thất bại fetch không silently strand trang.
• Keyboard người dùng có thể reach new nội dung và trang footer; new nội dung là announced qua polite status region, không disruptive alert.

Điều gì breaks infinite scroll Đối với SEO

Scroll-event-chỉ loading với không thực các URL. kinh điển mistake. nội dung lives chỉ trong DOM sau khi scroll fires — Googlebot không bao giờ scrolls, so nó invisible. có không có gì để crawl và không có gì để fall lại on.

** “Load hơn” button đó pure nhấp handler.** Feels safer hơn auto-scroll, không phải. Google không nhấp buttons either. nó chỉ helps nếu button là (hoặc wraps) thực <a href> để paginated URL.

Fragment/hash các URL cho pagination (#page=2). Fragments không tạo distinct crawlable các URL. sử dụng thực query-parameter hoặc path-based các URL thay vì.

Relative hoặc không ổn định các URL (?date=yesterday, session-scoped nội dung). nếu giống nhau URL trả về khác nội dung on khác loads, nó có thể’t phục vụ as ổn định, indexable trang. sử dụng absolute trang numbers.

Ignoring tall-viewport hợp nhất bug. Assuming “không được lập chỉ mục” có nghĩ là Google là ignoring trang. Trong infinite scroll nó thường có nghĩ là nội dung đã nhận folded vào liền kề URL by render-time trigger — khác vấn đề needing khác khắc phục.

Blocking của bạn JS/CSS globally as “cách sửa.” Blocking cụ thể infinite-scroll trigger file là deliberate emergency đo lường. Blocking all JS/CSS không phải — nó wrecks kết xuất trên toàn bộ trang.

Infinite scroll SEO — bảng tra nhanh

** three UX patterns**

** non-negotiables cho infinite scroll**

• Persistent, unique, absolute URL theo chunk (?page=12).
• giống nhau nội dung on mỗi load (không ?date=yesterday).
• Crawlable <a href> links giữa chunks.
• History API (pushState/replaceState) để sync address bar.
• IntersectionObserver, không thô scroll listener.

Fast facts

• Googlebot: không scroll, không nhấp.
• Render viewport (reported): ~411×12 140px mobile, ~1024×9 307px desktop.
• Hợp nhất bug: tall viewport có thể fire loader mid-render → hai các trang được lập chỉ mục as một.
• rel=next/rel=prev: Google dropped nó trong 2019; Bing vẫn dùng nó.
• Verify: URL Inspection Tool → được kết xuất HTML.
• Emergency khắc phục on trực tiếp hợp nhất bug: block infinite-scroll JS file.

Điều gì good và bad implementations trông giống

Bad — scroll-chỉ, invisible để Google

category trang ships 24 các sản phẩm trong HTML. scroll listener fetches tiếp theo 24 và appends them. có không ?page=N các URL anywhere, không anchors, không History API. Googlebot loads trang, không bao giờ scrolls, và indexes 24 các sản phẩm. khác 300 trong catalog là undiscoverable qua điều này trang.

Bad — hợp nhất bug trong wild

MỘT publisher blog dùng infinite scroll để append đó tiếp theo post dưới đó hiện tại một. MỘT writer complains của họ new bài viết “won’t index.” (bản dịch) «sẽ không chỉ mục.» đây là thực ra được lập chỉ mục — as part of đó trước đó post URL, vì Google tall render viewport triggered đó loader và folded đó tiếp theo bài viết vào đó hiện tại trang render. Cách sửa: paginate properly, và trong đó meantime block đó infinite-scroll trigger script.

Good — infinite scroll over thực các URL

giống nhau category tồn tại /shoes?page=1, /shoes?page=2, … mỗi thực URL returning ổn định nội dung, all listed trong XML sitemap và linked với <a href> tại foot của listing. cho humans, IntersectionObserver loads tiếp theo chunk as họ approach bottom và history.pushState() cập nhật address bar để ?page=2 Khi đó batch becomes chính nội dung. Google reaches mỗi trang trực tiếp qua links và sitemap; scroll UX là pure enhancement on top.

Implementation và diagnostic snippets

History API pattern (client-side)

Load mỗi chunk Khi nó về để enter view với IntersectionObserver, sau đó đổi visible URL Khi đó chunk becomes chính. Điểm mấu chốt là đó ?page=N các URL là thực các trang đó exist máy chủ-side regardless của điều này script.

// A sentinel element sits at the bottom of the current chunk.
const sentinel = document.querySelector('#load-more-sentinel');
let nextPage = 2;

const io = new IntersectionObserver(async (entries) => {
  if (!entries[0].isIntersecting) return;
  const res = await fetch(`/shoes?page=${nextPage}&partial=1`);
  const html = await res.text();
  document.querySelector('#product-grid').insertAdjacentHTML('beforeend', html);

  // Update the address bar so refresh/share/link land on this chunk.
  // pushState adds a history entry; replaceState if you don't want back-button steps.
  history.pushState({ page: nextPage }, '', `/shoes?page=${nextPage}`);
  nextPage++;
}, { rootMargin: '600px' }); // start loading before the user hits the very bottom

io.observe(sentinel);

và crucially, crawlable fallback vẫn lives trong DOM — Đây là Điều gì Google follows:

<nav aria-label="Pagination">
  <a href="/shoes?page=2" rel="next">Next</a>
  <!-- rel="next"/"prev" is ignored by Google since 2019 but still used by Bing -->
</nav>

DevTools console: làm của bạn loader fire không có thực scroll?

Simulate Google tall viewport locally, sau đó kiểm tra liệu extra chunks loaded on của họ own. Trong Chrome DevTools, đặt rất tall custom device viewport (~1024×9000), reload, và chạy điều này trong Console để count Cách nhiều chunks là present với không manual scrolling:

// Count rendered product cards (adjust the selector to your markup)
console.log('cards rendered without scrolling:', document.querySelectorAll('#product-grid .product-card').length);
// If this is much higher than your per-page count, the loader is over-firing on height alone.

DevTools console: xác nhận paginated các URL thực ra exist

trước khi trusting fallback, verify mỗi ?page=N trả về thực, distinct nội dung máy chủ-side (không JS-chỉ route):

// Run in the console; a real paginated URL should return HTML containing products.
for (const n of [2, 3, 4]) {
  const html = await (await fetch(`/shoes?page=${n}`)).text();
  console.log(`page ${n}: ${html.includes('product-card') ? 'has products ✅' : 'EMPTY — JS-only? ❌'}`);
}

Bookmarklet: jump straight để trang được kết xuất-HTML kiểm tra

Drag điều này để của bạn bookmarks bar để open hiện tại URL trong Search Console’s URL Inspection Tool, nơi bạn sau đó đọc được kết xuất HTML (không nguồn) để see Cách far xuống Google captured nội dung:

javascript:(()=>{const u=encodeURIComponent(location.href);open('https://search.google.com/search-console/inspect?resource_id=&id='+u,'_blank');})();

Prove infinite scroll là indexable sau khi launch

Kiểm thử lazy-loaded sản phẩm grid không có conflating trình duyệt trạng thái

single screenshot từ tall trình duyệt window không phải đủ. Chạy giống nhau category URL qua điều này matrix và bắt đầu mỗi fresh-navigation case với trang rỗng bộ nhớ đệm hoặc được ghi lại, consistent bộ nhớ đệm state:

Fresh navigation và resizing là khác các kiểm thử. component có thể register của nó observer, calculate thresholds, hoặc fetch của nó đầu tiên batch chỉ during initialization; resizing đã-đang chạy trang có thể làm đó truyền Khi crawler-style navigation tại cuối dimensions fails, hoặc vice versa. Incremental scrolling là người dùng-path control, không substitute cho không-interaction chạy.

cho mỗi chạy, record:

• requested URL và cuối address-bar URL;
• viewport dimensions và liệu trang là loaded hoặc resized tại những điều đó dimensions;
• sản phẩm cards được kết xuất sau khi mỗi load;
• unique sản phẩm các URL trong thực <a href> các thuộc tính;
• duplicate, bị thiếu, hoặc cross-trang sản phẩm các URL;
• network các yêu cầu và trigger đó initiated mỗi additional batch;
• liệu trang/chunk boundaries cập nhật URL và survive refresh;
• relevant accessibility-tree nodes, names, vai trò, và link destinations.

Reconcile những điều đó được tính so với dự kiến catalog hoặc paginated-chunk inventory. Visible card count và unique link count là tách biệt assertions: grid có thể paint 48 cards trong khi exposing ít hơn crawlable sản phẩm links, duplicated destinations, hoặc controls đó là absent từ accessibility tree. giữ distinctive đầu tiên và cuối cùng SKU cho mỗi chunk so Bạn có thể detect tall viewport silently merging trang 2 vào trang 1.

Kiểm thử mỗi chunk as standalone URL

Kiểm thử để chạy: yêu cầu đầu tiên, middle, và cuối cùng paginated các URL trực tiếp với JavaScript disabled. Dự kiến kết quả: mỗi trả về ổn định, unique nội dung và thành công phản hồi không có requiring scroll. thất bại interpretation: URL layer là cosmetic hoặc vẫn phụ thuộc vào client interaction. Monitoring window: Immediate sau khi deployment. Rollback trigger: bất kỳ listed chunk các chuyển hướng để đầu tiên trang, trả về shared shell, hoặc thay đổi nội dung giữa các yêu cầu.

Kiểm thử crawler phát hiện không có interaction

Kiểm thử để chạy: Inspect được kết xuất DOM trước khi scrolling và extract pagination links. Dự kiến kết quả: Sequential chunks là linked qua thực absolute hoặc root-relative href các giá trị. thất bại interpretation: crawler có không path beyond đầu tiên loaded đặt. Monitoring window: Immediate. Rollback trigger: tiếp theo chunk tồn tại chỉ behind button handler hoặc scroll event.

Kiểm thử cho tall-viewport hợp nhất bug

Kiểm thử để chạy: Render đầu tiên chunk trong rất tall Chrome viewport, sau đó tìm kiếm DOM cho distinctive item từ tiếp theo chunk. Dự kiến kết quả: đầu tiên URL không absorb tiếp theo URL’s chính nội dung. thất bại interpretation: loader fires during kết xuất ngay cả không có người dùng interaction. Monitoring window: Immediate locally, sau đó recheck URL Inspection sau khi Google recrawls. Rollback trigger: Hai logical chunks xuất hiện as một document hoặc address bar không track chính visible chunk.

Tự kiểm tra: Infinite Scroll SEO

Five nhanh các câu hỏi on đang làm infinite scroll indexable. Pick câu trả lời cho mỗi, sau đó kiểm tra.

các tài nguyên worth của bạn time

My related writing

• JavaScript SEO Các vấn đề & Thực hành tốt nhất — my đầy đủ ghi-lên, including đó “Infinite scroll issues” (bản dịch) «Infinite scroll các vấn đề» section (hai các trang được lập chỉ mục as một) và đó “What Googlebot sees” (bản dịch) «Điều gì Googlebot sees» viewport figures.
• Đó Beginner Hướng dẫn để SEO kỹ thuật — nơi kết xuất và crawlability fit trong đó bigger picture.

My speaking

• Cách Tìm kiếm Hoạt động (SlideShare) — my walkthrough of crawling, kết xuất, lập chỉ mục, và xếp hạng, mà là đó backdrop để mỗi infinite-scroll decision. (My standing disclaimer áp dụng: “This is my understanding of systems… not going to be 100% complete or accurate.” (bản dịch) «Này là my understanding of các hệ thống… không going để là 100% hoàn tất hoặc chính xác.»)

Từ khoảng đó ngành

• Google Search Central, Cách sửa lazy-loaded nội dung — đó hiện tại, có thẩm quyền “Support paginated loading for infinite scroll” (bản dịch) «Hỗ trợ paginated loading cho infinite scroll» hướng dẫn.
• Google Search Central, Pagination, incremental trang loading, và của họ impact on Google Search — đó three UX patterns và đó rel=next/rel=prev deprecation.
• Matt G. Southern, Cách Google Crawl Các trang Với Infinite Scrolling (Search Engine Journal) — đó Mueller “two or three pages loaded on one page” (bản dịch) «hai hoặc three các trang loaded on một trang» lời giải thích of đó hợp nhất risk.
• Matt G. Southern, Google Martin Splitt Giải thích Vì sao Infinite Scroll Gây ra SEO Các vấn đề (Search Engine Journal) — “Googlebot doesn’t scroll,” (bản dịch) «Googlebot không scroll,» IntersectionObserver so với. scroll, và “test your implementations.” (bản dịch) «kiểm thử của bạn implementations.»
• Barry Schwartz, GoogleBot Crawl & Renders Tall, Với 9000px Cao Viewport? (Công cụ tìm kiếm Roundtable) — đó origin of đó tall-viewport lời giải thích.
• Matthew Edgar, SEO Friendly Infinite Scroll — đó “component pages” (bản dịch) «component các trang» cách diễn đạt (chunks đó hoạt động independently, ngay cả với JS off).
• Go Fish Digital, Cách Implement Infinite Scroll Cho SEO — an implementation-oriented walkthrough.
• Lumar, State of Pagination trong eCommerce — đó top-UK-fashion-retailer indexability analysis đó rated infinite scroll đó worst-performing pattern.

Nhật ký thay đổi