4.05 - Pagination

1 - Findings & Impacts

Pagination is useful for crawlers to quickly reach deep pages of your site. I am aware that this is just a mockup but in this example, in the way your pagination is currently setup, it will be consuming a lot of your crawl budget and it will be hard to explore as it is too deep and under-optimized.

To reach the last game here, it might take 14 clicks.

Every page of your website should be accessible in less than 4 clicks from the homepage.

Pagination is usually done in different ways. We distinguish two types:

Classic pagination, page 1 linking to page 2, then page 3, then page 4, etc.
Infinite scroll pagination, with a "Load more" button that, when clicked on, reloads additional content onto the page without changing the URL (with an AJAX call).

It is important that all pages are easily accessible, not only by Google's bots, but also by Internet users.

2 - Recommendations

Rel / Prev markup

Use the rel = "next" and rel = "prev" links to signal the relationship between the different URLs. This markup sends Google a strong signal that you want to use these pages as a logical sequence

Suppose the following URLs contain paginated content:

http://www.example.com/article-partie1.htmlhttp://www.example.com/article-partie2.htmlhttp://www.example.com/article-partie3.htmlhttp://www.example.com/article-partie4.html

In the <head> section of the first page (http://www.example.com/article-part1.html), add a link pointing to the next page in the sequence, as follows:

Since this is the first URL in the sequence, you do not need to add a markup for rel = "prev".

On the second and third pages, add links to the previous and next URLs in the sequence. For example, you can add the following items to the second page of a sequence:

On the last page of the sequence (http://www.example.com/article-party.html>), add a link to the previous URL, like this:

As this is the last URL of the sequence, it is not necessary to add rel = "next" link.

Display pagination on DESKTOP and MOBILE

In order for all the pages to be easily accessible:

Always display the 10 links corresponding to the units of the current ten
When on a page, make the first 3 superior pages available as well as the first 3 inferior pages (eg - if you are on page 10, page 7 - 8 - 9 and 11 - 12 - 13 should be accessible/clickable too)
For the first page, maybe display: 1,2,3,4,5,6 and 10 - 20 etc
Beyond 10 pages, display the links corresponding to each ten of the current hundred.
Beyond 100 pages, display the links corresponding to each hundred of the current thousand.
On all pages except the first page, display a link "previous page" (can be displayed in the form of a pictogram '<' for example).
On all pages except the last page, display a link "next page" (can be displayed in the form of a pictogram '>' for example) and a link "last page" (can be designed in the form of a pictogram '>>' for example).
Thus, it will be easy to access page 15, by first clicking on 20, then 17 and finally 15 (only 4 clicks away from the homepage VS 7 clicks at the moment).

WARNING

rel = "prev" and rel = "next" tags are always In the <head> section

NOTE

I would always advise a tradition pagination method as it is still preferred by search engines, but if you wish to keep the "load more" button, then I would advise the following for now:

Add more products on the page so that we can reduce the number of pagination pages
Display this navigation bar in "sublayer" for exclusive use of robots while keeping the "load more" button for the user
rel = "next" and rel = "prev" links should be in the header)))))

Report abuse