How to Implement Hreflang & Canonical Tags Correctly

On the surface, both the hreflang tag and canonical tag do similar things – tell search engines which version of a page they are supposed to index and deliver to particular searchers. However, these tags do not have the same function. They are not the same thing.

As digital marketers, we keep abreast of the latest search marketing news and technical best practices with the same kind of zeal seen in tweens following the Kardashians on Instagram. (Disclaimer: I have no idea if the kids are even still using Instagram.) Sometimes those official announcements or directions from search engines are straightforward but other times you can still read a post from Gary Illyes and end up doing some head-scratching. The hreflang and rel canonical tags are seemingly simple HTML meta tags but have repeatedly caused confusion within the International SEO community.

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
• Hreflang instructions within XML sitemaps

And the list goes on.

Once you factor in the added complexity of things like trying to serve up the right page of a non-responsive site with mobile pages, even really good webmasters can end up cross-eyed with the resulting web of directives and tags. Worse still, when the next gal takes over, there’s seldom a map left behind to explain the mess logic. I’d argue that’s a pretty good reason to take a close look at these tags, and make sure it’s not just working but actually done right.

But before we start to break down the confusion and get into prescriptive guidance, let’s get clear on the basics.

What is the hreflang attribute?

Webmasters 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.

For example, a webmaster 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/

So, how does a search engine decide which of these technically “duplicate” pages should show up in a search engine result? And how would that change if, say, an ex-pat American was living in Germany?

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

Language Signals

The hreflang tag signals to search engines that if a user is querying in “German” to return the German version of the “About Transwarp Beaming” page instead of English. Matching the correct piece of content to searcher helps to improve CTR and ensures that your users have a better user experience reducing bounce rate and increasing conversions.

Regional Signals

The hreflang tag can also be used to show that a site has content targeted toward regions that speak the same language. For example, let’s say a webmaster wanted to target English users in Ireland, Canada, and Australia and all other users to see a generic English (default) page. These are the hreflang attributes you should see on all pages:

<link rel="alternate" href=" hreflang="en-ie" />
<link rel="alternate" href=" hreflang="en-ca" />
<link rel="alternate" href=" hreflang="en-au" />
<link rel="alternate" href=" hreflang="en" />

What is a canonical tag?

It’s 2018 and I’m fairly certain even my cat knows what a canonical tag is, so I won’t spend too much time here. Canonical tags (aka rel canonical) are used to inform search engines that one URL is the official version of a page. This means if you have duplicate pages on your site, a canonical tag is used on those duplicates to point to the one official version and informs search engines to “index and deliver this in the SERPs.”

<link rel="canonical" href="/>

At this point you might be getting confused again and thinking “gee, earlier you said the tags were different, but the two tags are starting to sound similar again.” Although slight, there is a difference:

• Canonical Tag – Says “I’m the official version of this page so index me”
• Hreflang Tag – Says “I’m the X language and X country version of this page”

So how do we implement hreflang and canonical tags correctly?

Let’s get back to the example of the webmaster 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/

Both pages can have both canonical and hreflang tags. One important thing to note is that the hreflang tag on each page should reference itself as well as its alternate language versions. In other words, the German and English versions of the page must refer to one another. This is also why hreflang tag is also known as the “rel alternate tag.”

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

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

Most common mistakes implementing hreflang and canonical tags

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

German Page

<link rel="alternate" href=" hreflang="de-de" />
<link rel="alternate" href=" hreflang="en-us" />
<link rel="canonical" href="

Why is this wrong, and why is it so common?
The implementation above is telling search engines that even if a German user searches for this page, we’d like the English page to show up. The mistake lies in referring to the “.com” page as your canonical or universally preferred version.

This is extremely common for sites that grow organically over time, and who may have had some form of duplicate content issue that they were trying to manage. “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.” Absolutely the right decision at the time, but 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.

Other common misconceptions about hreflang and canonical tags

Misconception 1: Canonical tags are not needed when hreflang tags are on a page.

This is incorrect, as we’ve shown above canonical tags and hreflang tags can be used together when implemented properly.

Misconception 2: The URLs from the default site should always be used as the canonical URLs over the regional pages

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

Misconception 3: I don’t have a responsive site and have separate mobile URLs. I don’t need hreflang tags on my mobile URLs, I only need canonical tags pointing to the desktop URL.

This is outdated and incorrect. In the past, non-responsive mobile URLs only required canonical tags referring to desktop versions. However, with the mobile-first index announcement, Google is changing their advice. John Mueller recently confirmed in November 2017, that hreflang tags should be used on mobile URLs and desktop URLs.

Hreflang tags must use absolute URLs.

Okay you caught us, this is correct. The current SEO best practice is to use absolute URLs in hreflang tags.

Extra tips and tools for hreflang

Hreflang implementation for non-HTML files.

HTTP header – For any non-HTML files (i.e. PDF) use the HTTP header like this: Link: rel=”alternate”; hreflang=”de”

Give hreflang information via XML

Instead of using markup, submit language version information in a XML sitemap.

For example, on this Australian/English page, here is an example of the language version information you would include in an XML sitemap:

Google’s Developer Guide

https://support.google.com/webmasters/answer/189077?hl=en

Moz Hreflang Attribute

Learn more about hreflang tags.

Hreflang Tag Generator

Aleyda Solis’ hreflang tag generator.

Summary

Although nuanced, implementing hreflang and canonical tags does not have to be confusing. Both tags are helpful signals to search engines and important to include when crafting a solid international SEO strategy. Canonical tags are used to signal the official version of a URL whereas hreflang tags are used to match the correct piece of 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 and are not directives. It’s still ultimately up to the search engine’s algorithmic discretion, meaning there are other SEO factors that may take precedence or be weighted along with both of these tags that can cause alternate versions of a page to rank higher.

Hopefully you’ll walk away from this post with a clear sense of when and how to use both the hreflang and canonical tags, especially in tandem. Now go forth, and use that wisdom to ensure the correct version of your pages are delivered to create a great user experience.