Helping Search Engines Handle Pagination

Helping Search Engines Handle Pagination

This entry is part 10 of 20 in the SEO Fundamentals for Web Designers Session
« PreviousNext »

Pagination is found all over the web. However, as handy as it is, it can sometimes cause problems for search engines. In this article you’ll learn how to solve these problems via HTML link elements.


Why Websites use Pagination

As much as some visitors become irritated by pagination, oftentimes it can be very useful. It can be a tool to help navigate a website and find whatever information the user is looking for more easily.

Pagination is found all over the web and more frequently than you think. Search engines, for example, divide their search results into several pages (usually comprising ten results per page, but sometimes only seven). Forums use pagination to break threads into smaller pieces. Product review websites, such as TechRadar, use it to allow readers to quickly jump to a certain part of their articles.

These examples are used to improve user experience. Instead of serving a lengthy page of results, they present several smaller pieces (and arguably the most relevant first) that are easier to consume. Another advantage is that shorter pages load faster.


Simple table, simple pagination Dribbbled by Pete Orme

But there’s another reason why websites use pagination: pageviews. By cutting an article into two or three pages they can double or triple the amount of pageviews. Why? Because it allows them to show extra advertisements and maximize their revenue.


The Problem With Pagination

It’s not all rainbows and butterflies in the world of pagination. It can sometimes cause some SEO problems.

One of these problems is duplicate content. When pagination is implemented improperly, it can cause duplicate content issues (having already talked about duplicate content in this SEO Session, we won’t go into detail).

Pagination can also dilute your SEO efforts because you are dividing your link juice between several pages instead of one entity. Because of this it’s also possible that the wrong page is ranking. If an irrelevant page gets sufficient links it could become a landing page and ‘steal’ organic traffic from the main page.


The Solution

Thankfully, even for this problem there’s a solution. Since 2011 Google acknowledges the HTML link elements rel=”next” and rel=”prev”; we can use these elements to specify a relationship between multiple URLs. This allows you to link several pages together and identify them as part of a larger set. Google will then treat these pages as one.

Let’s illustrate this with an example. We have a long article that is separated into three seperate pages with the following URLs:

  • http://website.com/long-article-part-1
  • http://website.com/long-article-part-2
  • http://website.com/long-article-part-3

If we want to tell Google and other search engines that these three pages belong together, we can use the rel=”next” and rel=”prev” attributes. We add the following code to the <head> section of the first page (long-article-part-1):

<link rel=”next” href=”http://website.com/long-article-part-2” />

If search engines crawl the first page, they see that the URL that was specified in the link-element is actually related to this page. On the second page we also need to add the rel=”prev” attribute:

<link rel=”prev” href=”http://website.com/long-article-part-1” />
<link rel=”next” href=”http://website.com/long-article-part-3” />

On the third page we only need to link to the second-to-last URL:

<link rel=”prev” href=”http://website.com/long-article-part-2” />

As this is the last page of the series we don’t need to add the rel=”next” tag.

Note: some browsers automatically preload the “next” page. Adding this link element can sometimes reduce the perceived loading time.


Alternative Solution

Besides the rel=next/prev attribute, we can use an alternative solution to solve pagination issues:

rel=canonical

You probably remember the rel=canonical tag from our duplicate content article. For those of you who missed it, here’s a short explanation:

The rel=canonical tag tells search engines that the current page is a copy of another page. Via this tag, all the link juice will be transferred to the original page.

So how can we use this tag to help search engines with pagination? Simple: we create a view all page, i.e. a page with all the content combined. We can then use the rel=canonical tag to link the separate pages to this page.

If you already have a view all page, Google might have done this automatically:

When we detect that a paginated series also contains a view-all version, we’re now making a larger effort to return the view-all page in search results when appropriate. – Benjia Li (indexing engineer at Google)

So, the chances are that you don’t even have to worry about this. But if you really want to make sure that this is done correctly, add the rel=canonical link.

Don’t forget that using the rel=canonical tag tells search engines to only index the content from the canonical URL (in this case the view all page). So don’t use the canonical element to link page 2, 3, 4 … to the first page.


Conclusion

Pagination can cause duplicate content issues and cause irrelevant pages to show up in the search results. We can use the rel=next/prev element to solve these problems. They inform search engines that the paginated pages are part of a larger entity. Alternatively, we could create a view-all page and use the rel=canonical tag to link to this page.

Kevin Vertommen is Sybe on Graphicriver
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://croftmedia.co.uk/ Greg Tyler

    Cool! Wasn’t aware of rel=next|prev. I’ll be sure to use it!

  • TJ Bowman

    Great article, thanks for the tips.

  • http://create-n.blogspot.com/ Namanyay Goel

    Good article! PS. Messed up code.

  • Pingback: به موتور‌های جستجو کمک کنیم صفحه‌بندی‌هایمان را بدست گیرند | حاشیه وب

  • http://www.howtoempoweryourself.com/ Keane kwa

    Great article! Are there any WordPress plugins for rel=prev/next? I blog once per day, so there will be a lot of pages, but quite troublesome to put the attributes in manually.

    • http://twitter.com/kevinverto Kevin Vertommen

      Yes, the WordPress SEO plugin from Yoast has this function built-in.

      • http://www.howtoempoweryourself.com/ Keane kwa

        I tried using the WordPress SEO plugin from Yoast but it messed up my title and meta descriptions (changed the default settings but no use).

  • Sekar

    Really a great article….

  • Pingback: Tweet Parade (no.02 Jan 2013) | gonzoblog

  • Gabor

    My opinion is: this is not a webmaster problem, this is a search engine engineer’s problem. Because if he can not handle the problem, he say: you have duplicate content. Or any similar…

  • http://www.facebook.com/pramodkram Pramod Kumar

    Was just learning about Pagination, and came through your Article, excellent post :)

  • Rishikant

    Thanks for this topic, making things easier!!

  • Pingback: 如何分页更有利于优化网站的搜索引擎 | 互动中国 @DamnDigital

  • Pingback: A Web Designer’s SEO Checklist (Including Portable Formats) | Webdesigntuts+

  • rajsheker

    Thanks for the much informative article. My question is can we insert the tag in this format: or it has to be an absolute link