How to Implement Hreflang & Canonical Tags Correctly

Hreflang and canonical tags are signals to search engines of which version of a page to index and rank. They both help avoid duplicate content issues, but hreflang tags specifically indicate which language version of a page to serve a searcher. While they do not have the same function, both are integral to a solid international SEO strategy.

At Portent, we’ve seen various implementations across our clients’ international sites:

  • Hreflag and canonical tags implemented
  • Only using canonical tags
  • Only using hreflang tags

And the list goes on.

Before we break down how to best implement hreflang and canonical tags, let’s clarify some basic definitions.

What is the hreflang tag?

Web admins with international websites often have multiple versions of the same page that have been localized to target users in a specific country or speaking a different language. 

Google introduced the hreflang tag (a.k.a. rel=”alternate” hreflang=”x”) back in 2011 to help web admins with multiple international sites deliver the correct version of localized content to searchers.

For example, a web admin might have an “About Transwarp Beaming” page on their English and German domains:

  • English/USA – https://www.example.com/transwarp-beaming/
  • German/Germany – https://www.example.de/transwarp-beaming/

Hreflang can be placed on your site in three places:

  • HTML markup in the page <head>
  • the HTTP header
  • or the XML sitemap

In this post, we will focus on the first method (inserting hreflang into the HTML markup of the page <head>), but you can read about how to implement the other two in our resource, “How to Target International Users with SEO.”

So, how does a search engine decide which of these technically “duplicate” pages should appear in a search engine result? And how would that change if, say, the searcher was an expat American who lived in Germany?

Language Signals

The hreflang tag signals to search engines that if a user is querying in German, the search engine needs to provide the German version of the “About Transwarp Beaming” page instead of the English version. Matching the correct piece of content to searchers helps improve click-through rate and ensures users have a better on-site experience, reducing bounce rate and increasing conversions.

The hreflang attribute value must denote language using ISO 639 language codes. Here’s what this would look like on our “About Transwarp Beaming” pages:

<link rel="alternate" href="https://www.example.com/transwarp-beaming/" hreflang="en" />
<link rel="alternate" href="https://www.example.de/transwarp-beaming/" hreflang="de" />

Regional Signals

Not only can the hreflang define the language the page is in, but it also allows you to (optionally) define the region of the world your page is targeting. 

Let’s continue with our “About Transwarp Beaming” example. Say we wanted to add one more version that targets English speakers who live in the United Kingdom:

  • English/USA – https://www.example.com/transwarp-beaming/
  • English/UK – https://www.example.uk/transwarp-beaming/
  • German/Germany – https://www.example.de/transwarp-beaming/

Here is what the hreflang would look like on each of these pages:


<link rel="alternate" href="https://www.example.com/transwarp-beaming/" hreflang="en-us" />
<link rel="alternate" href="https://www.example.uk/transwarp-beaming/" hreflang="en-gb" />
<link rel="alternate" href="https://www.example.de/transwarp-beaming/" hreflang="de" />

It is important to note that the regional identifier must always be placed after the language identifier. The regional identifiers must use the ISO 3166 country codes.

X-default

What would happen in our example of the expat American living in Germany? If they put in an English query, should search engines show them the US or UK version of our page? 

If you do nothing, Google will make the call. But for maximum control, it is best practice to define a default page that searchers should see in this event. To specify that default page, you would add another hreflang tag with “x-default” in place of “language-region:”

<link rel="alternate" href="https://www.example.com/transwarp-beaming/" hreflang="x-default" />

What is a canonical tag?

Canonical tags (aka rel=”canonical”) signal to search engines that one URL is the official version of a page and should be indexed. If you have duplicate pages on your site, a canonical tag is used on those duplicates to point to the one official version and inform search engines to “index and deliver this one in the search engine results page (SERP).”

It is best practice in SEO to define the canonical on every page, even when you don’t have multiple versions of the page. When a page has a canonical tag pointing to itself, that is called a “self-referential” canonical tag. This practice offers you the most control possible over your site’s indexation.

Difference between hreflang and canonicals

At this point, you might be getting confused again and thinking, “Gee, earlier you said the hreflang and canonical were different, but they’re starting to sound similar again.” Yes, they both offer you some control over indexation, but they serve very different purposes:

  • Canonical tags signal that only one version of a page should be indexed.
  • Hreflang attributes say, “I’m the X language and X country version of this page.”

If you have multiple versions of a page targeting users speaking different languages, you want all those pages indexed, not just one version.

How do we implement hreflang and canonical tags correctly?

Let’s get back to the example of the web admin with the “About Transwarp Beaming” page in English and German.

  • English/USA – https://www.example.com/transwarp-beaming/
  • German/Germany – https://www.example.de/transwarp-beaming/

This is the on-page markup you should see in the HTML <head> sections of the English page:

<link rel="alternate" href="https://www.example.com/transwarp-beaming/" hreflang="en" />
<link rel="alternate" href="https://www.example.de/transwarp-beaming/" hreflang="de" />
<link rel=”canonical” href=”https://www.example.com/transwarp-beaming/” />

And this is the on-page markup you should see in the HTML <head> sections of the German page:

<link rel="alternate" href="https://www.example.com/transwarp-beaming/" hreflang="en" />
<link rel="alternate" href="https://www.example.de/transwarp-beaming/" hreflang="de" />
<link rel=”canonical” href=”https://www.example.de/transwarp-beaming/” />

Let’s break down the best practices we are seeing in these examples.

Each page lists every alternate language version of the page

Both pages have hreflang referencing itself and the alternate language versions. Cross-linking to all “alternate” versions helps establish the relationship between pages for search engines.

According to Google’s international and multilingual guide, if you don’t do this, they will ignore your tags “so that someone on another site can’t arbitrarily create a tag naming itself as an alternative version of one of your pages.”

Each page uses absolute URLs

An absolute URL includes the full URL, including the protocol and domain, while a relative URL only includes the path.

  • Absolute URL:  https://www.example.com/transwarp-beaming/
  • Relative URL: /transwarp-beaming/

The issue of using relative URLs becomes apparent when you highlight the path on both versions of our “Transwarp Beaming” page:

  • English domain – https://www.example.com/transwarp-beaming/
  • German domain – https://www.example.de/transwarp-beaming/

Yup! They both have the same path. Using the absolute URL ensures that search engines find the correct page.

Each page is self-canonicalized

While it might seem pretty intuitive by now, the most prevalent mistake we see in the wild looks something like this:

German Page:

<link rel="alternate" href="https://www.example.com/transwarp-beaming/" hreflang="en" />
<link rel="alternate" href="https://www.example.de/transwarp-beaming/" hreflang="de" />
<link rel=”canonical” href=”https://www.example.com/transwarp-beaming/” />

Why is this wrong, and why is it so common?

The implementation above tells search engines that we’d like the English page to appear even if a German user searches for this page. The mistake lies in referring to the “.com” page as your canonical or universally preferred version.

This implementation is common for sites that grow organically over time and may have had some form of duplicate content issue they were trying to manage. For example, “Our SEO told us to declare a canonical version of the home page because we were splitting our authority across multiple URLs for the same page, so we did.” 

It was the right decision at the time. Still, if the page was updated with hreflang markup later and the canonical structure goes untouched, you’ll end up with some seriously crossed wires for international visitors.

Common misconceptions about hreflang attributes and canonical tags

Now that you know the difference between hreflang attributes and canonical tags, and their distinct purposes, you should be able to avoid some of the most common international SEO mistakes. 

Nevertheless, implementing hreflang and canonical tags can quickly get confusing, so let’s go over some common misconceptions about implementing them together.

Misconception 1: Canonical tags are unnecessary when hreflang tags are on a page

This is incorrect. As shown above, canonical and hreflang tags can and should be used together.

Misconception 2: Always use the URLs from the default site as the canonical URLs over the regional pages.

This is incorrect. Always using your default site pages as canonical URLs will tell search engines to ignore the regional versions and index and feature the default sites in the SERPs.

Misconception 3: Hreflang attributes have to be in a particular order

As previously discussed, you must list every alternate version in the header. In our “Transwarp Beaming” example, we have one version in English and one in German. Both pages contain the following hreflang:

<link rel="alternate" href="https://www.example.com/transwarp-beaming/" hreflang="en" />
<link rel="alternate" href="https://www.example.de/transwarp-beaming/" hreflang="de" />

Some people might say that on the German page, the order should be flipped:

<link rel="alternate" href="https://www.example.de/transwarp-beaming/" hreflang="de" />
<link rel="alternate" href="https://www.example.com/transwarp-beaming/" hreflang="en" />

In reality, it doesn’t matter. Search engines only care that every version is listed, and they can follow the links no matter what order they’re in. We recommend that you list them consistently across pages to make it easier should you need to audit or update hreflang down the road.

Maintaining an international SEO strategy

Although nuanced, implementing hreflang attributes and canonical tags does not have to be confusing. Both are helpful signals to search engines and essential to include when crafting a solid international SEO strategy. 

To summarize, canonical tags signal the official version of a URL. Hreflang tags match the correct content to region-specific users speaking another language.

However, it’s important to remember that the hreflang attribute and canonical tags are just signals or hints, not directives. It’s still up to the search engine’s algorithmic discretion, meaning other SEO factors may take precedence or be weighted along with both of these tags, causing alternate versions of a page to rank higher.

That said, with this guide, you now have a clear sense of when and how to use the hreflang and canonical tags, especially in tandem. Now, use that wisdom to ensure the correct versions of your pages are delivered to create great user experiences.

Jonathan Marquez

SEO Specialist
SEO Specialist

Jonathan brings a passion for relationship building and an education in digital marketing to his role as an SEO Specialist. He works with clients to identify quality content and influencers that can tell a powerful narrative about their product or service, strengthening a brand's connection with their audience through meaningful ways. Outside of work, you can find Jonathan exploring a new recipe in his kitchen, or watching his plant family grow.

Start call to action

See how Portent can help you own your piece of the web.

End call to action
0

Comments

  1. You sure about the German – English – German example. Shouldn’t the first two tags be in different orders for each scenario? You have them as the same.

  2. Thanks for the how to guide đŸ™‚
    For an international website not targeting any specific geographic location on the planet, what would you recommend in relation to the hreflang attribute?
    Should the International Targeting be set as Unlisted on Search Console?
    Should we ignore the hreflang tag completely on the website?
    Some use cases for this would be blog sites in English or services providers who work remotely.

Leave a Reply

Your email address will not be published. Required fields are marked *

Close search overlay