This blog demonstrates practical ways to implement SEO friendly pagination using ‘standard’ pagination, load more functionality or infinite scroll.

What is pagination?

Pagination is the act of splitting out content onto different web pages. This may be to split out chapters of a book, products onto additional pages or simply to stop every item loading onto one page (think load times). Typically, pagination is implemented using links at the bottom of a page allowing the user to navigate the series:

This ‘standard’ pagination (above), is not the only way websites split out content – some websites may choose to use different functionality such as infinite scroll or a load more button (e.g. load more items once an action is complete such as scrolling or clicking a button). While this may offer the best functionality to your users, it may not be so good for Googlebot which will not emulate user behaviour. This can result in Googlebot not finding or indexing content in your paginated series – and that means you could be missing out on some valuable traffic.

But it is possible to keep both your users and Googlebot happy – it’s all in the implementation.

In this post, we provide practical demonstrations of how to implement pagination using infinite scroll, load more and ‘standard’ pagination.

Client Side vs Server Side Rendering

Before looking at the examples, it’s worth talking about client side and server side rendering.

Server side rendering returns a page’s content when a GET request is made. If you look in the source code, you’ll be able to see the server side returned code. Googlebot likes server side rendering as it can ‘see’ all the pages content.

Client side rendering is when the page is rendered with the use of JavaScript after the original HTML document is returned from the server – this could involve fetching and rendering additional data when a user completes an action such as clicking a button or submitting a form.

This is important, because Googlebot will struggle to ‘see’ content on webpages using client side rendering. But if you are implementing infinite scroll or load more, you will no doubt be using JavaScript to fetch additional items when you scroll to the bottom of the page, so how can you make infinite scroll SEO friendly?

The answer is that you need to use both; a user in the browser will use client side rendering so they can use functionality like infinite scroll, but Googlebot will use links and server side rendering to read content in the paginated series.

Pagination best practice

Before we get into the examples, there are a couple of finer detail recommendations and common pitfalls that are often seen in the wild.

Quick guide

#DoDon’t
Canonical tagUse self referencing canonicalsDon’t direct canonical to the first page in the series
LinksUse a tags to link to paginated pagesDon’t use JS event handlers to navigate between pages – Googlebot may not follow them (Googlebot looks for a tags).
Page itemsMake sure each item on the page is unique to that page (e.g. item 10 is not on page 1, 2, 3 etc)
Rel= next/prevDon’t use rel=next / prev – this is now defunct and not used by Google
Rel=noindexDon’t use rel=noindex on paginated pages – you want Googlebot to index paginated pages
OptimisationIf the page has some unique content describing the page, stick it on the first page onlyAvoid putting the same content on every paginated page as this may cause duplicate content issues
Use a unique URL for paginated pageE.g. use a parameter such as ?page=1, ?page=2 etc
History state (for sites implementing pagination with JS)Use history state to set the URL if using JS to implement pagination
Server side renderingUse server side rendering and make sure all items are returned in the source code

Common pitfalls

#ProblemWhy is this an issue?
Using a single URLMany sites now use a front end JS framework – often these frameworks are implemented as a single page application. You click a button, or scroll to the bottom of the page and more content is AJAXed onto the page. You need to create additional URLs that Googlebot can crawl and associated content withIf your updating the same page with additional items using JS, Googlebot will see a single URL and and likely will not see all the additional items AJAXed onto the page
?Page=10 contains all items from page 1 to 10Some sites use ‘load more’ functionality when the user reaches the bottom of the page. This adds more items to the page but results in the paginated page containing all the items from the current page plus all the items from the previous page / pages.You create duplicate pages and results in Googlebot ranking various pages in your series above the first page (which is hopefully the most relevant)
Content on paginated pagesFor example, you are selling gold rings and the first page contains 50 gold rings and some content about them. This content is then used on every paginated page in the series.This creates similar pages and again you might see odd paginated pages in your series ranking.

Pagination examples

The examples below show how to implement pagination using ‘standard’ pagination, load more and infinite scroll.

Standard pagination

Example page: standard pagination

This is the most simple – you link from the first page to the last page.

  • Each paginated page has unique items / content
  • Page is rendered using server side
  • Uses a tags /  crawlable links
  • Each page has a unique URL
  • Self referencing canonical 

Load more

Example page: load more

With load more the user clicks a button to AJAX more items onto the page. Googlebot, however, will find and crawl the links.

  • Each paginated page has unique items / content
  • Page is rendered using server side
  • Uses crawlable links
  • Each page has a unique URL
  • Self referencing canonical
  • Load more button uses client side rendering to add more items to the page and updates the URL. Reloading the page returns unique items for the given page 

Note – the implementation shown on the example page could also use infinite scroll e.g. if you land on page 2 infinite scroll could be used when you reach the top of the page to show page 1.

Infinite scroll

Example page: infinite scroll

Infinite scroll means new items are AJAXed onto the page when the user reaches the bottom of the page. Googlebot, however, will find and crawl the links.

  • Each paginated page has unique items / content
  • Page is rendered using server side
  • Uses crawlable links
  • Each page has a unique URL
  • Self referencing canonical
  • Scrolling to the bottom of the page uses client side rendering to add more items to the page and updates the URL. Reloading the page returns unique items for the given page 

Conclusion

There you have it – pagination which allows you to have the desired functionality for your users yet still SEO friendly for Google. If you user another pagination implementation, we’d love to hear from you 🙂 .