Hreflang is probably the most difficult part of SEO, at least on a technical level. In this series of two posts we are going to see what it is, how it works and how we can implement it.
Is usual having a webpage translated to different languages. One of the best things about the Internet is that it is global. People from anywhere in the world can reach you in any language, but this also gives a lot of headaches to those who want to welcome their visitors in their original language.
One of the headaches we, webmasters, can find in SEO is: How does Google understand the alternative versions of your page? A priori Google understands them well, but still recommends you to indicate the multilingual structure of your pages using the label hreflang.
This is probably the most complicated part of SEO. Once you master it, everything is much simpler. It works for both Google and Yandex, while Baidu and Bing do not consider this tag.
What is hreflang?
The hreflang tag is an HTML tag that specifies to search engines the language and optional geographical restrictions for a document.
That is, it is used to indicate the target of the page you are visiting by country and language.
Although using it is not mandatory, not using it can lead to different problems that we will see later in this post.
Hreflang structure
Hreflang has this structure:
<link rel=”alternate” hreflang=”language” href=”exampleaddress.com” />
First part, rel=”alternate” tell us that the page is an alternate version of the webpage.
Second part, hreflang=”language” tell us the page’s language. How do you know how to fulfill the quotation marks? Here you have a complete list of the language codes for hreflang tag. Is a very exhaustive list that has every language you could use.
For a webpage of cake recipes for Mexico, it could be like that:
<link rel= “alternate” hreflang=”es” href=”cakerecipes.mx”/>
But, as we have said, using hreflang you can no only target a language, also a country. If you want to target a country you have to use this structure:
hreflang=”language-country”.
As an example, in our cake recipes for Mexico example, we can use:
<link rel=”alternate” hreflang=”es-MX” href=”cakerecipes.mx”/>
How can we know the code of every country? Here you have a complete list of country codes for the hreflang tag.
What problems solves the hreflang tag?
Using hreflang tells Google how should understand and therefore show to the user the different pages of our website in different languages. This solves several problems:
Relevance
A page made for one country will, in most cases, be more relevant than the same pages for other countries.
Let’s say we’re looking for recipes for cooking cakes. And let’s say that the most relevant result comes from cakerecipes, but you’re in Spain and Google sends you to the Mexican section.
If you are looking for recipes to make cakes from Mexico, Google should offer you cakerecipes.mx. If you are looking for recipes to make cakes from Spain, Google should take you to cakerecipes.es. And if someone is looking for it from France, they should take it to cakerecipes.fr.
The difference between the page in Spanish and French is clear: it is the language. The difference between Spain and Mexico may not be so relevant, but the different ingredients or tastes preferences that we can find in each country can make the site a success or a failure. For this reason, even in the pages of the most daily things, it is important to address a well-defined audience.
Duplicate pages
If we have the same page for the United Kingdom and the United States, both in English and we only differentiate, for example, the address of our offices or the price of our products, Google may detect duplicate content. The hreflang tag serves precisely to avoid this, to tell Google that it is the same page, but in different languages. If we differentiate some products, for sale in some countries but not in others, we will be dealing with the same case.
Best user experience
If the web is in the user’s language and it is targeted to the inhabitants of the user’s country, he will feel more comfortable, he will stay longer and the percentage of rebounds will be lower. The user will find it much easier to find the page directed to their language and country if you have set the hreflang label correctly.
It is easier for a user to stay with you if he understands you and if he feels identified by what you wrote.
How hreflang works?
As we said at the beginning, hreflang is the most complicated part of SEO. Let’s try to make it as clear as possible.
Before we know how to implement hreflang, which we will see in a future post, we will try to learn very well how it works:
Hreflang is bidirectional
If you say that cakerecipes.fr is the French version of cakerecipes.es you also have to say that cakerecipes.es is the Spanish version of cakerecipes.fr.
It sounds difficult, but it’s that easy: A points to B and B points to A.
Why is this so? we can see it very easily with an example: if we say that our page, cakerecipes.es is the French version of Amazon.com, Google will doubt it very much. Unless Amazon.com confirms it using the same tag, which is not going to happen, Google is not going to believe you.
It’s the equivalent of saying you’re Claudia Schiffer’s boyfriend. Either she confirms she’s your girlfriend or nobody is going to believe you.
The tag should auto-reference
In other words, each page must link to itself.
This makes life easier for us, webmasters. Imagine that we have a page in 20 languages (or for 20 countries).
We can copy and paste the whole block of hreflang tags without having to worry about removing the language of every page where applicable.
Thus, in our example, in the three pages, the hreflang code that we would put would be the same:
<link rel=”alternate” hreflang=”es-MX” href=”cakerecipes.mx”/>
<link rel=”alternate” hreflang=”es-es” href=”cakerecipes.es”/>
<link rel=”alternate” hreflang=”fr” href=”cakerecipes.fr”/>
And we don’t have to modify it, erasing the fr line for the french pages or the mx line for the pages directed to Mexico.
A default tag for everybody who is not in our targets
Think again in our example: our cake recipes web has a Spanish version for Spain, a Spanish version for Mexico and another one in French. What if an English person visit us from U.K.? We need to choose which one of the three versions he is going to visit.
You can do it using x-default. If we want everybody out of our targets to visit the Spanish version for Spain, we would use:
<link rel=”alternate” hreflang=”x-default” href=”cakerecipes.es”/>
That is how hreflang works.
