Hreflang and Canonical Tags: The Right Ways to Use Both

Two HTML elements that have the ability to drastically affect your SEO (in both good and bad ways) are hreflang and canonical tags. 

Improper use of either could cause incorrect pages to appear for users, or for Google to index an incorrect version of a web page. 

Complicating things further, many SEOs confuse hreflang and canonical tags since they both serve similar purposes. 

Both HTML tags tell search engines which version of a page to index, but the similarities end there. 

Here’s a simple breakdown of the difference:

1. Hreflang (pronounced H-ref-lang, by the way) tags determine which language your site appears in for search users. These tags only apply if you have multiple versions of your site in other languages. 
2. Canonical tags are a way to deal with duplicate content, like two extremely similar versions of a product page (one for each color). A canonical tag lets search engines know which version of the page to include on search engines. Without using canonical tags, search engines won’t know which version to rank, so they’ll alternate between the two (causing major dips in traffic). 

An easy way to remember the difference is that hreflang deals with languages, and canonical tags deal with duplicate content. 

Besides knowing when to use which, there’s a proper way to implement hreflang and canonical tags in your content. If you don’t format them correctly, they could wind up having no impact at all. 

That’s why we put together this article breaking down the proper way to use hreflang and canonical tags, so stay tuned. 

What are Hreflang and Canonical Tags?

Technical SEO dives into the code and server level of your website, including your HTML and CSS. 

Since it’s more ‘technical’ in nature, this aspect of SEO can intimidate some marketers. 

However, you only need a basic grasp of HTML to understand how to properly use things like title tags, hreflang tags, and canonical tags. 

The best way to understand hreflang and canonical tags is to provide an example of each, so let’s do just that. 

What are hreflang tags?

First, let’s break down what the term ‘hreflang’ actually means. 

At first glance, it may seem like a random hodgepodge of letters, but it’s shorthand for Hypertext Reference Language. 

H-ref, or hypertext reference, is an HTML attribute that specifies the destination of a link. 

Lang is an abbreviation for language.

Therefore, hreflang refers to link destinations related to languages. 

If you recall the definition from the intro, a hreflang tag lets search engines know which language version of your site to display to users on search engines. 

For example, you can set a hreflang tag to display the German version of your site whenever someone conducts a search in German. 

That way, they’ll automatically see the version of your site in their language, which provides a pleasant user experience. 

You can hreflang tags in action by searching for popular brand names + specific countries. 

Here’s what happens when we search for ‘Apple Germany’ on Google:

As you can see, the German version of Apple’s website (https://www.apple.com/de/) appears in the search results, and it’s because they’ve set up the appropriate hreflang tag to do so. 

A hreflang tag in action

Here’s an example of what a hreflang tag looks like in HTML:

<link rel =”alternate” href=”www.yoursite.com” hreflang= “de” />

Let’s break down each element so you can understand what’s happening here. 

‘Link rel’ means Link relation, and in this case, ‘alternate’ means we’re providing an alternative link destination. 

H-ref means hypertext reference (link destination), and your website comes after. 

Lastly, ‘hreflang = “de”’ is the language code for German (short for Deutschland). 

So, putting it all together, this line of HTML code means you’re providing an alternative link destination that’s a version of your website in German. 

We’ll dive more into the specifics of using hreflang tags in a bit, but that’s the basics. 

What are canonical tags?

Canonical tags, on the other hand, help you avoid duplicate content issues on search engines like Google. 

You may have heard the term ‘canon’ to describe fictional movies, novels, and TV shows. The official narrative for a franchise is considered ‘canon’ (official), while things like fan fiction and spinoffs are non-canon (not part of the official narrative). 

Canonical tags follow the same concept, as the page you designate as ‘canon’ is the one Google will display in its search engine results. All other versions of the web page will remain unindexed, but users will still be able to access them on your website. 

A common example is when an eCommerce store features nearly identical web pages for different sizes and colors of their products. 

Consider a product page for a baseball cap that comes in three colors: black, red, and blue. 

There’s a version (or dynamic filter) of the page for each color, and they all contain the same keywords. 

This confuses search engines, as they won’t know which version of your page to include in the search results. 

By including a canonical tag on the black version, you’re telling Google’s crawler bots to include it in the rankings and ignore the rest (we’ll dive more into the specifics of making this happen later). 

Duplicate content, when left unchecked, can wreak serious havoc on your SEO performance. 

How is that?

It causes crawler bots to become confused when indexing your pages since you have two nearly identical pages attempting to rank for the same keyword. 

This causes the bot to do one of two things. It will either A) ignore both pages, causing your content to disappear from the SERPs or B) alternate ranking the two pages, causing both to periodically disappear. Neither outcome is desirable, which is why canonical tags are so useful. 

Here’s an example of what a canonical tag looks like in HTML code:

Link rel= “canonical” href= “www.yoursite.com/baseball-cap-black/” />

To break that down, the link relation (link rel=) this time is canonical, meaning you’re telling which web page to include in its search rankings. 

The next part of the code tells the bot which page is canonical, which, in this case, is the product page for the black baseball cap. 

As a result, Google will only include this web page in its results, and the web pages for other colors of the hat are just for customers already on your site. 

How do Hreflang and Canonical Tags Impact SEO?

Depending on the nature of your website, you may not have the need to use either hreflang or canonical tags. 

For instance, if your business only operates in America, you won’t need hreflang tags because you won’t have versions of your site written in other languages. 

If the same site has no issues with duplicate content (maybe it’s a simple blog with only a handful of posts so far), canonical tags aren’t necessary, either. 

Strong web design is all about keeping things simple, so you shouldn’t complicate your HTML with unnecessary tags. 

Keeping that in mind, here are the main ways canonical and hreflang tags will impact your SEO if you use them. 

How do canonical tags affect SEO?

You should only use canonical tags if you suspect you have issues with duplicate content. 

Some common instances of duplicate content include:

• Dynamic pages that let users filter and sort through many options (like multiple colors and sizes of a product) 
• Using the same content across multiple sites 
• Engaging in a content syndication strategy 
• The same content appears across multiple categories on your site 

These are all cases where it makes sense to use canonical tags to avoid duplicate content impacting your SEO. 

However, there are many instances where it makes sense to use a 301 redirect instead of a canonical tag. An example would be if you have two URLs that direct users to your homepage:

1. https://www.yoursite.com 
2. https://yoursite.com 

In this case, it’s better to use a 301 to redirect users to your preferred version. This prevents two versions of your homepage from floating around the web, which helps keep things simple. 

In general, you should opt for 301 redirects whenever possible since they’re a simpler solution than using canonical tags. 

Here are some ways canonical tags will positively impact your SEO when implemented properly:

1. 1. Consolidated link equity. If you don’t use a canonical tag, Google will try to rank each version of a web page, which means spreading the link equity from backlinks. Whenever you designate one page as the official version for search engines, all the link equity focuses on it, making it a stronger contender in the search rankings.  

• Improve crawling efficiency. Besides eliminating the risk of duplicate content, canonical tags also make the crawling process run smoother. This is because search engines will know which pages to index and which to ignore. 

How do hreflang tags affect SEO?

Hreflang tags direct users to the appropriate language version of your website, which improves your user experience. 

There are different ‘ISO 639 language codes’ which let search engines know the language you want to display. We already mentioned German (de) before, but here’s a comprehensive list of the rest of them. 

Hreflang tags will positively impact your SEO in the following ways:

• Lower bounce rates. If a German user clicks on your site and it’s displayed in English, you can bet with almost 100% certainty that they’ll click back to the search results to choose another website instead. This isn’t good news for your bounce rates, and hreflang tags are the remedy. 

• Higher CTR rates. This goes hand-in-hand with the first point. Since your content will appear in the correct language, more users will click through to your website on search engine results pages (SERPs). 

• Content differentiation. There may be content that appeals to certain cultures more than others, and hreflang tags give you the freedom to split things up. For example, there may be content that you only include on the French version of your site because you know it only appeals to a French audience. 

Don’t Cross the Wires: How to Implement Hreflang and Canonical Tags 

Now, let’s learn how to properly use hreflang and canonical tags in your web pages. 

You’ll have several options when it comes to implementation, including:

1. Entering them in the <head> section of your HTML 
2. Using them in your sitemap 
3. Using tools to implement them 

Here’s how to knock out all three. 

Entering hreflang and canonical tags into the <head> section 

Both hreflang and canonical tags will only count if they appear in the <head> section of your HTML, so don’t include them anywhere else. 

Using a CMS like WordPress, you need to navigate to your header.php file. You can either get to it by using FTP (file transfer protocol) or going to Appearance > Theme Editor. 

Once there, either add a rel=canonical or hreflang=(language code) to the <head> section to activate the tags. Ensure everything is formatted properly, as so much as an unnecessary space can throw everything out of whack. 

Using canonical tags and hreflang tags in your sitemap 

If you’d rather not mess with your website’s code, you can opt to add canonical and hreflang tags to your sitemap instead. 

The XML sitemap method tends to work better for larger websites, as manually editing the HTML code of every web page can be a daunting (or nearly impossible) task for sites with thousands of web pages. 

However, the tradeoff is that it requires a trickier setup than simply adding HTML tags. 

Once you’ve created a sitemap, you have to integrate hreflang tags to every page. 

Google has some highly specific instructions for this, so be sure to follow their guidance to the letter. 

While adding hreflang tags to each page on your sitemap is still time-consuming, it’s far quicker than manually entering HTML tags since the sitemap provides a centralized location for all your URLs. 

Using tools to make implementing HTML tags quicker and easier 

If you really don’t want to waste any time implementing canonical and hreflang tags on your website, there are plenty of tools that will automate the process for you. 

An example is the Yoast SEO WordPress plugin, which will automatically add canonical tags to your URLs without you having to do anything. 

For hreflang tags, GeoTargetly offers a free hreflang tag generator you can use to automatically create the appropriate hreflang tag for each web page. 

Implement Canonical and Hreflang Tags to Improve Your SEO Performance 

Those are the proper ways to use hreflang and canonical tags on your website to improve your SEO. 

Both tags will enhance your user experience and make the crawling process easier for search engines, so it’s essential to use them when it’s appropriate. 

Remember that it’s not always necessary to use canonical tags if you don’t have any issues with duplicate content. Also, if your business isn’t international, you probably won’t need hreflang tags either (unless your country features multiple languages). 

Do you need help mastering the technical aspects of your SEO?

One of our Technical SEO Audits is just what the doctor ordered, so don’t wait to try the service out!