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. 

A primary benefit of infinite scroll has the highest periods of user engagement. This means that if you implement infinite scrolling, your website might have higher sessions times and lower bounce rates.

A con to 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.

Another con of infinite scroll pagination is that If your website has thousands of pages, infinite scrolling can crash your user’s browser or cause crawling issues for Googlebot. For very high number of page results, infinite scrolling is not advised. And as a general rule, infinite scrolling is not considered completely Googlebot-safe, and 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.

Load more vs infinite scroll: Which is the best for me?

Both load more and infinite scroll allow for large amounts of content to be listed on the same page. When choosing, you have to ask yourself these questions, as they will lead to the best choice of pagination (check our recommendations as well):

  • Do I have too much content to list on a singular page (hundreds or thousands of elements)? If so, it is better to go with load more so the user can fetch as much as they need.
  • Can I have my developer implement load more pagination code in the proper way? If not, and if there is a faulty sitemap to go along with bad code for the pagination, this will lead to incomplete crawling and will negatively affect the SEO of the website. So go with standard pagination or infinite scroll in this case.
  • Do you care immensely about User-Experience (UX) and have good devs to code the pagination, AND you haven’t large amounts of elements to list down while scrolling, then go with infinite scroll.
  • If you want the safest pagination option, stick to standard pagination.

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 in pagination SEO?

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 SEO?

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 M

Momin Malik

Momin Malik is Senior SEO Consultant and Project Manager with experience in optimizing search engine rankings for B2B SaaS clients. He believes a deep understanding of search engine algorithms and data-driven strategies is important to drive measurable results. Here he posts his musings to help viewers understand Search and manage SEO and Web projects.

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

    Top