How to switch from classic pagination to load more or infinite scroll

Switching from classic pagination to load more

There are many reasons for companies to switch from standard pagination to load more or infinite scroll. Load more and infinite scroll are modern forms of website pagination that can provide a good user experience. However, both of these pagination styles pose major concerns that should be taken into account during technical code implementation.

Classic pagination vs load more vs infinite scroll

If not implemented correctly, load more or infinite scroll pagination could lead to the Googlebot’s inability to crawl your website. As a result, significant portions of your website could drop from the search engine results page (SERP).

In this article, you’ll learn why your webmasters and developers must implement Google’s standard best practices for pagination.

Pros and cons of load more pagination

The primary benefit of load more pagination is the ability to have content on a single page, instead of having to load new pages. As a result, there is a significant increase in positive user experience. 

The primary con of load more pagination is that users’ computers are often incapable of handling a very large number of results on the same page. This could lead to loading issues if the content was explored by the Googlebot. However, as we discuss in the FAQs at the bottom of this page, Google is unable to click on buttons and, for this reason, will most likely not interact with the load more button.

How to implement load more pagination

Developers are often aware they can use JavaScript Ajax calls to implement load more pagination buttons. But they are not aware of the issues this technique can cause and how damaging a wrong implementation can be for the website’s SEO health.

If load more buttons are not implemented with a-href links, Google will not click on them — this includes <buttons>. But keep in mind that Ajax implemented through a-href=# is also not ideal. 

Google has explicitly said to not use “fragment identifiers.” According to Google, For single-page applications with client-side routing, use the History API to implement routing between different views of your web app.” Read more about Google’s JavaScript best practices on Google Search Central. 

The following is an example of how to create crawlable links:

How to create crawlable links for the Googlebot

Pros and cons of infinite scroll pagination

Since the implementation of infinite scrolling newsfeeds in popular social media websites like Instagram, Tiktok, Facebook etc, users are starting to take it as the norm of content experience. Infinite scroll has the highest periods of user engagement. This means that if you implement infinite scrolling, your website might have higher session times and lower bounce rates.

However, in standard pagination of page numbers, users can often visit the last page and judge contents if they want to. They can remember page numbers, which makes searching easier with standard pagination. With infinite scrolling, users might also spend less time on content and not read properly, jumping on to something next.

If your website has thousands of pages, infinite scrolling can crash your user’s browser or cause crawling issues for Googlebot. For a very high number of page results, infinite scrolling is not advised. And as a general rule, infinite scrolling is not considered completely Googlebot-safe. Google itself has given disclaimers about the bot’s inability to completely simulate a human’s scroll and crawling of all results. 

How to implement infinite scroll pagination

According to Google’s standard recommendations, infinite scroll should be implemented by creating new component pages in the same scrolling page. What that means is that new <head> tags with content are being generated as the user is scrolling. But the important thing to remember here is that these new pages have the same <title> tag in the <head>.

Google is clear on 2 things that make this implementation SEO-friendly:

  1. This implementation (as shown in John Mueller’s example here) allows for complete page accessibility to the crawler.
  2. There is no duplication of pages. All the new pages generated have unique URLs.

To learn more about infinite scroll pagination, read Google’s complete technical documentation.

Frequently asked questions

Which pagination does Google recommend?

Google’s recommendations change based on user requirements and website capabilities. 

  • For websites with a small number of results, using load more or infinite scroll can be ideal.
  • For websites with hundreds or thousands of results, standard pagination of multiple pages is recommended by Google.

What is John Mueller’s sample pagination website?

John Mueller’s sample pagination website is http://scrollsample.appspot.com/items. It is supposed to be the ideal example of infinite scroll pagination as per Google’s guidelines. It also has implementations of standard paginations. Google has more recommendations for infinite scroll here.

Can Googlebot click on load more pagination buttons?

There is significant debate on whether the Googlebot can click on a website’s buttons. Google has explicitly made it clear that they do not interact or click on buttons. According to Google, having only load more buttons is very dangerous for your website because the Googlebot is most probably “not seeing the other content.” What Google means here is that the content might not be crawlable.

See more vs load more: What is the difference?

You might think of see more vs load more as different types of paginations. However, these are just synonyms for the same type of pagination styles and implementations

What is a sample example of an infinite scrolling pagination website?

Here are some examples of infinite scrolling pagination websites:

What is a sample example of a load more pagination website?

Many websites have implemented load more paginations, especially commerce. Here are some sample examples of the implementation of load more style pagination:

Are rel=prev and rel=next tags still relevant for pagination?

In the past, Google recommended the use of these tags in the pagination. As of 2022, these tags are not essential for pagination. However, Google has said that other search engines may or may not still use them.

Momin Malik

Get the latest blog updates from Productive Shop! Subscribe to our blog:

    Top