Stay organized with collections
Save and categorize content based on your preferences.
Thursday, February 13, 2014
Your site's news feed or pinboard might use
infinite scroll—much to your
users' delight! When it comes to delighting Googlebot, however, that can be another story. With
infinite scroll, crawlers cannot always emulate manual user behavior—like scrolling or
clicking a button to load more items—so they don't always access all individual items in the
feed or gallery. If crawlers can't access your content, it's unlikely to surface in search
results.
To make sure that search engines can crawl individual items linked from an infinite scroll page,
make sure that you or your content management system produces a paginated series (component pages)
to go along with your infinite scroll.
Infinite scroll page is made "search-friendly" when converted to a paginated series—each
component page has a similar <title> tag declared in the
<head> tag on the page.
You can see this type of behavior in action in the
infinite scroll with pagination demo
created by Webmaster Trends Analyst,
John Mueller. The demo illustrates some
key search-engine friendly points:
Coverage: All individual items are accessible. With traditional infinite
scroll, individual items displayed after the initial page load aren't discoverable to crawlers.
No overlap: Each item is listed only once in the paginated series (for example, no duplication of items).
Search-friendly recommendations for infinite scroll
1. Before you start
Chunk your infinite-scroll page content into component pages that can be accessed when
JavaScript is disabled.
Determine how much content to include on each page.
Be sure that if a searcher came directly to this page, they could easily find the exact item
they wanted (for example, without lots of scrolling before locating the desired content).
Maintain reasonable page load time.
Divide content so that there's no overlap between component pages in the series (with the
exception of buffering).
The example on the left is search-friendly, the right example isn't—the right example
would cause crawling and indexing of duplicative content.
2. Structure URLs for infinite scroll search engine processing
Each component page contains a full URL. We recommend full URLs in this situation to minimize
potential for configuration error.
Good:
example.com/category?name=fun-items&page=1
Good:
example.com/fun-items?lastid=567
Less optimal:
example.com/fun-items#1
Test that each component page (the URL) works to take anyone directly to the content and is
accessible and referenceable in a browser without the same cookie or user history.
Any key and value URL parameters should follow these recommendations:
Be sure the URL shows conceptually the same content two weeks from now. Avoid relative-time
based URL parameters:
example.com/category/page.php?name=fun-items&days-ago=3
Create parameters that can surface valuable content to searchers. Avoid non-searcher
valuable parameters as the primary method to access content:
example.com/fun-places?radius=5&lat=40.71&long=-73.40
3. Implement replaceState and pushState
Implement
replaceState and pushState
on the infinite scroll page. The decision to use one or both is
up to you and your site's user behavior. That said, we recommend including pushState
(by itself, or in conjunction with replaceState) for the following cases:
Any user action that resembles a click or actively turning a page.
To provide users with the ability to serially backup through the most recently paginated content.
4. Test
Check that page values adjust as the user scrolls up or down.
Verify that pages that are out-of-bounds in the series return a 404 response (for
example, example.com/category?name=fun-items&page=999 should return a
404 response if there are only 998 pages of content).
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],[],[[["\u003cp\u003eInfinite scroll can hinder search engine crawling, making it difficult for content to appear in search results if not implemented correctly.\u003c/p\u003e\n"],["\u003cp\u003eTo make infinite scroll search-engine friendly, create a paginated series of component pages that are accessible without JavaScript, ensuring each item is uniquely accessible through a URL.\u003c/p\u003e\n"],["\u003cp\u003eStructure URLs for each component page using query parameters, avoiding relative time-based or non-search-valuable parameters.\u003c/p\u003e\n"],["\u003cp\u003eImplement \u003ccode\u003ereplaceState\u003c/code\u003e or \u003ccode\u003epushState\u003c/code\u003e to enhance user experience and enable navigation through paginated content.\u003c/p\u003e\n"],["\u003cp\u003eThoroughly test your implementation to verify URL adjustments, handle out-of-bounds pages with 404 responses, and address potential usability issues.\u003c/p\u003e\n"]]],["To ensure search engines can crawl content on infinite scroll pages, create a paginated series of component pages. Each page should have a unique, full URL that directly accesses its content without requiring user history or cookies. Avoid overlapping content between pages and use descriptive URL parameters. Implement `pushState` or `replaceState` for user navigation. Verify page values adjust correctly and out-of-bounds pages return a 404 error. Content should also be able to be accessible with Javascript disabled.\n"],null,["# Infinite scroll search-friendly recommendations\n\n| It's been a while since we published this blog post. Some of the information may be outdated (for example, some images may be missing, and some links may not work anymore). Review our [current best practices for infinite scroll](/search/docs/crawling-indexing/javascript/lazy-loading#paginated-infinite-scroll).\n\nThursday, February 13, 2014\n\n\nYour site's news feed or pinboard might use\n[infinite scroll](https://infinite-scroll.com/)---much to your\nusers' delight! When it comes to delighting Googlebot, however, that can be another story. With\ninfinite scroll, crawlers cannot always emulate manual user behavior---like scrolling or\nclicking a button to load more items---so they don't always access all individual items in the\nfeed or gallery. If crawlers can't access your content, it's unlikely to surface in search\nresults.\n\n\nTo make sure that search engines can crawl individual items linked from an infinite scroll page,\nmake sure that you or your content management system produces a paginated series (component pages)\nto go along with your infinite scroll.\nInfinite scroll page is made \"search-friendly\" when converted to a paginated series---each component page has a similar `\u003ctitle\u003e` tag declared in the `\u003chead\u003e` tag on the page.\n\n\nYou can see this type of behavior in action in the\n[infinite scroll with pagination demo](https://scrollsample.appspot.com/items)\ncreated by Webmaster Trends Analyst,\n[John Mueller](https://johnmu.com/). The demo illustrates some\nkey search-engine friendly points:\n\n- **Coverage**: All individual items are accessible. With traditional infinite scroll, individual items displayed after the initial page load aren't discoverable to crawlers.\n- **No overlap**: Each item is listed only once in the paginated series (for example, no duplication of items).\n\nSearch-friendly recommendations for infinite scroll\n---------------------------------------------------\n\n### 1. Before you start\n\n1. Chunk your infinite-scroll page content into component pages that can be accessed when JavaScript is disabled.\n2. Determine how much content to include on each page.\n 1. Be sure that if a searcher came directly to this page, they could easily find the exact item they wanted (for example, without lots of scrolling before locating the desired content).\n 2. Maintain reasonable page load time.\n3.\n Divide content so that there's no overlap between component pages in the series (with the\n exception of buffering).\n\n The example on the left is search-friendly, the right example isn't---the right example would cause crawling and indexing of duplicative content.\n\n### 2. Structure URLs for infinite scroll search engine processing\n\n1.\n Each component page contains a full URL. We recommend full URLs in this situation to minimize\n potential for configuration error.\n\n - **Good** : `example.com/category?name=fun-items&page=1`\n - **Good** : `example.com/fun-items?lastid=567`\n - **Less optimal** : `example.com/fun-items#1`\n2. Test that each component page (the URL) works to take anyone directly to the content and is accessible and referenceable in a browser without the same cookie or user history.\n3. Any key and value URL parameters should follow these recommendations:\n\n - Be sure the URL shows conceptually the same content two weeks from now. Avoid relative-time based URL parameters: `example.com/category/page.php?name=fun-items&days-ago=3`\n - Create parameters that can surface valuable content to searchers. Avoid non-searcher valuable parameters as the primary method to access content: `example.com/fun-places?radius=5&lat=40.71&long=-73.40`\n\n### 3. Implement `replaceState` and `pushState`\n\n\nImplement\n[`replaceState` and `pushState`](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history)\non the infinite scroll page. The decision to use one or both is\nup to you and your site's user behavior. That said, we recommend including `pushState`\n(by itself, or in conjunction with `replaceState`) for the following cases:\n\n- Any user action that resembles a click or actively turning a page.\n- To provide users with the ability to serially backup through the most recently paginated content.\n\n### 4. Test\n\n1. Check that page values adjust as the user scrolls up or down.\n2. Verify that pages that are out-of-bounds in the series return a `404` response (for example, `example.com/category?name=fun-items&page=999` should return a `404` response if there are only 998 pages of content).\n3. Investigate potential [usability implications introduced by your infinite scroll implementation](https://www.nngroup.com/articles/infinite-scrolling/).\n\n\nWritten, reviewed, or coded by\n[John Mueller](https://johnmu.com/),\n[Maile Ohye](/search/blog/authors/maile-ohye), and\n[Joachim Kupke](https://plus.google.com/112272126277656534067?rel=author)"]]
