What is Hreflang?

If your website has content in multiple languages for targeting audience from different countries, your website will benefit from using hreflang tags.

But, what is Hreflang and how to use it on our websites?

In this post, I’ll cover everything you need to about Hreflang, from the basic concept, to implementation, to avoiding common mistakes.

Let’s dive in.

Contents

What is Hreflang?
Why Is Hreflang Important for SEO?
How to Implement Hreflang Attributes
6 Best Practices for The Hreflang Attribute
8 Common Hreflang Mistakes
How to Track Hreflang Errors
Summary

The hreflang tag is an HTML meta tag that specifies the language and (optionally) the relevant geographic region for a page. It tells Google which language and country you are targeting for a specific page. This allows the search engine to serve the page result to users searching in that specific language and country.

Code Sample:

<link rel=”alternate” href=”http://example.com” hreflang=”en-us” />

This code tells Google that this English version of the page is specifically directed to a U.S. audience.

According to Google, sites should use hreflang tags in the following cases:

If you keep the main content in a single language and translate only the template, such as the navigation and footer. Pages that feature user-generated content, like forums, typically do this.
If your content has small regional variations with similar content, in a single language. For example, you might have English-language content targeted to the US, GB, and Ireland.
If your site content is fully translated into multiple languages. For example, you have both German and English versions of each page.

Why Is Hreflang Important for SEO?

First of all, it is important to note that an hreflang tag acts as a signal to search engines instead of a directive. From Google:

“Note that even without taking action, Google might still find alternate language versions of your page, but it is usually best for you to explicitly indicate your language- or region-specific pages.”

Google has neither confirmed officially about hreflang being a ranking factor nor do their technical documents have any confirmation regarding the same. So, hreflang may don’t have direct impact for SEO.

However, using hreflang helps sites to rank indirectly. Below are two significant points which capture the importance of hreflang to its fullest.

The main advantages of the hreflang attribute is by pointing users in the right direction. It engages a more local audience which may help in higher CTR and lower bounce rates. These then results in higher search engine rankings.

Hreflang helps to avoid penalties associated with duplicate content across global sites. It allows Google to distinguish between duplicate and similar content. Hreflang gives Google the clarity to understand that while the content is the same, it is optimized for different regions. This is useful when the localized content across regions essentially only varies by a few changes, for example, when adjusting for American, British and Australian differences in prices and currency or spelling.

Currently, Google and Yandex use the hreflang tag, but Bing and Baidu do not.

Search Engine	Does it support hreflang?
Google	Yes, through both HTML and XML Sitemap
Yandex	Yes, through HTML and XML Sitemap
Baidu	No, need to use the HTML Meta Language Tag
Naver	No, need to use the HTML Meta Language Tag
Bing	No, need to use the HTML Meta Language Tag
Seznam	Yes, through HTML

How to Implement Hreflang Attributes

You can use hreflang annotations in one of three different ways:

The link element in HTML
The HTTP header
The XML sitemap

Any of these can work, although some are easier to implement than others. Let’s take a deep dive into each of these and see which implementation is right for your site.

Note:

Regardless of which method you use, an hreflang tag should always be used on absolute URLs.
If you are running a WordPress website, learn how to add Hreflang tags in WordPress here.

1. Implementing the Hreflang Attribute in HTML

Placing the hreflang attribute in the HTML is simple and easy. If you are implementing for the first time, it may be the right one to choose. The hreflang attribute is used with a link tag and goes inside the head element of HTML Markup.

Example:

<Head>

<link rel=”alternate” hreflang=”en-us” href=”https://www.example.com”/>

<link rel=”alternate” hreflang=”en-gb” href=”https://www.example.co.uk”/>

</head>

Note: Implementing the hreflang attribute in the HTML is perhaps the easiest option, but this can slow down loading times for large sites who have a lot of languages to load. Also, it needs maintenance. Every time you add or remove a page, you’ll need to update your hreflang tags.

2. Implementing Hreflang Attribute in HTTP Header

Hreflang in the HTTP header, i.e., whenever Google requests for a page, the server in its response sends all the information about the page and presence of its variant version proactively. This way of implementing Hreflang is mostly for .pdf pages where the HTML markup is missing. If you publish PDFs or other non-HTML files, use the HTTP header to indicated a different language version

Here’s an example of what part of the HTTP header looks like when the hreflang attribute is defined there:

HTTP/1.1 200 OK

Content-Type: application/pdf

Link: <https://example.com/file.pdf>; rel=”alternate”;hreflang=”x-default”, <https://example.co.uk/file.pdf>; rel=”alternate”;hreflang=”en-gb”,

<https://example.es/file.pdf>; rel=”alternate”;hreflang=”es”,

3. Implementing The Hreflang Attribute in Your XML Sitemap

Implementing hreflang in the sitemap seems to be the most complex one, but it has its advantages, such as dealing with a single file. For any update on an addition or deletion of language or region, specific code can be placed without actually disturbing code on the website.

Adding your hreflang annotations in XML Sitemap can be painful since you need to add every language option to every URL in your sitemap. Here’s just one URL’s worth of markup for a page in two languages:

<url>

<loc>https://www.example.com</loc>

<xhtml:link rel=”alternate” hreflang=”en” href=”https://www.example.com” />

<xhtml:link rel=”alternate” hreflang=”es” href=”https://www.example.com/es” />

</url>

<url>

<loc>https://www.example.com/es</loc>

<xhtml:link rel=”alternate” hreflang=”es” href=”https://www.example.com/es” />

<xhtml:link rel=”alternate” hreflang=”en” href=”https://www.example.com” />

</url>

The major benefits that come with this kind of implementation are:

Easier to automate
Doesn’t add page weight for your users
Don’t have to edit multiple HTML documents each time you delete a page

6 Best Practices for The Hreflang Attribute

1. Reference Both the Page Itself and Its Translated Variants

Google documentation recommends every language version must contain a self-reference tag along with all the language and regional variants the site is targeting. Self- referencing tags should be followed by all URL present in hreflang annotation.

2. Make Sure to Have Bidirectional Hreflang Attribute References

Each hreflang attribute reference should be bidirectional. This means that each variant points to the other variants.

3. Always Set hreflang=”x-default”

In instances when you do not have a language or region that matches a user’s browser setting, you would use:

hreflang=”x-default”

X-default creates a default version of a page that does not target any specific language, or where users are asked to select a language once landing on a page. This should capture anyone who doesn’t have a language designated in their browser settings, or whose IP address doesn’t match any of the languages on your site.

4. The Hreflang Attribute and The Canonical URL Must Match

The use of the hreflang attribute can’t replace defining the canonical URL for a page. Both need to be defined. For example:

<link rel=”canonical” href=”https://www.example.com/” />

<link rel=”alternate” href=”https://www.example.com/” hreflang=”en-us” />

<link rel=”alternate” href=”https://www.example.com/ca/” hreflang=”en-ca” />

In this example the Canadian page (https://www.example.com/ca/) is the alternative variant for the current page. On that page the definition would look as follows:

<link rel=”canonical” href=”https://www.example.com/ca/” />

<link rel=”alternate” hreflang=”en-ca” href=”https://www.example.com/ca/” />

<link rel=”alternate” hreflang=”en-us” href=”https://www.example.com/” />

5. Correctly Define Language and Region Combinations

The value of the hreflang attribute identifies the language (in ISO 639-1 format) and optionally the region (in ISO 3166-1 Alpha 2 format) of a URL.

Remember, using only a region code is not sufficient. This means that you could simply choose a language code, but you’ll never just have a country code by itself. If you use a region code, you must also use a language code.

Also, regional or continental targeting does not work, so you can’t target the whole of Europe using en-eu.

6. Use Only One Method to Implement the Hreflang Attribute

Define the hreflang attribute using one method only. So for instance, don’t combine implementing it in the HTML and in the XML sitemap, because this can easily lead to sending mixed signals when you make a mistake or when there’s a bug.

8 Common Hreflang Mistakes

1. Incorrect Language Codes or Country Code

The language and region codes used in the hreflang tags come from the ISO 639-1 and the ISO 3166-1 Alpha 2.

While some of these codes are what people would expect them to be, such as ‘en’ for English, they are not all what most people would assume. For example, the UK is actually Ukraine, whereas the abbreviation for targeting those in England would be GB, for Great Britain.

As you work to create your hreflang tags, always carefully evaluate the abbreviations you use to make sure you target the right language and country.

2. Swapping Language and Country Codes

In order to be valid, the hreflang codes must be “language-country”. Putting the country before the language, as in us-en instead of en-us will cause your hreflang tag to be invalid and likely ignored by Google.

3. Page Referenced for More Than One Language in Hreflang

This warning triggers when one or more URLs are referenced for more than one language in hreflang annotations. For example:

Each piece of content should only serve one language or language-location. Having two or more contradicting references will confuse search engines, and they may end up ignoring both hreflang attributes.

4. Not Using Hyphens

Language and country codes must be separated by a hyphen for them to be correctly read. People sometimes use underscores, commas, semicolons or other punctuation between them.

5. No Return Tags

If page A links to page B through hreflang, then page B must link back to page A. If not, your hreflang might not be read correctly.

Forgetting the self-referencing hreflang tag is probably the most common return tag error.

These errors are highlighted in Google Search Console, so it’s important that profiles are set up to cover each of the localized site versions.

Learn how to fix Hreflang no return tags issue.

6. Linking to Redirected, Broken or Nonexistent Pages

Linking to pages that return 4xx, 5xx or HTTP status codes other than 2xx is almost always a problem. And hreflang links are no different.

If Google can’t access the page linked in the hreflang tag, it won’t be able to crawl, index and serve that content to the right audience.

7. Not Using Canonical Tags and Hreflang Tags Together Correctly

The hreflang tag also can be used along with rel=”canonical” annotations, but multi-language tags need to reference self-referential canonical URLs.

For example, page A should have a canonical tag pointing to page A, page B should have a canonical tag pointing to page B, and page C should have a canonical tag pointing to page C. All three pages should have hreflang tags that mention all three of the pages in the group.

Here is an more detailed example.

For the United States page (http://www.example.com/usa/), the right usage of the hreflang and canonical tags must be next:

<link rel=”alternate” hreflang=”en-us” href=”http://www.example.com/usa/” />

<link rel=”alternate” hreflang=”en-ca” href=”http://www.example.com/ca/” />

<link rel=”Canonical” href=”http://www.example.com/usa/” />

And on the Canadian page (http://www.example.com/ca/), the hreflang tags would remain the same, but the canonical tag would be:

<link rel=”alternate” hreflang=”en-us” href=”http://www.example.com/usa/” />

<link rel=”alternate” hreflang=”en-ca” href=”http://www.example.com/ca/” />

<link rel=”Canonical” href=”http://www.example.com/ca/” />

8. Hreflang to non-canonical

Rel=“alternate” hreflang=“x” will instruct search engines to show the translated (localized) version of a page while rel=canonical attribute will flag that this is not the authoritative (canonical) version. These two attributes contradict each other and confuse search engines.

Make sure hreflang annotations point to canonical URLs only.

How to Track Hreflang Errors

The best way to track and fix hreflang errors is to check the International Targeting Report in Google Search Console.

This report has the following sections:

The Language section: Monitor the usage and errors of hreflang tags on your site.
The Country section: Set a site-wide country target for your entire site, if desired.

Summary

Any business that has multilingual sites needs to consider implementing hreflang to optimize SERPs and improve user experience.

However, hreflang is one of the most complex aspects of SEO (if not the most complex one). Many of us cannot use it correctly. So, when implementing Hreflang in your website, be sure to follow our best practices and avoid the common mistakes.

TBH hreflang is one of the most complex aspects of SEO (if not the most complex one). Feels as easy as a meta-tag, but it gets really hard quickly.
— ? John ? (@JohnMu) February 19, 2018