How to implement hreflang tag correctly (and new Google incorrect hreflang notice!)

google hreflang warning email

If you are managing a multilingual website, you might have encountered a situation where Google sent your visitors to a wrong language version of your site based on search results personalization. There is a strong chance that it may have been because you were (and maybe still are) using hreflang incorrectly.

This tag can be used to explicitly tell Google about the relationship of any page to an alternative language version at the specified URL.

Google incorrect hreflang notice!

A couple days ago, probably up to hundreds of thousands of webmasters received a notification from Google about their incorrect implementation of hreflang attributes on their websites. This signifies at least one of two possible things. It may mean that hreflang is a huge signal for Google’s search engine and incorrect implementation is so wide-spread that it is noticeably affecting their search results and user satisfaction. Or that Google could be planning on putting more importance on a correctly implemented hreflang attribute in the future and this is how they prepare for upcoming updates and changes. Either way, it is certain that hreflang matter a lot and that everyone should walk the extra mile in order to avoid all potential search issues.

google hreflang warning email
This is a screenshot of one of the warning emails that I received.

This is what the text is saying:

Google had detected that some pages on your site have implemented the rel-alternate-hreflang tag incorrectly. In particular, there seems to be a problem with incorrect language and region codes, or incorrect bi-directional linking (if page a links with hreflang to page B, there must be a link back from B to A as well). Google uses the hreflang attributes to serve the correct language or regional URL to the right users in search results.

Until you correct the errors on the hreflang links, your website will not benefit from additional language or region targeting.

If you have found such notification in your search console, you need to make sure to fix the issues as soon as possible or you may not be able to correctly target users in a certain region and suffer in terms of your click-through rate and SERP position.

Potential issues include search engines displaying more versions of your website or giving users the wrong variation in relation to their location.

For example:

example of website in SERPs showing in wrong location - usa site in the UK

Instead of the correct British version:

example of website in SERPs showing in wrong location - UK site in the US

The worst issue happens when you expand the site to a new language, but search engines never include this new variation because they have no clue that these new pages were created.

How to implement hreflang

Let us illustrate how to correctly implement hreflang on an English language page located at httt://www.example.com/. This website has three language variations – English (example.com/en), Russian (example.com/ru), and German (example.com/de).

The main page is going to be served to those users who cannot be properly identified or are using mixed language settings. Each language version of a URL has to include all other language versions, including itself.

This means that we can implement hreflang using HTML link element in header, like this:
<link rel=“alternate” href=“http://example.com/en” hreflang=“en” />

<link rel=“alternate” href=“http://example.com/de” hreflang=“de” />

<link rel=“alternate” href=“http://example.com/ru” hreflang=“ru” />

<link rel=“alternate” href=“http://example.com/” hreflang=“x-default” />

This tells Google and other search engines including Yandex that there are alternative language versions for the same page. And this is how you would then implement hreflang on your subpages:
<link rel=“alternate” href=”http://example.com/en/seo” hreflang=“en” />

<link rel=“alternate” href=“http://example.com/de/seo” hreflang=“de” />

<link rel=“alternate” href=“http://example.com/ru/seo” hreflang=“ru” />

There is no need for x-default variation because it serves only as a default gateway and example.com/seo does not exist.

Language version information can also be submitted in a sitemap.xml, like this:

<url>

<loc>http://example.com/en/of­fer/</loc>

<xhtml:link

rel=“alternate”

hreflang=“en”

href=“http://example.com/en/seo”

/>

<xhtml:link

rel=“alternate”

hreflang=“de”

href=“http://example.com/de/seo”

/>

<xhtml:link

rel=“alternate”

­hreflang=“ru”

href=“http://example.com/ru/seo”

/>

</url>

This guarantees that Google will fully understand how our website operates and can serve the best possible page in search results.

A few extra tips

In addition to a language, you can also specify a country. This way, Spanish-speaking visitors from Mexico will get a different page from those who speak Spanish but do not live in Mexico.

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

<link rel=“alternate” hreflang=“es-mx” href=“http://www. example.com/es-mx/”>

Make sure to always use a correct language and region codes. That means ISO 639-1 for language codes and ISO 3166-1 Alpha 2 for region targeting. It is best to always check and make sure that you are using the correct code since not all of them are intuitive. For example, UK uses “gb” and not “uk”.

If you are still not sure how to correctly write hreflang, you can take advantage of Hreflang Tags Generator Tool. By inputing the URL, language, and country you are targeting the tool is able to generate correct hreflang tags for each different language and country.