hreflang - Language and index control explained

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. hreflang=”it” already covers this; if you want to address Italian-speaking Switzerland explicitly, 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 line with hreflang=”it-ch” instructs the search engine to deliver the Italian page in the Italian-speaking part of Switzerland as well (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 reference (href) 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 contains either only the language or the language followed by the country. For this, you can obtain the correct codes from Wikipedia (see below):

• The language of a URL is specified 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 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 rules out “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 must 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, if we assume that the German version of the shoe URL refers via canonical to www.domain.com/de/schuhshop/, this must be taken into account.

1. domain.com/de/schuhe/ receives no hreflang and no references from the other URLs, as it has a canonical to www.domain.com/de/schuhshop/.
2. domain.com/de/schuhshop/ receives the hreflang for IT & EN (www.domain.com/it/scarpe/ & www.domain.com/en/shoes/)
3. IT and EN also have a hreflang block
   1. Hreflang to EN, IT and DE, but here to “schuhshop” and not to “schuhe”.
4. 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, except 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 each other and to themselves, and the reference to the Italian version is removed without replacement. This is because hreflang references to non-existent pages generate 404 errors, which is bad for crawling.

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, like it or not, 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 product ranges are only 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: hreflang can certainly be used across different 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 “know” when a URL is switched off in another. This can become very time-consuming and tricky, as all hreflang annotations would have to be maintained manually. In this case, you should sit down with your development department and look for a solution.

It becomes really problematic when the three shops are structured differently, i.e. when the women’s shoes sit in a completely different navigation structure than in the other shops.

In this case, you should aim for one of the following solutions:

1. You 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 dispense with the hreflang attribute altogether.
2. Or you consolidate the shops in a relaunch 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, send us an email or call us on: +49 228 243 313 53. Do you want to learn more or have your team trained? Then check out our SEO seminars.