Hreflang

In the field of digital marketing and, more specifically, in the world of the SEO, the hreflang tag is of great importance. On websites that aim to reach a large number of countries, this tag is an indispensable element. However, it must be implemented correctly in order to avoid confusing Google and end up being punished by the algorithm, slowing down the growth of the web.

At Euroinnova, we would like to explain to you what the hreflang tag, We'll also tell you about the different ways to implement it. Finally, we will talk about the different problems that may arise after its implementation so that you don't go crazy looking for the causes of your stagnation.

Are you ready? Let's get started!

What is the Hreflang label?

As you can already guess, the hreflang tag forms an attribute HTML which communicates the language and the region of destination of a website. This makes Google understand which is the most appropriate version of that page for a given country and language. For this reason, it is often said that this tag belongs to the field of International SEO, The company is becoming important in global businesses with a presence in various parts of the world.

Let's look at an example. Imagine that you have a website, through which you sell products in both Spain and Mexico. Although it is the same language, you can optimise certain elements such as the currency or certain expressions. Thus, the hreflang tag would be responsible for showing the appropriate version to users in Spain and Mexico. It does this after checking your geographical area through the IP address.

How a Hreflang label is produced

We continue to delve into the hreflang tag. First of all, let's look at an example of it:

<link rel="alternate" href="url_of_page" hreflang="lang_code" />

What does each of its elements mean? We anticipate this question and give you the answers:

• link rel=»alternate» tells Google that the link in this tag is an alternate version.
• href=»url_of_page» href="url_of_page" communicates the location of the alternative page.
• hreflang=»lang_code» corresponds to the alternative language.

How to create a Hreflang tag?

The first element to consider is the language and country code. The reference you should use is clear: the two-letter ISO 639-1 language codes and ISO 3166-1 alpha 2 country and region codes.

With this information, your hreflang attribute would look like this:

<link rel="alternate" href="" hreflang="en" />

<link rel="alternate" href="" hreflang="en" />

<link rel="alternate" href="" hreflang="pt" />

An important aspect to bear in mind is that in every attribute hreflang you must include a reference to all the pages that serve as alternatives, as well as a self-reference. Why? Because if you don't, the search engines and Google can ignore your hreflang tags.

Another situation you may encounter is that several countries speak the same language. For example, if you put Portugal in the tag, but make no mention of Brazil, you may end up displaying content in English to users in Brazil. Therefore, it is important that you add all references that may affect your global business.

Here is an example of how these hreflang attributes would look like with the language-country indications:

<link rel="alternate" href="" hreflang="pt-pt" />

<link rel="alternate" href="" hreflang="pt-br" />

Don't forget the x-default tag

One element that should not be overlooked is the label x-default. This is used to point to the page to display when no other local version is registered. In this way, in the tag we introduce which is the main page, so that users in unregistered locations enter this path.

Here is an example:

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

<link rel="alternate" href="" hreflang="en-es" />

<link rel="alternate" href="" hreflang="pt-pt" />

<link rel="alternate" href="" hreflang="pt-br" />

<link rel="alternate" href="" hreflang="x-default" />

Where do we put the Hreflang label?

We will now delve into the three ways in which we can implement the hreflang tag on our website.

Hreflang tag in HTML

The first way to implement the hreflang attribute is via the HTML. How do we do it? Once you have formed it, you must move it to the part of the page. Remember that each version of an article must reference itself. Otherwise, we know that Google and other search engines may ignore your signal.

The problem is that this method can be time-consuming. For example, every time you translate an article into another language, you will have to go back and add the new hreflang tag to all previous versions. As we say, this can be very tedious, giving rise to errors that can have consequences in our positioning.

Hreflang tag in the HTTP header

Why implement the hreflang tag in the HTTP header? Because it is the ideal place for non-HTML content such as PDFs, for example. This HTTP header is responsible for transferring data between a server and a client. For example, information such as request date, sender or preferred language is exchanged.

The problem with this method is that you can overload the server. For this reason, it is recommended to use it only when strictly necessary, leaving aside HTML content, which can be tagged in other ways.

Still, we show you how your code should look like to implement the HTTP header:

Link: ; rel="alternate"; hreflang="en", ; rel="alternate"; hreflang="es", ; rel="alternate"; hreflang="pt"

Read also about how to create a blog with WordPress.

Hreflang tag in XML sitemap

Finally, we present you the best option to implement the hreflang tag on your website: the XML sitemap. Basically, this file is responsible for providing information to search engines such as Google. It consists of a single file that we send to these search engines as many times as we want.

The great advantage of the XML sitemap is that we do not have to enter several files each time we complete a change. With this, all changes are made from a single file and place, which makes the procedure much faster.

At this point, you should know that the element is used to add each of the URLs, while the xhtml:link element is used for each language version and region of the page. This is how the hreflang attribute would look like in our XML Sitemap:

<url>

://example.com.

<xhtml:link rel="alternate" hreflang="en-us"

href="://example.com" />

<xhtml:link rel="alternate" hreflang="en-es"

href="" />

<xhtml:link rel="alternate" hreflang="pt-br"

href="" />

</url>

<url>

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

<xhtml:link rel="alternate" hreflang="en-us"

href="://example.com" />

<xhtml:link rel="alternate" hreflang="en-es"

href="" />

<xhtml:link rel="alternate" hreflang="pt-br"

href="" />

</url>

<url>

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

<xhtml:link rel="alternate" hreflang="en-us"

href="://example.com" />

<xhtml:link rel="alternate" hreflang="en-es"

href="" />

<xhtml:link rel="alternate" hreflang="pt-br"

href="" />

</url>

</urlset>

Problems with the Hreflang tag

Nowadays, there are tools that monitor your website and return technical errors within minutes. For example, Semrush has spaces where you can investigate and find out about your errors, as well as the causes and solutions. For this reason, we are going to provide you with a list of the most frequent problems.

The aim is for you to be aware of them and to know where to look once you realise that something strange is going on.

• Problems with hreflang values: one of the main errors is that country or language codes are not set correctly.
• Hrelang without self-reference: as we say, you must include a self-reference on each page so as not to confuse Google.
• Incorrect links in hreflang: it may happen that you link to a page that does not work or has been redirected.
• Conflict between hreflang and rel=canonical URL: the canonical always indicates via HTML which is the main version of the page when there are duplicates. If the hreflang attribute refers to non-canonical URLs, Google understands that you have a conflict to resolve.