Infinite Scroll – Good for UX, Bad for Googlebot?

The interaction design pattern known as “infinite scroll” is not new, but it is becoming very popular with companies choosing to re-vamp their current website or build a new website.  But what does this mean for SEO?

Autopagerize, unpaginate, endless pages, infinite scroll- whatever you want to call it, this website design fundamentally pre-fetches content from subsequent pages and adds it to a user’s current page.

Most times, web designers will choose to incorporate an infinite scroll design when it is important for a user to click next page — but usually doesn’t, or when the total amount of content is too large to show on an initial load.

Typically, different web designs yield both advantages and differences.

table

Most users enjoy the infinite scroll website design, but when it comes to the SEO friendliness your site, web-crawlers cannot always act as a human would act on a website.  Let’s take Googlebot for example, Google’s version of a web-crawler.

google bot

Googlebot’s robot brain and robot hands don’t know how to scroll or a click a button to load more content or items on a webpage.  And we all know what happens when Googlebot cannot access a website’s content… that’s right – your website will not surface in Google search results.

So what happens when you want an infinite scroll design for your website, but also want Googlebot to find your site and index it in the search results?

Well, to make sure that search engines can crawl each individual item or piece of content linked from an infinite scroll page, you need to make sure your content management system (CMS) produces paginated series.

paginate

Infinite Scroll Made “Search Friendly” when Converted to Paginated Series

In case your were wondering, this is an example of what a paginated series could look like in terms of an infinite scroll webpage:

webpage For all you web developers out there that are reading this, basically:

Each component page has a similar <title> with rel =“next/prev” values declared in the <head>

Not a developer?  That’s fine- here is the same thing in plain English:

All pieces of content available on your infinite scroll webpage are also accessible as individual pages.

Much like rel=“canonical” acts as a strong hint for duplicated content on your website, using the HTML link rel=“next” and rel=“prev” indicates a specific relationship between component URLs in a paginated series.  Other uses for this aside from infinite scrolling can be an article divided into several component pages, a product category [link to: http://googlewebmastercentral.blogspot.com/2014/02/faceted-navigation-best-and-5-of-worst.html] with items spread across several pages, or a forum thread divided into a sequence of URLs.

 URL Optimization in Infinite Scrolling Paginated Series

To improve the indexing of paginated content (e.g. page=1, page=2, page=3) of the website, be sure to

  • Add rel=“canonical” to page=all while making sure that it’s still a good user experience and the page loads quickly.
  • Use pagination markup with rel=“next” and rel= “prev” to consolidate indexing properties, such as links, from the component pages/URLs to the series as a whole
  • Only include canonical URL’s in sitemap.
  • Do not duplicate content on component pages
  • Assign a full URL for each component page
  • Test that each component page URL works to take anyone directly to the content

This will give Googlebot a strong hint that you would like him to consolidate indexing properties from the component pages and URLs to the series as a whole and send users to the most relevant page or URL (like the first bit of content on the infinite scrolling page)

Increase that UX just a Bit More!

One last piece of advice from the SEO team at 451: Manipulate the browser history by implementing a history.pushState() or history.replaceState() on your infinite scroll page.  This will provide users with the ability to serially backup through the most recently paginated content.

Melissa Sciorra

Melissa Sciorra, SEO Director. Follow her @mel_arroics!

Leave a Reply

Your email address will not be published. Required fields are marked *