How to Use and Implement Hreflang and Canonical Tags Correctly: Complete Guide

With their similar purpose, hreflang tags and canonical tags often get confused with each other. After all, both of them indicate to Google and other search engines which web page they should index and serve to a particular searcher.

Look more closely, though, and you’ll realize that these tags:

• Have different functions,
• Are not the same thing, and
• Should not be used interchangeably if you’re trying to achieve a certain objective.

The last point is especially important. Because if you aren’t sure of what you’re doing and add a canonical tag to a web page when you should really be using a hreflang tag or vice versa, then search engines could fail to serve the correct version of the page to searchers.

The result? Your searchers view not the web pages that you’ve painstakingly created for their consumption, but other pages with lower conversion potential – which could cause you to lose traffic, sales, and revenue.

Let’s take a look at the differences between hreflang and canonical tags, best practices for implementing them correctly on your website, as well as some common mistakes to avoid in the process.

Hreflang and Canonical Tags: What’s the Difference?

Hreflang Tags

Hreflang tags are snippets of code that signal to search engine crawlers a web page’s language and its target geographical location. Here’s an example of a hreflang tag:

‍

In this case, the hreflang tag tells search engines that the web page “https://www.example.com/gb/” is in the English language as per the “en” ISO 639-1 language code, and is meant for searchers from the United Kingdom region following the “gb” ISO 3166-1 region code.

Hreflang tags are especially important for international websites, whose web pages have been localized for various geographical markets. That’s because they help search engines serve the appropriate language and regional version of a web page to searchers from different countries.

For instance, a retailer with a presence in Germany, France, Switzerland, and Italy may have six separate geographical audiences:

1. German language users from Germany.
2. German language users from Switzerland.
3. French language users from France.
4. French language users from Switzerland.
5. Italian language users from Switzerland.
6. Italian language users from Italy.

The retailer would first create six different versions of each web page on its website to target each geographical audience. After that, on each such page variant, the retailer will need to implement hreflang attributes to inform search engines:

• That this web page exists in six different versions,
• That these page variants are not to be considered duplicate content (even if their content is highly similar to each other), and
• Which page variant it should be serving to a visitor from a certain country.

Also, keep in mind that hreflang tags serve as signals, and not directives. In other words, they signpost to search engines how they should be serving web pages to international searchers. However, the search engine may choose to serve pages differently as it deems appropriate.

Check out our comprehensive guide to hreflang tag best practices to learn more about how hreflang tags work and how to implement them on your website.

Canonical Tags

Like hreflang tags, canonical tags are also snippets of code that provide signals (and not directives) to search engine crawlers. However, their job is to inform search engines:

• Which URL is to be considered the “official” version of a web page, and
• That they should hence index and rank that URL in searches.

Canonical tags are useful where you have:

• URL variations of a particular web page, such as “http://example.com” versus “https://example.com.”
• Parameters in your URLs to indicate small content changes to a web page, such as “http://example.com/products” versus “https://example.com/products?category=suitcases.”
• Duplicated content to different web pages in your website, or on another website entirely, and you want search engines to regard a particular web page on your website as the official version of the content.

‍

Canonical tags appear like this:

Both canonical and hreflang tags help website owners avoid duplicate content issues, which can cause some pages to wrongly not get ranked in search engines. However, hreflang tags provide more specific instructions on which web page to serve to a searcher using particular language and regional settings. On the other hand, canonical tags tell search engines only which page they are to serve in searches, out of various pages with similar content.

Let’s say that we have a homepage with the URL “https://example.com/gb”, whose content is largely similar to that in two other web pages with the URLs “https://example.com/gb1” and “https://example.com” respectively.

In such a situation:

• A canonical tag will basically say “Page ‘https://example.com/gb’ is the official version of the ‘https://example.com/gb’ homepage. Rank ‘https://example.com/gb’ in searches and not ‘https://example.com/gb1.’”, while
• A hreflang tag would say “Page ‘https://example.com/gb” is the official version of the page ‘https://example.com’ for English language searchers from the United Kingdom. Rank ‘https://example.com/gb’ for English language searchers from the United Kingdom.”

‍

How Can Using Canonical Tags Help With Search Engine Optimization (SEO)?

If you aren’t running an international website, then you may be able to get away with not using hreflang attributes. However, you absolutely should still consider implementing canonical tags, which can better optimize your website for organic traffic in these ways:

• Specify which web page is to appear in the search engine results pages (SERPs): If you want searchers to land on a certain web page over another page with similar content, use a canonical tag to specify the former page as the “official” version of the page to which search engines should be sending searchers.
• Consolidate link signals to a web page of your choice: At the same time, the web pages with similar content may be gaining backlinks from other websites. With a canonical tag, you can consolidate the link equity that these duplicate pages are getting to your preferred web page. This helps boost the reputation of your preferred web page (and possibly also its rankings) even if other websites haven’t linked to it directly.

Best Practices When Using Canonical Tags

Don’t Add Hreflang Annotations to Web Pages That Have Canonical Tags Pointing To Other Web Pages

That’s because you risk confusing search engines over which web pages they should be indexing and ranking.

Imagine you have two web pages: web page A and web page B. When you add to web page A a canonical tag that points to web page B, you are telling search engines that they should index and rank web page B instead of web page A.

But if you also add a hreflang tag to web page A, then you’re signaling to search engines that they should also index and rank web page A. This conflicts with the canonical tag’s instructions to not index or rank web page A.

In the face of such conflicting signals, search engines may disregard both your hreflang and canonical tags, and make their own decision on how to rank web pages A and B. This decision may not be in line with what you want.

Accordingly, if you’ll be adding hreflang tags to a web page with a canonical tag, then make sure that the canonical tag is pointing to the URL of that same web page instead of the URL of a different page.

Use Canonical Tags When Syndicating Content to Other Websites

As mentioned above, canonical tags can be used to point to URLs belonging to not just your website, but others’.

This is useful for the situation where your content has been published on both your blog and a content syndication partner’s website that tends to have higher search rankings than you. If you want search engines to serve the version of the content on your blog and not on the other website, then you’ll need to:

1. Add a canonical tag to that content page on your blog, with this tag pointing to the URL of the same content page, and
2. Request your content syndication partner to add to their content page a canonical tag that also points to the URL of the content page on your blog.

Why Is It Important to Correctly Implement Hreflang and Canonical Tags?

Incorrect implementation of hreflang and canonical tags can cause issues such as:

• A “Your site has no hreflang tags” error in Google Search Console: This means that Google can’t find the hreflang tags on your website, even though you may have made the effort to add them in. (Here's how to fix a “Your site has no hreflang tags” error.)
• Search engines serving the wrong web pages to the wrong searchers: This can cause you to lose traffic and even revenue if searchers are directed to visit web pages that haven’t been optimized for their user experience.
• Duplicate content appearing in the SERPs: This can result in the dilution of link equity across multiple pages if these duplicate content pages are from your website. Alternatively, you may lose such link equity entirely if the duplicate content is on a website other than yours.

If you are using a quality website localization solution like Weglot for multilingual SEO, it can automatically add hreflang tags to your website and ensure 100% accurate hreflang implementation. At the same time, website plugins such as Yoast SEO have built-in features to add canonical tags to every page on your website at scale.

Common Mistakes to Avoid When Implementing Canonical and Hreflang Tags

While it is also possible to add canonical and hreflang tags manually, you run the risk of implementing them incorrectly. Be careful not to make mistakes such as;

1. Merging the Hreflang and Canonical Tags Into a Single Link Tag

In other words, you format your link tag as follows:

This simply will not work. Combining the canonical and hreflang attributes into one link tag might seem like a commonsense thing to do, but this will cause problems with your code.

Instead, canonical and hreflang tags need to be placed in separate link tags.

2. Setting Your Global Page URL as the Canonical URL

If you have alternate versions of a page for different languages and regions, then each of these page variants will need its own canonical tag.

For instance, you may have “https://www.example.com/” as your global page, and a page variant with the URL “https://www.example.com/gb/” that is meant for English language visitors from the United Kingdom.

Here, the canonical tag for your “https://www.example.com/gb/” page should point to “https://www.example.com/gb/” and not “https://www.example.com/.”

If you use “https://www.example.com/” as the canonical URL for “https://www.example.com/gb/”, then you are signaling that “https://www.example.com/” is the official version of your global page. As a result, search engines may mistakenly always serve “https://www.example.com/” to searchers, even if the searcher hails from the United Kingdom.

3. Using rel=“canonical” as the Self-Referencing Entry for a Web Page

When implementing hreflang tags on a web page, you’ll need to have one hreflang tag point back to the current web page URL. This is called “self-referencing.”

For example, a web page with the URL “https://www.example.com/gb/” may contain two hreflang tags as follows:

‍

Hreflang tag #1 would be the self-referencing entry in this case. And the value of the rel attribute must be “alternate” – it cannot be replaced with “canonical.” Doing so will also throw up code errors.

Hreflang and Canonical Tags Work Hand in Hand to Direct Searchers to the Right Pages

We’ve covered a lot in this discussion on hreflang and canonical tags. Let’s sum things up:

Hreflang and canonical tags serve as signals – and not directives – for search engines on how they should index and rank web pages. To indicate which web pages should be served to searchers with certain language and regional settings, use hreflang tags. Alternatively, to indicate the “official” version of a web page, use canonical tags.

It may seem daunting to use hreflang and canonical tags given the many things that could go wrong during implementation. However, there are tools available to make the implementation process effortless and error-free. In particular, if you’re making your website multilingual, Weglot does more than just translate web content with a high degree of accuracy.

It can also add the appropriate hreflang tags to your web pages on autopilot, ensuring accurate implementation as you work on creating the best website experience for your visitors.

Get started with a free 14-day trial of Weglot here.