Ultimate SEO Guide to eCommerce Pagination

Intro

In this post we’ll outline the following:

• How we implement pagination for our eCommerce clients
• Examples of pagination options available to eCommerce brands  
• Common pitfalls we see with the implementation

Why is eCommerce pagination important to discuss for SEO?

It’s important that you tackle your eCommerce pagination set up for 2 core reasons:

1. To ensure Google can find your full product range and is not limited to only what’s on page 1 of your listings 
2. Similar to products you’ll have pagination for all of your blog content but also individual blog posts that may expand over 2-3 pages of content. It’s important that Google can find and index these pieces.

In addition to standard pagination reasoning, modern websites don’t usually opt for a standard next and previous, like how Farfetch use it here:

Instead, more and more eCommerce websites are opting for a click more button or an infinite scroll approach. Both of which we will mention and tackle further on in this post.

So first things first. Don’t take Google’s pagination announcement as literal as this:

You shouldn’t just remove all reference or thought for pagination. You still need to implement a logic for Google to follow and understand. Especially if you have a large product catalogue. In particular, standard eCommerce platforms like Shopify, BigCommerce and Magento still use this prev/next and it works. 

In short, Google still crawls prev/next so it’s fine to keep. If you don’t have it, as long as you have a similar linking logic across the series of pages this is fine too. 

How to implement eCommerce pagination for SEO?

1. Either internally link as standard between the URLs to define a series of pages, or keep the standard prev/next links. 
2. Implement a no-index, follow tag on the page series e.g. page=2 has a meta no index, follow tag on the page 
3. Add self-reference canonical on page 1, not essential but recommended as precaution to re-enforce to Google this is the URL we want to be ranked
4. Implement ‘Page 2’ etc into the title tags of the series of pages e.g. “Page 2 of Men’s Shirts”
5. Here’s an example of best practice code:

Main URL: https://www.example.com/landing-page

<link rel=”canonical” href=”https://www.example.com/landing-page”>

<a href=”https://www.example.com/landing-page?page=2″>

Middle of page series: https://www.example.com/landing-page?page=3

<meta name=”robots” content=”noindex, follow”>

<a href=”https://www.example.com/landing-page?page=2“>

<a href=”https://www.example.com/landing-page?page=4″>

Last page of series:https://www.example.com/landing-page?page=9

<meta name=”robots” content=”noindex, follow”>

<a href=”https://www.example.com/landing-page?page=8“>

Note: as of writing some SEO platforms like Shopify and Big Commerce would be using the prev/next links which is fine to keep too. Just keep the same meta-logic as above.

Why did we change the canonical tag to a no,index tag?

Even though it worked to clean up so many of our clients indexes and avoided duplication – technically it’s not the best way to use canonical tags and therefore Google may ignore it. 

It was originally mentioned in Google’s old prev/next documentation

However, based on the recent announcement it’s recommended to use the no-index, follow tag as it’s a stronger signal to Google that you want these page to not be in the index. The reasoning being that page 2 of a series is not the same as the original page therefore the canonical tag is wrong. 

https://www.searchenginejournal.com/pagination-seo/295627/#close

Finally, maintaining the “follow” aspect to the no index,follow meta tag will help to ensure Google still follows the links on this page and read your full product catalogue. 

What are the different pagination options available to eCommerce websites?

Standard click next pagination buttons

Popular with functional eCommerce websites e.g. Amazon and Farfetch use this approach 

Amazon.co.uk, books under £5 landing page

Farfetch, beachwear landing page

Infinite scroll

Using a pure infinite scroll seems to be out of fashion at the moment for eCommerce websites. For good reason, it’s not the best approach for mobile shoppers as they’re not entirely in control of the page experience and makes it difficult to reach the footer.

View-more expandable listing

The view more button is a common approach at the moment. 

The benefit being from a design perspective as the page remains cleaner, UX teams often prefer it as the user can still access the footer on mobile and the user is in control of the content more. 

Made.com Sofa page, view more option

ASOS.com Womens shoes page

Mix of view all and pagination

The final option is a mix of both, which is what OKA.com have opted for:

https://www.oka.com/furniture/sofas-and-chairs/armchairs/

How to implement pagination with infinite scroll & view more buttons

As mentioned, it’s common for eCommerce site’s to opt for the ‘view more’ option for listing pages now 

Even if you decide to go with infinite scroll ( or any of the above mentioned options) it’s still recommended to implement pagination in the code as you would for a normal pagination series.

Why?

Google struggles with any ‘onclick’ directives used with Javascript so if you’re using this it’s likely Google isn’t seeing the full list of products on the page, and therefore struggling to index them. 

Using the example below from made.com there’s no internal link for Google to follow or action to see the remaining 552 products on this listing page:

As you can see with the code here:

Instead, a standard implementation would be the classic pagination that Farfetch opt for:

However if Farfetch decide not to implement the internal links then they’d be in the same position as made.com above, there’s no internal link for Google to follow to read and index their entire product catalogue. 

Even if you opt for the infinite scroll/click more option shown by made.com above we’d still recommend implementing the internal internal links in the code so Google can crawl and index all of the products. 

Finally, ensure that when Javascript is disabled there is still an internal link displayed to point to the next page urls. See this example with OPUMO.com, once Javascript is disabled these links appear for Google and for users:

With javascript

What are the common issues with pagination for eCommerce websites?

We’ve work on a tonne of eCommerce websites and we see the same problems occur when it comes to pagination, below are the most common with reasons why they are problems:

• Missing no-index directive on the page series URLs

Having the above issues can cause a very messy index e.g.

The above example has so many duplicate pages caused by pagination errors, this can confuse Google and potentially cause ‘Page 5’ to rank for a key non brand term.

• Not doing having internal pagination links with ‘view more’ button

As illustrated with the Made.com example above, it’s likely that Google is not crawling the full product catalogue 

• Having an endless request of pages in the series

This is a nightmare. Essentially a CMS bug can occur where the internal link series continue forever which Google follows endlessly. Creating and indexing hundreds of empty pages with 0 products on it. To identify this, just get a listing page URL and crawl with screaming frog.

This occurs when you do not specify an end to the series, therefore if page 8 is the end, page 8 will still link to page 9 and onwards. This will either create the loop mentioned above or resolve a 404.

• Pointing the canonical to a ?page=1 parameter

This an easy, common mistake but some eCommerce websites will internally link page 2 of the series to a page 1 parameter as well as the canonical.

There shouldn’t be a page 1 parameter. Page 1 should be the clean URL which is your landing page. 

If this is a requirement from the developers then you can implement a canonical from the page 1 parameter to the clean url e.g. https://www.made.com/sofas-and-armchairs/sofas?page=1

• Browser back button should take you to the same place you left off

Again this is common for eCommerce sites to neglect. Here’s the scenario:

• A user scrolls through hundreds of products to page 3 of your listing page
• User finds product they like and clicks to go to the PDP
• User is put off by an aspect of material on the PDP and clicks the back button to return to the listing

At this stage if you take the user back to the top of the listing page that they’ve already spent ages scrolling through then you are highly likely to lose that user. 

Instead you should implement an option like TMLewin, once you click the back button in your browser you are then taken to the listing that has that PDP at the top e.g.

https://www.tmlewin.co.uk/suits/?sc=true&page=4

E.g. if you click this link to go to the PDP, once you click back you are taken to the listing page with this exact same product at the top above the fold i.e. you are not taken back to page 1.