What is hreflang? And how does it work?
First, the source code as an example, so you can get an idea.
<link rel="alternate" href="http://www. domain.com/de/" hreflang="de" > <link rel="alternate" href="http://www. domain.com/en/" hreflang="en" > <link rel="alternate" href="http://www. domain.com/it/" hreflang="it" > <link rel="alternate" hreflang="x-default" href="http://www. domain.com/en/" />
Your website has the domain www.domain.com and the respective language directories “de”, “en” & “it”. For simplicity, let’s assume that each page of your domain also has an Italian and English counterpart (we will come to the exceptions later).
The code above indicates that the directory “de” should be displayed in German-speaking search engine indexes. So, for example, in Germany, Austria, and also in parts of Switzerland. This also applies analogously to the other two versions. This is what the first three lines of the code block state.
The fourth line states that you want the English version of the website to be displayed in all non-matching indexes, such as in France or Spain.
The first possible objection could be that Italian is also spoken in Switzerland. Then you can expand the code block as follows.
<link rel="alternate" href="http://www. domain.com/de/" hreflang="de" > <link rel="alternate" href="http://www. domain.com/en/" hreflang="en" > <link rel="alternate" href="http://www. domain.com/it/" hreflang="it" > <link rel="alternate" href="http://www. domain.com/it/" hreflang="it-ch" > <link rel="alternate" hreflang="x-default" href="http://www. domain.com/en/" />
The marked line instructs the search engine to deliver the Italian page also in the Italian-speaking part of Switzerland (provided delivery conditions and similar allow this).
How does the code work schematically?
The link tag must include the attribute “rel” with the value “alternate”. This is followed by the hyperlink with the respective URL. Depending on the page address, this will be the correct URL. The example above shows the variant for your homepage. The hreflang attribute optionally includes only the language or language followed by the country. For this, you can obtain the correct codes from Wikipedia (see below):
- The language of a URL is in the format ↗ ISO 639-1
- You define the region in ↗ ISO 3166-1 Alpha 2.
The exception is the “fallback version” – here the language definition uses “x-default”. This signals to the search engine that this version should be displayed when no suitable one is found.
So if you want to proceed very precisely, you can formulate the code as follows:
<link rel="alternate" href="http://www. domain.com/de/" hreflang="de-de" > <link rel="alternate" href="http://www. domain.com/de/" hreflang="de-at" > <link rel="alternate" href="http://www. domain.com/de/" hreflang="de-ch" > <link rel="alternate" href="http://www. domain.com/en/" hreflang="en" > <link rel="alternate" href="http://www. domain.com/it/" hreflang="it-it" > <link rel="alternate" href="http://www. domain.com/it/" hreflang="it-ch" > <link rel="alternate" hreflang="x-default" href="http://www. domain.com/en/" />
Result: Your domain will be displayed as follows:
- In Germany = German
- In Austria = German
- In the German-speaking part of Switzerland = German
- In the Italian-speaking Switzerland = Italian
- In French-speaking Switzerland = English (see x-default)
- In Italy = Italian
- In English-speaking countries = English
- And because of x-default in the rest of the world also in English
That wasn’t so hard, but SEO would not be SEO, if there weren’t other things to consider.
What must be considered when using hreflang?
Hreflang and Index/Noindex
A hreflang attribute is to be understood similarly to a link. Accordingly, a hreflang can only refer to a target that actually exists. However, with hreflang, it is additionally stated that the target page should be included in the index , which excludes ‘noindex’. This leads to conflicting signals.
So, for example, if the Italian page (for whatever reason) is set to noindex, then the references to this version/URL must be completely removed from the other two versions.
Example: www.domain.com/de/schuhe/ refers to www.domain.com/en/shoes/ and vice versa = correct. However, www.domain.com/it/scarpe/ would be set to noindex. Then there should be no references from DE and EN, and the hreflang block on the IT version should be completely omitted (this would be the cleanest signal).
Hreflang and Canonical
If the three shoe pages of your domain are all set to index and the respective Canonical refers to itself (self-referencing), then you can use hreflang as described above.
However, let’s assume that the German version of the shoe URL refers via Canonical to www.domain.com/de/schuhshop/, then this must be taken into account.
- domain.com/de/shoes/ does not receive hreflang and no reference to the other URLs, as it has a canonical to www.domain.com/de/shoe-shop/.
- domain.com/de/shoe-shop/ receives the hreflang for IT & EN (www.domain.com/it/shoes/ & www.domain.com/en/shoes/)
- IT and EN also have a hreflang block
- Hreflang in EN, IT, and DE, but here on “schuhshop” and not on “schuhe”.
- DE “schuhshop” refers to “shoes” and “scarpe”
Basically, it is much simpler than it initially appears, as each of the three URLs always receives the identical block, only that the German version is replaced by www.domain.com/de/schuhshop/.
Exceptions and Special Features of Using the hreflang Attribute
Earlier, we assumed that all three language versions are identical in content and structure. We have already touched on the first “exception” regarding the canonical issue.
So let’s assume your shop does not have men’s shoes in Italy. The entire directory is missing. Then the DE & EN versions only refer to themselves, and the reference to the Italian version is removed without replacement. Because a reference from hreflang to non-existent pages generates 404 errors, which is bad for crawling and consequently bad for the evaluation of your domain.
It becomes more problematic when pages of the default language (x-default) are missing. Here it would be the English page. Taking the above example for the English version, you would have to change the x-default for the relevant pages as well. Here, for example, you would have to set the German equivalents as default. – Our recommendation would be to fix this case in another way. For example, with English equivalents that openly communicate that these assortments would only be available in DE and IT. It wouldn’t be elegant, but there is no really clean solution for this case.
Cross-Domain Use of hreflang Attributes
An important note at the end: The use of hreflang can certainly occur across various domains. Above, we assumed that your shop is called Domain.com. But let’s assume that the three shops are accessible via different domains, then you can use hreflang similarly to the example above.
Assumption:
- The German shop is called: schuhshop.de
- The English shop is called: shoes-4-u.com
- The Italian shop is called: scarpa-moderna.it
Then the hreflang block for the homepage(s) would look as follows:
<link rel="alternate" href="http://www. schuhshop.de/" hreflang="de" > <link rel="alternate" href="http://www. shoes-4-u.com/" hreflang="en" > <link rel="alternate" href="http://www. scarpa-moderna.it/" hreflang="it" > <link rel="alternate" hreflang="x-default" href="http://www. shoes-4-u.com/" />
In the case that only the domains are different, you can implement everything as described above.
It becomes problematic when the three shops do not know each other. This means that they are different shop systems on different servers. Thus, one shop cannot
- They leave everything as it is and ensure that the shops differ enough so that they are regarded by the search engine as individual country shops. This seems to be the lesser effort. However, the maintenance is very intensive. In this case, you could fundamentally do without the use of the hreflang attribute.
- Or you consolidate the shops in a relaunchs while retaining the domain names and unify the shop structure into a single one. This also has the long-term advantage of simpler central maintenance and easier upkeep. – Then you would have to use hreflang again (see above).
Online Marketing with Rheinwunder
You can find the complete range of SEO services at Rheinwunder here. If you want to improve your index management and need support, then write us an email or call us at: +49 228 243 313 53 Do you want to learn more or have your team trained? Then check out our SEO seminars.
