Infinite scrolling, or “unpagination” as you may have heard it referred as, is a technical implementation where new content for a web page is appended to the bottom of the page dynamically, without the need for the user to click a “next page” or similar button.
You have probably seen it in action on social media pages, where Facebook for example will introduce new content to your newsfeed as you scroll, but the technique is increasingly being introduced to ecommerce websites.
But of course, where ecommerce websites are concerned, search engine optimisation is a big consideration, so how can you be sure that your implementation of infinite scroll isn’t costing you search visibility.
How infinite scroll affects SEO
Despite the ability of search engines to understand JavaScript improving of late, implementing advanced features that utilise JavaScript, such as infinite scroll, can often have implications for organic search performance.
Search engines sometimes find it difficult to accurately emulate human behaviour (such as a click on a button to load more products or content) meaning that they don’t always see a true representation of the webpage. This can mean that products and content are not crawled or indexed by search engines, which ultimately means a loss in traffic and conversions. To ensure full ‘crawlability’, each product or article must have a unique URL that is linked within the site, as opposed to just loaded dynamically with JavaScript.
Implementing infinite scroll correctly
An infinite scroll page must produce a paginated series alongside it, to ensure full compatibility within organic search. This will allow for the implementation of rel ‘next’ and ‘prev’ tags within the head section of the source code, enabling search engines to fully understand the paginated series whilst also allowing for physical links to be crawled.
To avoid duplicate content issues it is important to ensure that the content is divided across the series with no overlap, so each paginated page contains unique links to the products or articles. As shown below:
It is crucial that your URLS are structured correctly to handle the pagination. As each page is required to have its own individual URL, it is best to avoid using hashbangs (#) within the structure. Should you choose to use parameters within your structure, it would be advisable to declare these within Google Search Console.
Good URL: https://www.example.com/category?page-3 or https://www.example.com/category/page-3
Bad URL: https://www.example.com/category#page-3
Using Canonicals on Paginated Pages
The canonical tag should be used on paginated pages, just like any other web page. Each page within the series should canonicalise itself. Below you can see both a good example and a bad example of utilising the canonical tag within pagination.
Bad Use of Canonicals:
https://www.example.com/category?page-3<link rel="canonical" href="https://www.example.com/category?page-3 " />
Bad Use of Canonicals:
https://www.example.com/category?page-3
<link rel="canonical" href="https://www.example.com/category?page-1 " />
Using history.pushState
We recommend that history.pushState is implemented within any infinite scroll page. This will change the URL as the user scroll downs the page, allowing webmasters to add history entries as a user interacts with their web page.
This can be utilised to ensure that a user, who for example clicks through onto a piece of content within the infinite scroll can then return to the part of the infinite scroll page they were previously up to. There are 3 main parameters used with the history.pushState:
- State object
- Title – Please note that as of 20/10/16 this is not currently supported in Firefox
- URL – The URL parameter is used to trigger new URLs for crawlers to find and the user to access (e.g. the next page within a series)
John Mueller, Webmaster Trends Analyst at Google, has created this demo to show how an infinite scroll should be implemented for search. Note how the URL changes as you scroll down the page, adding a ‘page=’ parameter and how rel ‘next’ and ‘prev’ are implemented within the <head> tags of the source code.
Post implementation
It is important to test your implementation to ensure that you have avoided any negative impact on your organic search traffic or rankings.
One common issue is having accessible ‘out of bounds’ pages not returning as 404 page. For example, you may have 10 pages in your series but page 11 onwards may still be returning a 200 status code. Take steps to ensure that this problem is identified and addressed.
It is also recommended that you fully user test your infinite scroll, ensuring that visitors are still engaging with your website and successfully moving through product and article pages.
