Beginner’s Guide to Properly Using Rel Tags to Improve Your Site’s Rankings

Mukesh Mani

Rel tags are powerful tags that can be added to a website to signal a relationship between the current webpage and the webpage to which the tag links.

Using these tags properly can help you stay clear of duplicate content penalties, primarily by informing search engines of the original page and the pages that are mere copies (or pages that are part of a sequence). You can also tell the search engines which pages to display in their SERPs and which ones to avoid.

As you can see, the uses of these tags are pretty diverse.

In this article, we are going to briefly discuss the following three most important rel tags as well as how and when you should use these tags on your site:

Rel canonical tag (rel=”canonical”)
Rel next/prev tag (rel=”next” and rel=”prev”)
Rel alternate tag (rel=”alternate”)

The examples I am going to use in this article are specific to a WordPress site, but you can apply these techniques to any CMS as well as your Magento store.

So let’s get started!

What Is a ‘rel canonical’ Tag?

To put it simply, a canonical tag tells Google and other search engine bots that two or more webpages are essentially the same (in terms of content) but one is a variation or duplicate of the main page represented in the canonical tag.

As an example, take a look at the following URLs:

http://example.com/article-on-veggies/

https://example.com/article-on-veggies/

https://www.example.com/article-on-veggies/

http://example.com/article-on-veggies/comments/

http://example.com/article-on-veggies/1/

As you can see, all the above pages have the same content, but different URLs.

When the site is not configured properly, you’d be able to visit the same article using all these URLs, but because the content is exactly the same, when Google indexes all these pages, it detects duplicate content.

And this is what happens when Google detects duplicate content:

“In the rare cases in which Google perceives that duplicate content may be shown with intent to manipulate our rankings and deceive our users, we’ll also make appropriate adjustments in the indexing and ranking of the sites involved. As a result, the ranking of the site may suffer, or the site might be removed entirely from the Google index, in which case it will no longer appear in search results.”

So how do you avoid this issue? This is where the ‘canonical tag’ comes in. By adding a canonical tag to these pages, you can easily inform Google (and other search engines) that all these pages are mere variations of a single, original page.

Continuing with our example, all the above pages should have the following canonical tag:

Using this canonical tag tells Google that all the other pages are copies of the main page which in this case is: https://example.com/article-on-veggies/

So to reiterate, a canonical tag can be used to duplicate pages that are equivalent to the original page in terms of having the exact or similar content.

What Are rel ‘prev’ and ‘next’ Tags?

The ‘rel prev’ and ‘rel next’ tags (rel=”prev” and rel=”next”) can be used to establish a relationship between different webpages that are part of a paginated sequence.

Examples of paginated sequences are as follows:

A website archive page split into many different pages
A forum thread split into various pages
A single article split into several pages
A product listing page split into several pages

Let’s see how the ‘next/prev’ tags differ from the ‘canonical’ tag using the following example:

For instance, say you have a website category with 100 posts and you display 20 posts per page. This means that the category archive will have four different URLs. These URLs are not different – they’re part of a single page that is split into different sections to increase readability.

Let’s say the URLs look like:

https://example.com/category-cars/

https://example.com/category-cars/page-2/

https://example.com/category-cars/page-3/

https://example.com/category-cars/page-4/

Using a ‘canonical’ tag in this case is not be ideal because even though these pages are essentially the same, they still have different content. Remember, as we discussed earlier, a single canonical tag should only be used across pages that have exact or near similar content.

In this case, the best way to tell Google that these pages are part of the same sequence is to use the ‘prev’ and ‘next’ tags.

So for the first page (https://example.com/vegan-article/) we would use the following tag:

As you can see, this tells Google that this page is the second page in the sequence.

The second page (https://example.com/vegan-article/page-2/) would have the following tags:

This tells Google that this page is a continuation of the sequence, and hence has a previous page and a next page. URLs of both are indicated by the tag.

The fourth and final page in the sequence would have the following tag:

This tag tells Google that the page is no longer continued (there is no ‘next’ tag) , but is part of a sequence. The URL of the sequence is indicated by the ‘prev’ tag.

If you want, you can also add a ‘canonical’ tag (specific to the page) along with the ‘next/prev’ tag on the same webpage, as these tags are independent of each other according to Google’s webmaster central blog.

Keeping with our previous example, the second page would have the following canonical tag:

…and the fourth page would have this canonical tag:

As you see, the canonical tag in this case changes based on the page URL and is not same for the entire sequence of pages.

Related Content: Marketer’s Guide to Web Push Notifications

What Is a ‘rel alternate’ Tag?

The ‘rel alternate’ tag is similar to the canonical tag, but unlike the canonical tag, the alternate tag can be used to establish a relationship between pages that have an entirely different version of the ‘same’ content.

For example, pages that have the same content but written in different languages or pages that have the same content but are made to display on a different media devices, like desktop and mobile pages.

For example, say you have an English version of a webpage which has been translated into German. The links to the English and German version are as follows:

English version: http://example.com/some-article/

German version: http://example.com/some-article-german/

In this case, you can add the following tag to the English version of the webpage to indicate to Google that a German version of this page is present at the linked URL, as follows:

The ‘hreflang‘ attribute indicates the language of the linked page and ‘de‘ is the language code for German.

If you have an entire translated website, you can add the rel alternate tag at a domain level like this:

To learn more about this tag read this official article by Google.

Optimizing Your WordPress Site to Rank Better Using These Tags

Now that we have had a look at what these rel tags do, I’ll show you how to apply these tags to your WordPress blog to make it more SEO friendly.

Let’s look at the following standard sections and scenarios related to a WordPress site and how these tags fit in:

WordPress homepage/index page
Single post pages
WordPress archive pages (category, tag, author and date archive)
Product listing pages (custom post type archives)
Different site for mobile users
Different languages
AMP version of site
CROss domain usage

1) WordPress Homepage/Index Page

Depending on the configuration, your website’s index page (ie. homepage) can have many variations:

http://example.com

http://www.example.com

https://example.com

https://www.example.com

https://www.example.com/index.php

https://example.com/index.php

http://example.com/index.php

http://www.example.com/index.php

As you can see, this includes versions with and without ‘www‘, the HTTP version, the HTTPS version, and versions with and without the index.php file name.

As the content of all these URLs is exactly the same, using a canonical tag would take care of the issue, although it is definitely not the best solution. The better solution is to choose one version and 301 redirect all other versions to it.

Once the URLs are redirected, you can use the canonical tag as follows, using http://example.com as your chosen version:

Another thing to note is that if your WordPress site is set to display your latest posts, you will have paginated URLs for the index page.

Depending on your pagination base, your URLs will look as follows:

http://example.com

http://example.com/page/1/

http://example.com/page/2/

…and so on.

As mentioned earlier, the best way to handle this is to add the ‘next’ and ‘prev’ tags to indicate a logical sequence.

You can also block these subpages from getting indexed by adding the robots ‘noindex’ meta tag. In fact, you can add both of these tags at the same time.

Here’s how your tags would look like for the main index page http://example.com:

For the second page (http://example.com/page/1/), the tags would be as follows:

As you can see, we have added the ‘noindex’ tag for the second paginated page to block it from getting indexed.

This way you can block all subpages from getting indexed and inform Google that these pages are part of the same paginated sequence.

2) WordPress Single Post Pages

For the most part, single post pages do not require the ‘next/prev’ tag as they are not part of a sequence.

It should be noted that WordPress automatically adds ‘canonical’ and ‘next/prev’ tags to the single post pages. It is a good practice to remove these WordPress-initiated ‘next/prev’ tags as they have the potential to send mixed messages to Google and other search engine bots.

You can easily remove these tags by adding the following to your functions.php file:

remove_action(‘wp_head’, ‘adjacent_posts_rel_link_wp_head’);

Paginated single posts: If your single posts are too long, say more than 5,000 words, you can split them into different pages to enhance readability.

WordPress allows you to do this using the <!–nextpage–> tag. All you need to do is type this tag within your content where you want the page break to appear in the HTML editor (or Text editor) and the pages will be split accordingly.

If you are splitting a single post into multiple pages using this technique, you can use the ‘next/prev’ tag to signal to Google that these pages are part of a single article.

A major advantage of doing this is that Google will always show the first article in the sequence in the SERPs and not the subpages.

For example, let’s say these are the URLs of the split article:

http://example.com/some-article/

http://example.com/some-article/2/

http://example.com/some-article/3/

You can add the following tags to the first page (http://example.com/some-article/):

As you can see we have added a canonical tag and a next tag. The next tag tells Google that the article is continued, along with the URL to the continued webpage.

You can then add the following tags to the second page (http://example.com/some-article/2/):

Here again, we are informing Google that the article is part of a sequence and that there is a previous and next page as indicated by the links.

Paginated comments pages: If you are using WordPress comments and also using the ‘break comments’ option to break your comments into separate sections, then WordPress creates separate URLs for each comment section as follows:

https://example.com/seo-article/

https://example.com/seo-article/comment-page-1/

https://example.com/seo-article/comment-page-2/

…and so on.

As you can see, this can also lead to content duplication. The best way to avoid this issue is to add a canonical tag that points to the main page, which in the above example is https://example.com/seo-article/

So all the comment pages (as per our example above) would have the following canonical tag:

Another option, of course, is to stop breaking your comments into different pages or to stop using WordPress’s comment system and instead use third party software like Disqus.

3) WordPress Archive Pages

WordPress auto-generates archive pages, such as:

Category archives
Tag archives
Date archives
Author archives
Custom taxonomy archives

All archive pages have the same URL structure, so let’s take a look at category archives.

http://example.com/category-1/

http://example.com/category-1/page/2/

http://example.com/category-1/page/3/

http://example.com/category-1/page/4/

Because archive pages are part of a sequence, it is best to mark them using the prev/next tag. And as with the homepage, you can also add the noindex tag to category pages from the second page onwards.

For example, for page one (http://sitename.com/category-1/) we would have the following tags:

And for page two (http://sitename.com/category-1/page/2/) we would have these tags:

4) Product Pages (Custom Post Type Archives)

If you sell products on your site and use a plugin like WooCommerce, then you will have product pages that can be sorted based on various parameters.

For example, products can be sorted based on popularity, price ranges, date added, etc. This can produce many different pages with the same content.

Here’s an example of a product page and the various versions generated because of the sorting:

https://example.com/shop/

https://example.com/shop/?orderby=popularity

https://example.com/shop/?orderby=price

https://example.com/shop/?orderby=rating

https://example.com/shop/?orderby=date

In addition to this, the product pages can also have pagination and hence even the paginated pages will have all these different URL versions:

https://example.com/shop/page/2/

https://example.com/shop/page/2/?orderby=popularity

https://example.com/shop/page/2/?orderby=price

…and so on.

This can clearly give rise to duplicate content issues. The best thing to do here is to add the rel=”canonical” tag along with the rel=”next/prev” tag. So the first page (https://example.com/shop/) and all variations would have the following tags:

The second page would have the following tags:

…and so on for all other paginated pages.

5) Different Site Versions

Many websites have a separate mobile version. For example, here are the desktop and mobile versions of NYtimes.com:

Desktop version: https://nytimes.com/

Mobile Version: https://mobile.nytimes.com/

The best way to alert Google of the mobile variation of the website is to add a rel=”alternate” tag to the desktop page that points to the corresponding mobile page URL. This helps the Googlebot discover the location of your site’s mobile pages:

Similarly, on the mobile page (https://mobile.nytimes.com/), you can add a link rel=”canonical” tag pointing back to the corresponding desktop URL like this:

Using the ‘alternate’ tag tells Google that there is an alternative mobile version of the site available. The media attribute tells Google that the mobile version is used for devices that are less than 640 pixels in width – in other words, smartphones.

6) Different Language Versions

As previously discussed, if you have one or more translated versions of your website, you can use the ‘rel alternate’ tag and the ‘hreflang’ tag to indicate this to Google.

Related Content: 5 Things You Should Rank for in 2017

7) AMP Pages

If you have an AMP version of your website, then Google recommends using a new rel=”amphtml” tag to indicate the presence of the AMP page. On the AMP page, you can then use the canonical tag to point back to the original page.

Let’s say the main URL and AMP versions are as follows:

Main article URL: https://www.example.com/some-article/

AMP article URL: https://www.example.com/amp/some-article/

You can add the following to the main page (i.e. the non-AMP page) indicating that a AMP page is present.

And then on the AMP page, you can add the following canonical tag pointing back to the main article URL.

8) CROss-Domain Pages

Canonical tags can also be used to point to URLs on other domains.

If you have republished a few articles from a different website, you can indicate this to Google by using the canonical tag. This way, you can stay clear of any duplicate content penalty.

As an example, if the original URL of the republished article is:

http://example.com/original-article-link/

You can add this canonical tag to your republished article:

Checking the HTML Source to Ensure that You Have Proper Rel Tags

There are many good SEO plugins available for WordPress and other platforms that can add all these aforementioned tags for your automatically.

But whether or not you use an SEO plugin, it is always a good idea to check the HTML source of different pages on your website to ensure that the tags are being added properly. This will also tell you if there are duplicate tags present so you can remove them.

For instance, WordPress adds its own ‘canonical’ and ‘next/prev’ tags for some pages. There are also certain themes that tend to add their own tags. You might want to remove these tags first if you want to add your own because if you don’t, it will result in duplicate tags. In other words, you could end up having two different rel tags, like two different canonical tags on the same page.

In a similar way, if you have made custom changes to your theme’s functions.php file to add or remove a few tags from the WordPress header and also added an SEO plugin, you might have issues with duplicate tags.

This is why it is important to check your HTML source periodically to ensure that everything is fine.

To check the HTML source, simply open your website in your favorite browser and then right click anywhere on the page and select ‘View Page Source’ (or use the keyboard shortcut CTRL + U if you are on Chrome/Firefox or Option+Command+U if you are on Safari).

This is what you will see:

As shown in the image below, look between the beginning and ending <head> tags to see all your tags.

If you are using WordPress, make sure to check the HTML source of the following pages:

Homepage and paginated pages if present
Single post pages
Single post pages with pagination (if you are splitting your articles into sections)
WordPress comment pages (if you use WordPress comments and breaking comments into sections)
Archive pages (first page and a few paginated pages)
Search and 404 pages
Custom post type archive pages (if you are using plugins like WooCommerce)
Product pages

Manually checking the HTML sources of these pages is the best way to ensure that your tags are being applied properly without any errors. Yes, SEO plugins do help, but relying on them 100% is certainly not the way to go.

Now that you know how to use these rel tags:

Rel canonical tag (rel=”canonical”)
Rel next/prev tag (rel=”next” and rel=”prev”)
Rel alternate tag (rel=”alternate”)

…you can avoid duplicate content penalties, inform Google of the proper page to display in the SERPs, and thus improve your site’s ranking.

What Is a ‘rel canonical’ Tag?

What Are rel ‘prev’ and ‘next’ Tags?

What Is a ‘rel alternate’ Tag?

Optimizing Your WordPress Site to Rank Better Using These Tags

1) WordPress Homepage/Index Page

2) WordPress Single Post Pages

3) WordPress Archive Pages

4) Product Pages (Custom Post Type Archives)

5) Different Site Versions

6) Different Language Versions

7) AMP Pages

8) CROss-Domain Pages

Checking the HTML Source to Ensure that You Have Proper Rel Tags

Get Your Free 2024 Growth Guide with Our Newsletter, Leveling Up

I hope you are getting a lot of value out of this blog post.