Official Google Webmaster Central Blog: Infinite scroll search-friendly recommendations

Webmaster Central Blog

Official news on crawling and indexing sites for the Google index

Infinite scroll search-friendly recommendations

jueves, febrero 13, 2014

infinite scroll

Infinite scroll page is made “search-friendly” when converted to a paginated series -- each component page has a similar <title> declared in the <head>.infinite scroll with pagination demoJohn Mueller

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 (i.e., no duplication of items).

Search-friendly recommendations for infinite scroll

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 (e.g., 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.

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/referenceable in a browser without the same cookie or user history.
Any key/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

Implement replaceState/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:

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.

Test!

Check that page values adjust as the user scrolls up or down. John Mueller’s infinite-scroll-with-pagination site demonstrates the scrolling up/down behavior.
Verify that pages that are out-of-bounds in the series return a 404 response (i.e., example.com/category?name=fun-items&page=999 should return a 404 response if there are only 998 pages of content).
Investigate potential usability implications introduced by your infinite scroll implementation.