What is pagination? Directly translated, it means “pagination” or “pagination”, and on a website, it is a function that divides vertically long pages such as search result lists and category lists into multiple pages.
If you implement this pagination well, you can expect good effects on SEO.
On the other hand, if you implement pagination improperly, you won’t be able to divide the length of the page just right.
This increases the frustration of repeatedly scrolling to find the desired content.
In addition, a large number of duplicate URLs are generated due to writing mistakes.
As a result, the user’s convenience decreases and it becomes difficult to be evaluated by Google.
In order to avoid such a bad situation , implement pagination properly and improve user convenience.
Based on this point, this time, I would like to explain the points such as the definition of pagination, how to make it more convenient and how to implement it in a way that is easy for beginners to understand.
What is pagination?
Pagination literally means “pagination” or “page division”.
In addition, it is also called “page feed”, “paging”, “pager”, etc.
This pagination is a phrase often used on websites.
On the website,“Pagination” is a function that divides vertically long pages such as search result lists and category lists into multiple pages by dividing them into appropriate lengths.
In this way, for example, at the bottom of the list page of a blog site, we see content with page numbers with links.
This is pagination.
In addition to the list page, “pagination” is also used as a paging function that divides long sentences on regular blog article (news article) pages and switches them according to the operation of the viewing user.
Read Also: What is content marketing? Definitions and practices!
Necessity of pagination and SEO effect
Pagination is basically unnecessary.
This is because users prefer content with all the information on one page.
This is based on Google’s own official research data.
Content that displays all of the information on one page, rather than content where the user flips from page to page with only partial information (clicking “Next” to view the next page) It turns out that we prefer the.
* Source:
Official Blog for Google Webmasters [EN]: How to display the “Show All” page preferentially in search results
However, there are quite a few users who feel inconvenient because there is no pagination. (User convenience may decrease.)
For example, the load time may be very long depending on the number of lists on the list page.
Also, let’s say you fundamentally prefer a multi-page structure over a single page.
If that happens, user behavior will worsen due to increased withdrawal.
And when it comes to page experience, it hurts your SEO.
In these cases, the need for pagination increases.
In other words, if user behavior indicators such as bounce rate, exit rate, page/session, and average stay time are bad in one page configuration, consider using pagination.
By the way, “rel=”next”” and “rel=”prev””, which are marked up in the head tag of the HTML tag to configure pagination, are currently not officially supported by Google.
So, showing the relationship between pages, The clear SEO benefits of integrating index attributes such as link effectiveness are less pronounced than they used to be.
But that doesn’t mean you don’t need to set “rel=”next”” and “rel=”prev””.
For example, navigation nodes such as “rel=”next”” and “rel=”prev”” are recommended by W3C and used for web accessibility and ADA compliance.
Also, other search engines like Bing still support it.
With that in mind, you’ll need to configure pagination using rel=”next” and rel=”prev”.
How to implement pagination (also explained for WordPress)
To implement pagination, First, let’s do the HTML markup to display the pagination.
Then, let’s apply a design that looks good with CSS and implement pagination from a usability perspective.
By the way, in the case of WordPress, pagination can be displayed by utilizing dedicated plugins and tags.
Finally, mark up meta tags “rel=”next” and “rel=”prev” for search engine crawlability.
That way, you can implement more effective pagination that takes SEO into consideration.
- Design the look with HTML and CSS
- Mark up the meta tags “rel=”next”” and “rel=”prev”” in the HTML head tag
Design the look with HTML and CSS
To design the look with HTML and CSS,First, adjust the page numbers so that they are aligned horizontally.
For example, let’s say there are 3 pages that are divided into 10 or 20 items by dividing a long list page in the middle.
In this case, at the bottom of each divided page, HTML markup such as page numbers without links and with links. Then, use CSS to design the page numbers so that they are lined up horizontally.
HTML sample code (for first page):
| 123456 | <ul class=”example”><li>1</li><li><a href=”/page/2/”>2</a></li><li><a href=”/page/3/”>3</a></li><li><a href=”/page/2/” rel=”next”>次へ</li></ul> |
CSS sample code (common to all pages):
| 1 | .example li {display:inline;} |
By copying and pasting based on such HTML and CSS and marking up, you can design general horizontal pagination.
Also, for the first page, the above HTML markup will be used, but the HTML markup will change for each page.
For example, for page 2, use “<a href=”/page/1/” rel=”prev”>Previous</a>” and “<a href=”/page/1/”>1</a>”. It is necessary to add and remove the anchor link of “page number 2”.
For the 3rd page, add “<a href=”/page/1/” rel=”prev”>Previous</a>” and “<a href=”/page/1/”>1</a>” to remove the “page number 3” anchor link and the “next” anchor link.
In addition, adjust CSS such as color, position, size, etc. to make it look even better, and design pagination that considers mobile friendly with responsive design.
By the way, if you have a site built with WordPress, you can use a dedicated plugin to display pagination.
For example, install the ” WP-PageNavi ” plug-in, mark up the dedicated WP tag at the bottom of the list page template (archive.php, etc.) and update it.
Dedicated WP tag sample:
| 1 | <?php wp_pagenavi(); ?> |
By doing so, the list page will be divided into multiple pages according to the display number set on the WordPress side, and pagination will be automatically displayed for each list page.
By the way, pagination can also be displayed by using scripts such as jQuery, javascript, php, ajax, and api.
If you display and design pagination like this, In terms of usability, implementation is complete.
In addition, we mark up a dedicated meta tag for pagination that considers search engine crawlability.
Mark up the meta tags “rel=”next”” and “rel=”prev”” in the HTML head tag
To markup the meta tag, Leverage the HTML attributes “rel=”next”” and “rel=”prev””.
For example, let’s say you have a list page that is split into 3 pages.
- 1st page: https://infowikiz.com
- 2nd page: https://infowikiz.com/page/2/
- 3rd page (last page): https://infowikiz.com/page/3/
In this case, first, write code that includes the “rel=”next”” attribute of the link element in the HTML head tag of the first page.
| 1 | <link rel=”next” href=”https://infowikiz.com/page/2/”> |
Then, write code that includes the link element’s “rel=”prev”” attribute and code that includes the link element’s “rel=”next”” attribute in the HTML head tag of the second page.
| 12 | <link rel=”prev” href=”https://infowikiz.com/”><link rel=”next” href=”https://infowikiz.com/page/3/”> |
Finally, write code that includes the link element’s “rel=”prev”” attribute in the HTML head tag on the third page.
| 1 | <link rel=”prev” href=”https://infowikiz.com/page/2/”> |
In this way, if you mark up a dedicated meta tag, you can tell the crawler about the relationship between the divided pages in a more easy-to-understand manner.
In addition, you can integrate all the evaluations for each divided page into one.
As a result, the quality of the site will be easier to improve, so it will be easier to be evaluated by Google.
Points to note when implementing pagination
When implementing pagination, refrain from normalizing the second and subsequent pages to the first page.
Also, refrain from using noindex or nofollow on pages that implement pagination, or deny crawling with robots.txt.
Also, beware of spelling errors in the URLs of meta tags “rel=”next”” and “rel=”prev””.
- Do not normalize 2nd page onwards to 1st page
- Don’t use noindex or nofollow
- Do not deny crawls with robots.txt
- Do not make mistakes in the description of the URL of “rel=”next”” and “rel=”prev””
Do not normalize 2nd page onwards to 1st page
If you normalize the 2nd and subsequent pages that have been paginated to the 1st page, It is highly unlikely that it will work.
The reason is that the content of each page after the second page does not contain the same or similar content as the first page.
In other words, the standard of normalization is fundamentally wrong.
To avoid this situation, place a canonical tag for your own page URL on each split page and normalize it correctly.
After that, use meta tags “rel=”next”” and “rel=”prev”” together to implement pagination appropriately.
Bad example of normalization on page 2:
| 123 | <link rel=”canonical” href=”https://infowikiz.com/page/1/”><link rel=”prev” href=”https://infowikiz.com/”><link rel=”next” href=”https://infowikiz.com/page/3/”> |
A good example of normalization for the second page:
| 123 | <link rel=”canonical” href=”https://infowikiz.com/page/2/”><link rel=”prev” href=”https://infowikiz.com/”><link rel=”next” href=”https://infowikiz.com/page/3/”> |
Don’t use noindex or nofollow
If you use noindex and nofollow on each paginated page, Those pages will not be indexed or crawled.
If that happens, the good SEO effect of clearly showing the relationship between the divided pages and integrating the evaluation of each page will fade.
As a result, it is difficult to improve the quality of the site, so it will not be evaluated by Google.
To avoid this situation, implement pagination without using noindex or nofollow as much as possible.
Do not deny crawls with robots.txt
If you deny crawling the URL of the divided page with robots.txt, the page will not be crawled by Googlebot.
In addition, Googlebot will not crawl all of those pages if robots.txt refuses to crawl all the directories that organize each divided page (all subordinate URLs including category URLs).
Description example of denying crawling of split page URLs:
| 12345 | User-Agent:*# Deny crawling of the URL of the second divided page Disallow:/page/2/# Deny crawling of all page URLs in the directory that organizes each divided page Disallow:/page/* |
If you write like this, the crawler will not be able to acquire the content, so the meta tags such as “rel=”next”, “rel=”prev”, and “canonical” set for pagination will not be recognized.
As a result, it will be difficult to be evaluated by Google because the relationship between the divided pages will not be clearly shown and the site structure for integrating the evaluation of each page will not be clearly communicated.
In order to avoid such situations, implement pagination so that robots.txt does not deny crawling as much as possible.
Do not make mistakes in the description of the URL of “rel=”next”” and “rel=”prev””
Describe the URL of the ahref attribute together with the meta tag “rel=”next”” and “rel=”prev””.
If you make a mistake in writing this URL, duplicate URLs may be generated.
For example, let’s say you want to implement pagination on your WordPress site without any plugins.
At this time, you will have to manually write the URL of the ahref attribute along with the meta tags “rel=”next”” and “rel=”prev”” in the category list template.
Suppose that you forgot the presence or absence of slashes in this URL, or wrote many slashes and updated it.
This can result in duplicate URLs with parameters attached.
By the way, even in this blog, a large number of duplicate URLs were generated and indexed due to this mistake.
As a result, the quality of the site will decrease and it will be difficult to be evaluated by Google.
To avoid this situation, implement pagination without making mistakes in the URL descriptions of “rel=”next”” and “rel=”prev””.
On the other hand, if you use a plugin such as All in One SEO Pack on your WordPress site, you can set it to automatically output the meta tags “rel=”next”, “rel=”prev”, and “url with ahref attribute”. I can.
This will reduce writing errors.
Usefulness of infinite scrolling content with pagination
For pagination, if you click the page number link displayed at the bottom of the page, it is common to switch the URL and transition to the second and subsequent pages in a separate window.
but, You can also use the infinite scroll function instead of another window to transition.
Specifically, when you scroll to the split point at the bottom of the list page, the URL will switch and the second page will be displayed in the same window.
If you continue scrolling until you reach the split point at the bottom of page 2, page 3 will appear in the same window.
If you keep scrolling, the 4th and 5th pages will be displayed more and more in the same window.
In other words, infinite scrolling content allows users to browse as if all information is contained on one page.
Infinite scrolling content that implements this pagination is a user-preferred mechanism and is officially recommended by Google.
However, as mentioned earlier, it should be a series of separate pages and infinite scrolling content with proper pagination even for search engines.
That way, usability and crawlability are taken into account, and usefulness is increased.
However, depending on the type of site, user convenience may be low even if usefulness is high.
For example, on the product list page of an EC site, even after finding a product that interests you, you continue to scroll down to find a better product.
In this case, it becomes difficult to return to the first product (target content) that caught your attention.
As a result, it causes stress for the user, which leads to a decrease in convenience.
To avoid these situations, It is important to analyze access as appropriate and understand trends in user behavior.
If the tendency is bad, consider adjusting around pagination and optimize it.
Improve the quality of your site by implementing pagination properly
Mainly, if the list on the list page is long, Increased need for pagination.
Proper implementation of this pagination will enhance the user experience.
Also, if you use appropriate HTML markup, including pagination-specific meta tags, you can clearly indicate to search engines that the relationship between divided pages and the evaluation of a group of pages should be integrated.
As a result, the quality of the site will be easier to improve, so it will be easier to be evaluated by Google.
However, depending on the site, the way the pagination is displayed reduces the convenience.
Therefore, let’s grasp the trend of user behavior while analyzing access appropriately.
If the trend is bad, you need to review the pagination.
In this way, it is important to take SEO measures to improve the quality of the site by making good use of pagination.