Hreflang Tags: How to Use Them?

If you have a website and want to make it multilingual to reach new markets, you must "notify" Google and other search engines using hreflang tags so that they take it into account and, among other things, do not penalize you for duplicate content. The rel="alternate" hreflang="x" attribute is nothing more than a language annotation that helps search engines detect where each visit comes from and thus show the content in the language corresponding to their country or region. We will teach you when and how to use them, as well as the most common mistakes you should avoid.

When should the hreflang tag be used?

The implementation of hreflang tags is essential, as it is obvious, for websites that are fully translated into several languages. If your site is in English, German, and Spanish, these attributes will serve to ensure that if someone searches for something in German about your page, Google will automatically show them that version in German.

But it is also useful for those that provide a service, although somewhat limited, by being in a single language and only translating the template.

Similarly, it is necessary for those that, using a single language, have regional varieties or different countries and have translated the website accordingly, as can happen with the Spanish of Spain and the Spanish of a Latin American country, or the English of the United States and England.

How to place hreflang tags on a website?

Google offers up to three ways to place these attributes on your website. Choose the one that is most comfortable for you.

The first is to place the tags in the header of your page's HTML code, specifically in the head section. The format would be as follows, if we want to indicate that we have a version in German (the "de" is for Deutschland, which would be "it" in the case of Italy, "es" for Spain, etc...):

<link rel="alternate" hreflang="de" href="http://www.example.de/" />

But it looks much better applied to a real case, right? Here you can see the web code of an online store with 11 languages, with its hreflang tags correctly implemented:

For the cases we mentioned earlier regarding varieties within the same language, the procedure is the same, but adding that variable.

In the following example, we see how it should be placed so that the website distinguishes between English-speaking users from Ireland (ie), Canada (ca), and Australia (au). The last one, where only the language identifier "en" appears, means that any other user different from those mentioned will end up on the generic English language website.

<link rel="alternate" href="http://example.com/en-ie" hreflang="en-ie" />
<link rel="alternate" href="http://example.com/en-ca" hreflang="en-ca" />
<link rel="alternate" href="http://example.com/en-au" hreflang="en-au" />
<link rel="alternate" href="http://example.com/en" hreflang="en" />

At this point, it is important to establish a canonical URL, which will be by default the original language of the website. This is essential for properly establishing the rest of the tags.

The second method of placing the tags is for when we work with files that are not HTML, such as PDFs. In such cases, the HTTP header should be used as follows, continuing with the previous example:

Link: <http://www.example.de/>; rel="alternate"; hreflang="de"

If we had it in more languages, it would be exactly the same, but we would separate them with a simple comma.

Finally, a very simple way to alert Google about our hreflang tags is through the sitemap. When generating it, the versions in the languages in which we have our website will be included. Here is an example of a website with 11 languages and its reflection in the sitemap:

Depending on how you have built your website, there will be specific modules or plugins to automatically install these tags. The only thing to keep in mind in these cases is that they do not clash or are incompatible with other applications. Always check that they do their job correctly before launching it.

Here we leave you the link to a utility that automatically generates hreflang tags.

Common mistakes when placing the hreflang tag

Google has a tutorial page on the use of hreflang tags that is good, but it may sometimes be too technical and mislead many users at some points.

For example, a common mistake among those who dare to use this attribute is placing it in the index of the homepage and also in the index of each page of the website. This will cause duplications, so the errors that Google Search Console warns you about in its "International Targeting" section will multiply.

Once corrected, over the days -sometimes even weeks- those errors will gradually reduce until they are completely extinguished. Our advice is that you do not use different types of multilingual tagging at the same time. If you resort to meta tags in the code of your header, do not send a multilingual sitemap.xml to Google on another side.

Another important point is to know that each page must include a hreflang tag that links to the other languages, as well as a tag that refers to itself:

If we do not have those reciprocal links on all pages with the attribute, we will mess things up. When Google crawls your website, you will tire of reading the message "No return tags found".

Here we leave you the link to a free online tool that tells you if you have errors in your hreflang tags.

On websites with variants of a language, it is common to mess up by only including the country code. The reason is simple: there are countries whose nomenclature coincides with that of a language that has nothing to do with it. For example, "be" corresponds to the Belarusian language, while it is also the identifier for the country Belgium. Therefore, Google does not suffice with just putting the country or region.

This supposed inconvenience actually turns into an advantage, as we can combine both variables at will. For example, if your website is Spanish, but you also target a German audience in your own country, you can include the mode "de-ES". That would show your page in German for users in Spain.

Remember that it is important to use distinct URLs for each language. You should also not use cookies to show translated versions of your website.

The correct use of hreflang can also help to improve the SEO of our website. Look at this "extreme" success case that explains Natzir Turrado. A page that, after correctly implementing international targeting tags, increases its traffic by 918%:

And the content, should it be translated?

The most common thing when you have a multilingual website is that the contents are the same or very similar. Google suggests that the optimal would be to offer different information for each audience. However, it is fully aware that this is often, or almost always, unfeasible.

Hence, it generally recommends not hiding those duplicate contents using robots.txt files or resorting to "noindex". If you do not index these pages, you will not be able to rank in those other countries or languages.

Now, if we publish the same content for the same users at different addresses, we must choose which version we prefer. The next step is to redirect people to it. That’s precisely what the rel=canonical link is for. Never to give more importance to your language than to the rest, which can backfire on you.

Have you ever used hreflang tags? Did you encounter many errors? What benefits have you noticed? Tell us in the comments. In the language you prefer!