This Cyber Monday Envato Tuts+ courses will be reduced to just $3. Don't miss out.
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.
Thankfully, even for this problem there’s a solution. Since 2011 Google acknowledges the HTML link elements
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:
If we want to tell Google and other search engines that these three pages belong together, we can use the
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
<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
Note: some browsers automatically preload the “next” page. Adding this link element can sometimes reduce the perceived loading time.
Besides the rel=next/prev attribute, we can use an alternative solution to solve pagination issues:
You probably remember the
rel=canonical tag from our duplicate content article. For those of you who missed it, here’s a short explanation:
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
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.
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.