SEO-friendly pagination - practical examples using load more and infinite scroll

Learn some 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
Do

Use self referencing canonicals

Use a tags to link to paginated pages

Make sure each item on the page is unique to that page (e.g. item 10  is not on page 1, 2, 3 etc)

If the page has some unique content describing the page, stick it on  the first page only

E.g. use a parameter such as ?page=1, ?page=2 etc

Use history state to set the URL if using JS to implement pagination

Use server side rendering and make sure all items are returned in the  source code

Don't

Don’t direct canonical to the first page in the series

Don’t use JS event handlers to navigate between pages - Googlebot may  not follow them (Googlebot looks for a tags).

Don’t use rel=next / prev - this is now defunct and not used by Google

Don’t use rel=noindex on paginated pages - you want Googlebot to index  paginated pages

Avoid putting the same content on every paginated page as this may  cause duplicate content issues

Common pitfalls
Using a single URL

The problem

Many 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 with.

Why is this an issue?

If you're 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 10

The problem

Some 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.

Why is this an issue?

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 pages

The problem

For 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.

Why is this an issue?

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 and 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 :) .

Other Posts

All Posts