Hreflang Tags And Canonical Tags

Written by: Nils Jansen
Publication date: 09/05/2024

Imagine you are working hard to put your business on the international map. Your website is translated into multiple languages and you are actively reaching out to customers around the world. But then you encounter a problem – your website is not ranking as expected in different countries.

You may even notice that the wrong versions of your website are being shown to your international audience. These are common challenges when setting up an international SEO foundation. Fortunately, there are tools that can help you: hreflang tags and canonical tags.

A common problem that multilingual websites face is duplicate content or incorrect page indexing. Search engines, such as Google, may struggle to determine which version of a page is most relevant for a user, which can lead to lower rankings in search results.

Moreover, if you do not clearly indicate which version of your content is intended for which country or language, you may end up targeting the wrong audience. This is where hreflang and canonical tags come into play.

What is an hreflang tag?

Hreflang tags tell search engines which language you are using on a specific page, so the search engine can display the correct language version of the page to users in different countries. This is especially important for websites that offer content in multiple languages.

An hreflang tag looks like this:

In this example, hreflang=”nl” indicates that the content on the page is in Dutch. The href attribute points to the URL of the Dutch page. Do you also have an English version of the same page? Then you would place the following hreflang tags in the source code of both the Dutch and English pages:

These tags inform search engines that there are two versions of the page, each intended for users in different language areas. Using hreflang tags is essential when you have content that is targeted at multiple countries or languages, to ensure your audience sees the content in the correct language.

When should you use hreflang tags?

Implementing hreflang tags can be useful in several situations to ensure that search engines properly assess your content, for example:

If your website supports multiple languages and you want search engines to show the correct language version to users based on their location.
When you have content that is specifically tailored to different geographic regions, even if it is in the same language. For example, a separate version of your site for Belgium and the Netherlands, despite both being Dutch-speaking.

Not using hreflang tags in such situations can lead to various problems. For instance, users may end up on a version of the website that is not in their preferred language or region, which negatively affects the user experience.

How do you properly implement hreflang tags?

Let’s go through some scenarios to see how hreflang tags should be implemented in different situations. Suppose you have a website available in English and Dutch. You want to add hreflang tags for each language version of your homepage.

English version: https://www.example.com/en/home
Dutch version: https://www.example.com/nl/home

In this case, you would add the following tags in the <head> section of each page:

On the English page:

On the Dutch page:

These hreflang tags help search engines understand that there are two language versions of the homepage and which URL corresponds to which language. But suppose you have specific versions for English in the US and English in the UK, in addition to the Dutch version:

US English version: https://www.example.com/en-us/home
UK English version: https://www.example.com/en-gb/home
Dutch version: https://www.example.com/nl/home

In this case, you would add the following hreflang tags in the <head> section of each language- and location-specific version of the homepage:

By implementing these hreflang tags, you indicate that in addition to the Dutch variant, there are two English variants of the homepage, each for a specific geographic location. In this case, an English variant for the US and an English variant for the UK.

A best practice is to also include a self-referencing hreflang tag. This means that each page should have an hreflang tag that refers to itself. In the examples above, this has already been implemented.

What is a canonical tag?

Canonical tags are an essential part of search engine optimization (SEO) and are used to tell search engines like Google which version of a page should be considered the “main” or “canonical” page. This is especially important when multiple pages with similar or identical content exist, which can lead to duplicate content issues.

A canonical tag looks like this:

By correctly implementing canonical tags, you can help search engines identify the correct page to index and rank, which can improve the visibility of your site and prevent duplicate content issues.

Although the use of a canonical tag is seen as a ‘request’ to search engines, and not as a strict command, they usually follow this advice to determine which version of content they should index and rank.

When should you use canonical tags?

There are several situations in which implementing canonical tags is particularly valuable, for example:

When your website is accessible via multiple URLs that lead to the same or very similar content. This can happen due to differences in URL structures, such as with and without ‘www’, the use of HTTPS versus HTTP, or other variations.
If you have the same content on multiple pages, for example, a product that appears in several categories on your site.
When publishing content that is accessible via multiple URLs due to URL parameters or session IDs.

Not using canonical tags in these situations can lead to confusion among search engines about which version of the content they should index and rank. This can result in a dilution of authority across multiple duplicate pages, which negatively affects the visibility and ranking of your site.

How do you correctly implement canonical tags?

Let’s go through some scenarios to see how you should correctly implement canonical tags. Suppose you have a webpage that is accessible via multiple URLs, for example, different variants of a product page:

https://www.example.com/product
https://www.example.com/product?color=red
https://www.example.com/product?color=blue
https://www.example.com/product?color=green

If you decide that the first URL (https://www.example.com/product) is your preferred URL, then you would implement the following canonical tag in the <head> section of all four pages, including the preferred page:

This tells search engines to only index the preferred URL and ignore the other URLs, helping you avoid problems with duplicate content. Additionally, suppose your site is accessible via both an HTTP and HTTPS version:

http://www.example.com
https://www.example.com

In this case, it’s important to add a canonical with the HTTPS version of the page to each HTTP version of every page, as follows:

Difference between hreflang tags and canonical tags

While both hreflang tags and canonical tags are essential for effective SEO, they serve different purposes and are used in different situations. The main difference between the two lies in their function and application:

Hreflang tags are used to indicate to search engines that multiple language- or region-specific versions of a web page are available. They are intended to help search engines present the correct language- or region version of a page to the appropriate users.
Canonical tags are used to point search engines to the preferred version of a set of duplicate or similar pages. The goal is to prevent duplicate content issues and ensure that search engines know which version of the content they should index and rank.

Both tags are crucial for a successful international SEO strategy, but it is essential to implement them correctly. Incorrect implementation can lead to SEO problems, such as incorrect indexing of content or loss of search engine rankings.

The Importance of Correctly Implementing Hreflang and Canonical Tags for International SEO

Correctly implementing hreflang and canonical tags is crucial for any website that targets an international audience. These tags not only help improve the user experience, but they also play a key role in optimizing your site for search engines.

Proper implementation can have the following positive effects on your SEO efforts:

Improved visibility in search engines by accurately targeting different language- and region-specific markets;
Prevention of duplicate content issues, which can lead to better rankings;
More efficient and effective indexing of your website by search engines.

Conversely, incorrect implementation of these tags can have negative consequences, including:

Lowered search engine rankings due to confusing signals about which version of a page should be indexed;
Poor user experience if visitors do not automatically see the correct language- or region version of your website;
Waste of crawl budget as search engines spend time indexing duplicate or irrelevant versions of content.

Therefore, it is essential to carefully implement both hreflang and canonical tags with tailored international keyword research to ensure a strong international presence and maximize your SEO potential.

How to Use Canonical and Hreflang Tags Together

Using canonical and hreflang tags together is often necessary for websites that offer multilingual content. Proper implementation of these tags ensures that search engines understand which version of a page is the preferred version and which version is specific to certain languages or regions.

Suppose you have a website available in English and Dutch. Here’s how you should use the hreflang and canonical tags together:

English page: https://www.example.com/en/page
Dutch page: https://www.example.com/nl/page

On the English page:

On the Dutch page:

By doing this, you indicate to search engines which version of the page is for which language, while simultaneously marking each page as the canonical version of itself. This prevents confusion among search engines about which version should be indexed and ensures that the correct language version is displayed to users in the search results.

Basic Principles for Implementing Canonical Tags and Hreflang Tags

You probably understand the importance of correctly implementing canonical tags and hreflang tags by now. However, we would like to point out some basic principles of properly applying these tags:

Use hreflang tags for every language version of your website: ensure that every page on your website has a hreflang tag that refers to itself and to all other available language versions.
Specify the language and optionally the country in the hreflang tag: the code for the hreflang tag consists of a language code followed by an optional country code. For example, en-us for English as spoken in the United States. Ensure that the language code always comes first. The notation gb-en (for Great Britain, English) is incorrect; it should be en-gb.
Use absolute URLs in your hreflang tags: an absolute URL is the full web address that includes both the protocol (http:// or https://) and the domain, and where necessary the path to a specific page. For example: https://www.example.com/nl/page.
Implement a self-referencing canonical tag if needed: a self-referencing canonical tag refers to the page itself as the preferred version. Place this on the original version of the page.
Do not place hreflang tags on pages with a canonical tag to another page: if a page refers to another page as the preferred version via a canonical tag, this page should not contain hreflang tags that refer to other language versions.
Use the x-default value for international homepages: the x-default tag is used for international homepages as a signal to search engines that this page is the default version for users whose language does not match one of the available language versions. Instead of placing ‘nl’ or ‘en’ in the hreflang tag, place ‘x-default’ here.
Ensure consistency between hreflang tags and the actual content: the languages and regions you specify in your hreflang tags should match the actual language and regional focus of the content on those pages.
Test and monitor your implementation: use tools such as Google Search Console to check whether your hreflang and canonical tags are correctly implemented and understood by search engines.

By following these guidelines, you prevent problems arising from incorrect implementation of hreflang tags and canonical tags.

Optimizing International SEO with the Implementation of Hreflangs Tags and Canonical Tags

The implementation of hreflang and canonical tags is a delicate process that has a significant impact on the SEO of multilingual websites. Correct use of hreflang tags ensures that users see the language- and region-specific versions of content that are relevant to them and choose the correct subdomain or subfolder.

This is not only important for the user experience but also for search engines that can better understand for which audience the content is intended.

On the other hand, canonical tags help search engines identify which version of duplicate or similar content should be considered the primary source. This prevents duplicate content issues that can negatively affect the visibility and ranking of certain pages on a site.

The careful implementation of hreflang and canonical tags is fundamental to the success of an international SEO strategy. These tags play an essential role in improving the user experience and optimizing the visibility of the website in different language and regional markets.

By ensuring that each page is correctly labeled and that the preferred version of content is clearly indicated, businesses can maximize their international SEO efforts and create a strong online presence worldwide.

Nils Jansen

Nils Jansen is our talented SEO specialist and the driving force behind our content strategies.With his in-depth knowledge of search engine optimization and passion for content creation, Nils plays a crucial role in increasing online visibility for our clients.