Pagination can be a tricky SEO issue when you get it wrong. This is especially the case for an ecommerce site with a large number of products that will no doubt heavily rely on pagination so that users can find what they are looking for.<\/p>\n
You can take the concepts explained in this article to any pagination implementations anywhere, but given pagination\u00a0issues tend to be more prevalent on\u00a0ecommerce<\/a>\u00a0sites, and I have got a lot of experience dealing with them \u2014\u00a0I am going to focus on this area.<\/p>\n We are going to start with:<\/strong><\/p>\n Pagination in the context of a website is the sequencing of archive pages that are used to link to other pages found lower down within a site’s hierarchy\/structure. The most common examples of these types of pages are found within either ecommerce category pages or blog archive pages.<\/p>\n Pagination is a crucial concept to understand when it comes to improving your site’s structure and internal linking, a concept I have recently written about\u00a0on my blog<\/a>.<\/p>\n If you aren’t quite sure what pagination looks like, you have definitely seen it before!<\/p>\n The two most common implementations of pagination come in the form of load more buttons and a numbered sequence at the bottom of the page.<\/p>\n Both work, but utilizing a load more button has some additional considerations which I will delve into later in this article.<\/p>\n Superdry<\/strong><\/p>\n <\/p>\n <\/p>\n AO (Appliances Online)<\/strong><\/p>\n <\/p>\n <\/p>\n Infinite scrolling is also a consideration for navigating archives. However, this is becoming less popular as studies have shown it has some negative\u00a0UX implications<\/a>, such as not being able to reach the footer of a page easily.<\/p>\n Less than optimal implementations of pagination cause some\u00a0severe issues<\/strong>, especially with ecommerce websites. I have personally seen issues with pagination cause a variety of problems, including:<\/p>\n In this article, I am going to run through some key things you need to understand about pagination to make sure your e-commerce site is implementing it in a search-friendly way.<\/p>\n Utilizing JavaScript to load the next page in your paginated sequence client-side without a full page refresh is a great way to provide a nice experience for your ecommerce users.<\/p>\n I am a big advocate of utilizing AJAX, and I recommend you consider using it for pagination on your site. However, you need to be\u00a0extremely careful\u00a0<\/strong>with how you implement this.<\/p>\n AJAX-based pagination is very common across ecommerce sites, and unfortunately, it is also very common for it to be implemented in a non-SEO friendly way. When it comes to implementing pagination via AJAX, the main criteria is to ensure\u00a0that the\u00a0href links to the next page in the sequence still exist<\/strong>.<\/p>\n That means within your product archive, links to subsequent pages such as example.co.uk\/shop\/shoes\/?page=2 should still be visible within the HTML source of the page or at the very least\u00a0within the DOM<\/a>\u00a0created by the browser.<\/p>\n The best way to see what the browser has constructed in the DOM is to open up dev tools (usually done by pressing F12) and then head\u00a0to the ‘Elements’ section on Chrome.<\/p>\n <\/p>\n <\/p>\n What is displayed here will be different from what you see when viewing source, as this shows what the browser has actually rendered,\u00a0including any JavaScript that has been executed.<\/strong><\/p>\n Be aware Google may not always see these links depending on how quickly the page renders. If you want to check that, I recommend getting familiar with the Google Search Console\u00a0URL inspector tool<\/a>.<\/p>\n If you can’t see these links within either, that is because you are more than likely loading page two onwards of the archive using JavaScript without providing a non-JavaScript alternative, i.e., classic href links.<\/p>\n If your pagination functions this way,\u00a0Google will not be able to see the next page in the archive<\/strong>. This happens because Googlebot and other search bots will not click elements that execute JavaScript in the same way that a user does.<\/p>\n So, while\u00a0users can get the nice AJAX-based navigation for your pagination, Googlebot will still need to be able to navigate to page 2 onwards with each page in the sequence\u00a0containing a unique list of products without overlaps<\/strong>.<\/p>\n An example of a site doing this correctly is Argos. On their category pages (like this\u00a0one<\/a>), when you inspect elements on their pagination, you can see href links to each page in the sequence.<\/p>\n BE AWARE<\/strong><\/p>\n These links ideally need to be available in the HTML source, not just visible by inspecting the element. If they are only visible when you inspect the element and you can’t see them in the HTML source, you are going to be injecting them with JavaScript, which can make it less likely for Google to see the links.<\/p>\n On the Argos site, you can see that upon clicking the button that links to page 2, a new page, load is not triggered;\u00a0you are instead taken back to the top of the page, and all products on page 2 are loaded. This is the behavior users will see, while Google will follow the link and be taken to\u00a0this page<\/a>.<\/p>\n You can tell that this is done via AJAX by either using a plugin that monitors document HTTP header requests like\u00a0this one<\/a>\u00a0or by just opening-up the network tab in chrome dev tools and checking for ‘document’ requests when you navigate to a different page using pagination.<\/p>\n This is a great example of implementing AJAX\u00a0based pagination correctly.<\/strong><\/p>\n They also even use pushState from the\u00a0HTML5 history API<\/a>\u00a0to update the URL, so it looks like there has been a full page refresh.<\/p>\n While\u00a0less of a requirement, I would also recommend implementing this with an AJAX-based pagination system. You can see an example of the history API in practice created by John Mueller with a combined infinite scrolling \/ numbered pagination sequence\u00a0here<\/a>.<\/p>\n If this seems like a lot to consider, there are libraries out there that will make this process easier, such as this\u00a0one<\/a>.<\/p>\n If rather than a numbered pagination or infinite scrolling you are going for the load more button approach, you also need to consider some additional things.<\/p>\n Following the previous advice, even if you added the href link on the load more, you are still making your site unnecessarily deep.<\/p>\n This is because unlike numbered pagination that allows you to add deep links from page 1 up to 6 (for example), you will only be linking from page 1 to page 2 then page 2 to page 3 and so on.<\/p>\n This will contribute to you having a\u00a0deep site structure<\/strong>\u00a0as the click depth to reach product pages deeper in the site increases.<\/p>\n This is going to have a\u00a0negative impact<\/strong>\u00a0on how link equity is distributed to product pages deeper within the site hierarchy. This will, in turn, negatively impact how well your product pages can rank for\u00a0long-tail search queries<\/strong>.<\/p>\n To circumvent this, what you could do is implement both a load more and numbered pagination. Then you get the UX benefits of a load more button but also allow users to jump to a specific page and let Google do the same.<\/p>\n An example of a load more and numbered pagination combined.<\/i><\/p>\n This option prevents the issues caused by load more buttons when it comes to site structure, and lets you take advantage of the benefits of numbered pagination.<\/p>\n <\/p>\n Numbered pagination shortens click depth to paginated pages deeper within your archive.<\/i><\/p>\n <\/p>\n Another alternative<\/strong>\u00a0is to implement the numbered pagination but wrap it within a <noscript> tag.<\/p>\n This means that when a user has JavaScript disabled, they will then see the numbered pagination and can navigate the site using that. The downside to this option is it isn’t 100% certain that Google will actually look at the content within the noscript tag.<\/p>\n The last update we heard, Google tends to\u00a0ignore content within a noscript<\/a>, so test this carefully.<\/p>\n\n
Steps to Take to Ensure Ecommerce Pagination Is Search Friendly<\/h3>\n
\n
What Is Pagination?<\/h2>\n
What Does Pagination\u00a0Look Like on Ecommerce Sites?<\/h2>\n
Load More Pagination Button Examples:<\/h3>\n
Asos<\/h3>\n
Numbered Sequence Pagination Examples:<\/h4>\n
Argos<\/h3>\n
Why Should I Focus on Pagination?<\/h2>\n
\n
1. Be Careful with JavaScript<\/h2>\n
How Do I See What Is in the DOM?<\/h3>\n
Link Is the DOM, but Not the HTML Source<\/h4>\n
2. Think Twice About Load More Buttons<\/h2>\n