Explore What Pagination Is and How to Implement It Properly

What is pagination define?

Pagination is an ordinal numbering of pages, which is usually located at the top or bottom of the site pages.
In most cases, it is used for main pages and partitions. It often looks like this:

Pagination makes users’ life simpler and more convenient when it comes to distributing products on the website in a measured manner. Imagine an eCommerce website with a catalog consists of several hundred products of different categories placed on one single page. Will that confuse the user? Definitely. So what is pagination in web development on practice?

Let’s look at some of the potential problems that arise when you use pagination, without paying attention to certain issues:

Pagination meaning for SEO: what problems can appear

Pagination issues often appear on eCommerce websites, blogs, forums due to a great number of web pages. The most common problems are related to user experience (UX) and search engine indexation.

Limit search engines visits for your site

When search engines crawl your site, the depth and number of pages they visit at a time will vary, depending on the site’s trust, the content update rate, etc. And, if you have a huge number of pages with pagination, then the likelihood that search engines will go through all pages of pagination and index all the end pages (goods/articles) is significantly reduced. Also, the limit will be spent on visiting pagination pages, and not on visiting really important pages of the site.

But be careful, since Google has not supported rel=”prev”/”next”, there is a chance you can disrupt important paginated pages are indexed.

Spring cleaning!

As we evaluated our indexing signals, we decided to retire rel=prev/next.
Studies show that users love single-page content, aim for that when possible, but multi-part is also fine for Google Search. Know and do what’s best for *your* users! #springiscoming

— Google Webmasters (@googlewmc) March 21, 2019

Problem with duplicates

Depending on the structure of your pages with pagination, it is very likely that some pages may contain similar or identical content. In addition to this, you will often find out that you have the same SEO title and meta description tags on your site. In this case, duplicate content on website can cause difficulties for search engines when it’s time to determine the most relevant pages for a particular search query.

Check website for duplicate content

Launch audit to detect what pages have duplicate content and hurt your website SEO performance

Something went wrong. Please, try again later.

Launch audit

SEO specialists have already developed 4 ways to solve this problem. Let’s explore each of them.

Solution 1. Deleting page pagination from the index with the help of noindex

In most cases, this method is a priority and can be implemented fast. The main point is in the exclusion of all pages of pagination from the index, except the first.

It is implemented in the following way:
The meta tag

is added to the HEAD section on all but the first page. Thus, we exclude all pages of pagination from the index, except the main page of the catalog and at the same time we ensure the indexing of all products/pages that belong to this catalog. Pay attention to such nuances:

• If you place the description text of the main page of the catalog, then it is still desirable to place it only on the first page.
• You should check that the first page URL is not duplicated. For example, when the pagination is implemented like this:

site.com/catalog?page=2
site.com/catalog?page=3
…
site.com/catalog?page=N

you should add a link to the first page, in case you are not on the first page

site.com/catalog

and from this page

site.com/catalog?page=1

301 redirects to site.com/catalog have to be configured.

Pros

• suitable for Yandex;
• least difficult of all solutions;
• a great way to exclude all pages of pagination from the index, if there is no logical reason for including them in the index.

Cons

• although it solves the potential problem of pagination, at the same time, we exclude paginal content from the index;
• if there are many products, then if you do not use the XML sitemap, the products that are located deep in the directory will be indexed for a long time.

Solution 2. “View all” and rel=”canonical”

This method requires the use of Google to create a separate “View All” page, where all products/pages from this catalog are displayed, and on all pages of the pagination we put rel=”canonical” on the page “View all”.

Implementation of this method: after you have created the “View all” page (for example, it is site.com/catalog/view-all.html), then on all pages of the pagination you need to place the following into the HEAD section:

Thus, we show the search engines that each page of pagination, is a part of the “View all” page so to speak. Google claims that

• this is the most preferable for them method;
• users tend to view the entire category on one page at once (although this point is rather controversial and depends on the situation).

Nuances

The “View All” page should load rather quickly, preferably within 1-3 seconds. Therefore, this method is ideally suited for a category that has a number of pages with pagination from 5 to 20 and is not suitable for directories with hundreds of pages of pagination.

Pros

• priority method for Google;
• all the contents of the pagination will be located in the index of the search page through the page “View all”.

Cons

• not suitable if there are many pages or many quality pictures for products/articles;
• rather a complex implementation on most standard CMS.

Solution 3. Rel=”prev”/”next”

UPD: Note! According to Google Webmaster Central Blog, rel=”prev” and rel=”next” is not an indexing signal anymore. 

We noticed that we weren’t using rel-next/prev in indexing for a number of years now, so we thought we might as well remove the docs :).

— 🍌 John 🍌 (@JohnMu) March 21, 2019

Our last option to solve the problem with pagination can be the most confusing, but this is perhaps the most universal method for Google (Yandex does not take into account these directives). Since the implementation is rather complicated, you should be very careful when applying this method. Let’s see how this works.

For example, you have 4 pages in the directory. Using rel=”prev”/”next” you essentially create a chain between all the pages in this directory. This chain starts from the first page: for this you add to the HEAD section:

For the first page, this is the only attribute. For the second page, you must specify both the previous page and the following:

For the third page, we do the same as for the second one

When we are on the last page (in this case fourth, we should specify only the previous page in the chain:

Using these rel=”prev”/”next” attributes, Google merges the page data into a single element in the index. Typically for users, this will be the first page, since usually, it is the most relevant page.

Nuances

• rel=”prev” and rel=”next” are for Google ancillary attributes, not directives;
• both the relative and absolute URLs can be used as values (in accordance with the valid values of the tag);
• if you specify a reference in the document, the relative paths will be determined based on the base URL;
• if Google detects errors in your markup (for example, if the expected value of the rel=”prev” or rel=”next” attribute is missing), further page indexing and content recognition will be performed based on Google’s heuristic algorithm;
• it should be checked that the first page URL is not duplicated.

Pros

• this method allows you to solve the problem of pagination without using “View all”;
• implementation occurs only with minor changes in HTML.

Cons

• these attributes are not taken into account by Yandex;
• implementation can be quite complex;
• inserting links in the chain of pages should be done very carefully.

But if Google stops indexing paginated pages with rel=”next” and rel=”prev”, how it handles pagination now?

Due to the latest Google Webmaster Office-hours Hangout is held on 22 March 2019, John Muller announced that paginated pages are treated like other normal pages on your website in Google’s index.

Solution 4. AJAX and Javascript scrolling

You’ve probably come across endless scrolling of goods on e-commerce sites, where the products are constantly downloaded when scrolling to the bottom of the screen. Although this is an excellent opportunity to improve usability, this method has to be used correctly. It is desirable that the products are not automatically loaded when scrolling. Instead, add a button “Show more items” under the latest products. A good implementation of this method you can see on the wikimart.ru on the final branches of the directory.

Proper use of parameters

When you use the rel=”prev”/”next” attributes, pages with pagination can contain parameters that do not change the content:

• session variables;
• graduation;
• change the number of items per page.

In this case, we get duplicated content. To solve the problem you can use the combination rel=”prev”/”next” and rel=”canonical”.
To do this, firstly, you need to make sure that all pagination pages with rel=”prev”/”next” use the same parameter. Secondly, for each URL with a parameter, it is necessary to register its canonical page without this parameter.

Proper use of filters and rel=”prev”/”next”

Now, let’s look at an example where we use the parameters by which we can/want to give out unique content, and it’s important for us to keep such filtered pages in the index. For example, we have a category with sneakers, and we want to create landing pages for search deliveries with different brands, using parameters in the URL.

In this case

• You do not need to use rel=”canonical” in the main category since the content is unique;
• create for each brand their unique chains based on the attribute rel=”prev”/”next”;
• write the unique and relevant title, description and text for category description for each filter

Conclusion

To conclude, here are our recommendations for solving the problem with pagination:

• if you have the technical ability to create the page “View all” (such pages are quickly loaded and not very large in size, check webpage size before and after implementing), then you can use this option since Google recommends it, and Yandex understands the directive rel=”canonical”;
• but probably in most cases the best option is to associate the use of the rel=”next page/prev page” attribute (Google understands it) as well as the robots=”noindex, follow” meta tag (website metadata both Google and Yandex understand).

Also in addition you can get acquainted with a report by Adam Gent at the BrightonSEO conference.