Do you use more than one language on your website, or do you target users from different countries who speak the same language? In this article, you will learn everything about the hreflang attribute that enables you to deal with many SEO problems in multilingual and multinational websites.
I explain to you exactly how the hreflang attribute works, what specific challenges you can meet with it and also when, where and how you should use it.
What you need the hreflang attribute for
Anyone who runs a website in only one country with only one language version has one less uncomfortable topic on the table. He doesn’t have to deal with the multinational focus of his project. I am forgiven for this bulky wording. But the term multilingualism is not strong enough to adequately describe the topic.
Well, if you run a webshop that sells compression bandages for horses in Germany, Austria and Switzerland, then only one language is used. But in three countries. Since this shop exists in three country versions due to many good reasons, which I will discuss later, you would face the problem of operating three websites that are largely identical in content.
Multinational targeting without the use of the hreflang attribute poses a problem for Google. At least that’s the popular opinion. You can hear sentences like:
Without the hreflang attribute, Google has the problem that it cannot classify the country-specific targeting of the website.
Here is a change of perspective. Google does not have a problem if multilingualism has been technically improperly implemented. The only one with a problem, in this case, is the website operator.
What does Google do when the geographic targeting of a website is unclear? Shrugs and lets rankings collapse faster, for example, because of duplicate content than any SEO in this world could find nice.
At this point, therefore, the important note: if you own a multilingual website, take this topic very seriously, for example, by reading this article to the end.
What the hreflang attribute is
First of all – and this is important – hreflang is not a tag, but an attribute. Even if the term “hreflang tag” is used everywhere, this description is simply wrong.
A tag denotes the start and/or end of an HTML element. As in this example, in which the “Heading” element was given a tag of type h1:
An attribute describes a more precise determination for an element and is supplemented by a value. As in this example, in which the element h1-Tag received an attribute “class” with the value “start”:
<h1 class=”start”>demo text</h1>
This is exactly how the hreflang attribute works. Here’s an example:
<link rel=”alternate” href=”http://demowebsite.com/” hreflang=”en-uk“ />
In this case, a website with an alternative language version will be linked. As you can see, the value of the language version for the country (en-uk) is assigned to the hreflang attribute.
You already know something that an estimated 90% of all SEOs do not know or swap. A good start, I think.
How the hreflang attribute works
If you use the hreflang attribute, you tell Google that the content on the website is also in other languages and – valuable! – are intended for other countries. As already mentioned, language alone is not always sufficient as a distinguishing feature.
hreflang with the same language for different countries
There are cases in which a website with largely identical content must exist multiple times in the same language. For example, because you want to use a country-specific top-level domain for each country or because different content nuances can determine success in each country. The latter could make completely different checkout processes necessary in a shop.
Here are three examples:
- A website with variants for users in Australia, England, the USA and Canada (all in English)
- A website with variants for Germany, Austria and Switzerland (all in German)
- A website with variants for Haiti, the Comoros and Madagascar (all in French)
In this case, you use the hreflang attribute to make it clear that the different country versions are part of the same construct, but are intended for different countries. This is primarily intended to solve the problem of duplicate content. Because entire websites that are like one egg to another can have a devastating effect on the rankings. But more on that later.
hreflang with different languages for different countries
You may be wondering why you should use hreflang if the language is different. After all, with different language versions of a website, the problem of duplicate content has moved far away.
But there is another component of the hreflang attribute.
Let’s assume that the website “A” wanted to gain a foothold in Mexico. A website that takes linguistic and legal frameworks into account would be the first step.
Unfortunately, the website “A” is very well known in Germany, but not in Mexico. Rankings, as they exist in this country, would first have to be built up with great effort in South America, and relevance to the topic of “shoe purchase” would have to be earned through a lengthy process.
The hreflang attribute could mean an authority boost here. If A.de were to refer to A.mx, the signal to Google would be clear:
This page belongs to the well-known and appreciated A.de.
Where you need to put the hreflang attribute
As is so often the case, there are several options. Depending on the size of your website and the content offered on it, you have three options:
The hreflang integration via an XML sitemap
This variant is the most complicated method. It fits very well to your preferred location: large websites with many, many subpages.
Here is an example of the corresponding part of a site’s XML sitemap that contains multiple language versions:
The code snippet contains the element for a URL (Uniform Resource Locator).
URL within the <loc> element to which alternative versions are assigned.
Url within the<xhtml> contains the alternative language/country versions with their respective URL.
One of them contains the self-referencing. So the URL with its language and country code, which is the issue here. Incidentally, this is a recurring pattern for all methods of hreflang integration. All versions that exist to ensure bidirectional or multidirectional linking must always be named. It must be clear which URLs there is a relationship with.
In principle, you only change the URL within the <loc> element so that each of the URLs mentioned below occurs once. For the German version it would look like this:
As you can see, nothing has changed except for the element. And the self-referencing URL is already there. It’s that easy.
For the sake of completeness, the – admittedly long – whole code:
Sorry about the code desert. But I want to make sure that there are no misunderstandings about how it works.
Incidentally, according to Google, the XHTML namespace should always be specified in the XML as follows:
Why is this method particularly well suited for large websites?
If the award is solved centrally via an XML sitemap, no hreflang attributes need to be included in every subpage. For websites with thousands of sub-pages, this procedure can make a considerable contribution to the total page weight (DOM length). The result: a higher page speed.
The second advantage is the easier way of editing. Even if the XML markup, in this case, seems quite complex – integrating or removing another language version can now be done within a file. Not every one of your many subpages has to be edited.
The hreflang integration via the HTTP header
If you use the content on your website that is not displayed in HTML format, you can use the hreflang attribute in the HTTP header.
The classic case study for using hreflang in the HTTP header is PDF documents. So if you offer PDFs for different languages or countries, you can do it this way:
Link: <http://www.demowebsite.com/ebook/ebook-deutsch.pdf/>; rel=”alternate”; hreflang=”de”
Link: <http://www.www.demowebsite.com/ebook/ebook-spanisch.pdf/>; rel=”alternate”; hreflang=”es”
Link: <http://www.www.demowebsite.com/ebook/ebook-english.pdf/>; rel=”alternate”; hreflang=”en”
If you solve the hreflang integration via the HTTP header of your website, i.e. via the HTML files, you can find it in the Chrome browser via the developer console in the Network tab. There you simply click on the top entry to view the corresponding HTTP headers.
The hreflang integration in the HTML <head> of your website
The simplest method. You simply have to integrate all existing language versions with their URLs in the <head> of each multinational page.
For example like this:
<link rel=”alternate” href=”http://www.www.demowebsite.com/” hreflang=”en-en” />
<link rel=”alternate” href=”http://www.www.demowebsite.com/at/” hreflang=”en-at” />
<link rel=”alternate” href=”http://www.www.demowebsite.com/ch/” hreflang=”en-ch” />
The same applies here: every language version must be included. So also that of the website on which the code itself is located.
This method is my personal favorite. Because, in my experience, it is absolutely sufficient for most projects and because the integration causes the fewest problems.
However, if you use more than 8 or 10 languages on your website and PDFs are irrelevant, you should switch to the XML sitemap variant. I explained the reasons in detail above.
Which besides hreflang influences the geological and linguistic classification
The hreflang attribute is not the only way to signal the search engine which countries and languages your website is aimed at
For example, Google also uses the following elements to determine who your content is aimed at and where that person is located:
- The location of your server
- Your ccTLD
- The language of your content
- The content of your website (clues such as currencies)
The hreflang attribute solves these problems for you
In some of the points dealt with so far, it was already clear: the hreflang attribute is a real problem solver. However, on many levels. I would, therefore, like to emphasize the effects that I find particularly helpful and relevant.
Better ranking options in new markets
Whenever a company expands into another market, it breaks new ground. Mainly because it is new on the market itself. Accordingly, it is not yet established there and, above all, is not known to the search engine as a player in this market.
With the hreflang attribute, you can give your new country website an advantage by issuing a kind of letter of recommendation quite simply with a few lines in the HTTP header or your XML sitemap.
In this way, you signal an authoritarian and content-related relationship with your already established and hopefully well-ranked original website with relevance.
Content control in different countries with the same language
This point is less a problem solving than a way to target your website more closely to your foreign target groups.
The example that I have tried several times in this article concerns the DACH constellation. The language is formally the same in Germany, Austria and Switzerland, namely German. However, there are country-specific differences. And it is exactly this that can make largely identical duplicates of your website necessary.
Whether this is a different checkout process in the online shop, a different wording for prices (Germany: “for”, Austria: “around”) or legal regulations – they can all require a copy of the project with the respective adjustments.
At this point, too, I’m concerned with a change of perspective. hreflang allows you to create another website that maybe 80% identical to the original website, to take into account what makes you successful in another country with the same language.
The following paragraph explains why this is not possible without it.
No duplicate content in the same languages
So if you run a website that is aimed at customers in Germany, Austria and Switzerland, you are addressing different locations, but you are speaking to your customers in one language, so deliver them to
- various subdomains – for example, deinedomain.de, at.deinedomain.de, ch.deinedomain.de
- various directories – for example deinedomain.de, deinedomain.de/at/, deinedomain.de/ch
- various ccTLD (country code top-level domains) – for example, deinedomain.de, deinedomain.at, deinedomain.ch
largely the same content.
Whenever your multinational and multilingual combinations include country/language constellations that use the same language for different locations, you run the risk of delivering duplicate content to the search engine.
Why is that bad?
This means that search engines cannot determine which of the duplicate content they should ultimately index. It is also unclear how the individual language versions should rank because there is simply no objective differentiator.
The goal of a search engine is to provide the best answer to the searcher’s questions. But it is impossible to judge which of two identical versions is the better one.
For these reasons, it also seems hardly desirable for Google and its competitors to show a battery of identical snippets in the best places on their SERPs (Search Engine Result Pages).
So if the correct use of the hreflang attribute prevents us from generating DC, then it should be used in monolingual multi-country combinations.
hreflang and rel = “canonical”
At this point, I want to debunk a myth. Namely, that hreflang always protects you from duplicate content. Of course, you can still generate DC if you use hreflang to differentiate your country-specific versions.
How? Quite simply: internally.
hreflang does not save you from DC problems if you use identical content within a country version. Here you still have to use the rel attribute “canonical”.
Also Read – Guide On Canonical Tag
How to deal with top-level domains, directories and subdomains
The heading already tells you: You can use the hreflang attribute with ccTLDs (country code top-level domains), in directories or on subdomains. If your strategy requires it, you can also mix these shapes.
For a Spanish-language website that is aimed at people in Germany, this means:
<link rel=”alternate” hreflang=”es-de” href=”http://www.deinedomain.de/es/” />
<link rel=”alternate” hreflang=”es-de” href=”http://www.deinedomain.es” />
<link rel=”alternate” hreflang=”es-de” href=”http://es.deinedomain.de” />
<link rel=”alternate” hreflang=”es-de” href=”http://www.deinedomain.de/en/” />
<link rel=”alternate” hreflang=”de-at” href=”http://www.deinedomain.at” />
<link rel=”alternate” hreflang=”en-uk” href=”http://uk.deinedomain.de” />
<link rel=”alternate” hreflang=”x” href=”http://www.deinedomain.de/international” />
hreflang and x-default
The last line of the example above contains a variant that I have not mentioned before. The x-default value.
It is a kind of wildcard value, which stipulates that the corresponding website is shown to all those who have not already been served by another language variant. This is the case, for example, with large group sites that refer all visitors from countries that do not contain their own language variant to a language selection website or the website with the greatest language consensus – for example, English.
The correct use of ISO codes (including ISO code generator)
They seem to be self-explanatory. ISO codes indicate the language and the country for which the respective website is to apply. The first value always describes the language ( ISO 639-1 format ). The second value describes the country ( ISO-3166-1-Alpha-2 format ).
- de-ch: German for visitors from Switzerland
- de-de: German for visitors from Germany
- de-gb: German for visitors from Great Britain
If you want the country to matter, just using the first part of the ISO code is not enough. In this example “de”. Under certain circumstances, the corresponding page would be displayed to everyone who visits your page with a German language setting in their browser.
So if you had an online shop with an Austrian version that had to fulfil important functions for Austrian visitors and you would use the shortened ISO code “de” for the German version, then customers from Austria might be on the website with the content, and prices land for Germany. The result: problems with shipping costs, incorrect addressing, chaos.
So it is best always to communicate clearly what language and which country your website should apply to by always using the full ISO codes with both components. Unless the country really doesn’t matter.
ISO code generator for hreflang
Do you want to find the right ISO code for your website? Then simply select the country and language in which you want your website to appear:
Select language (ISO-639-1):
Hiri Motu (HO)
Norwegisches Bokmal (NB)
Norwegisches Nynorsk (NN)
Sichuan Yi (II)
West Frisian (FY)
Select country (ISO-3166-1-Alpha-2):
American Samoa (AS)
Antigua & Barbuda (AG)
Bosnia / Herzegovina (BA)
Bouvet Island (BV)
British Indian Ocean Territory (IO)
Brunei Darussalam (BN)
Burkina Faso (BF)
Kap Verde (CV)
Cayman ist (KY)
Zentralafrikanische Republik (CF)
China, Volksrepublik (CN)
Kongo, Demokratische Republik (CD)
Costa Rica (CR)
Tschechische Republik (CZ)
Dominikanische Republik (DO)
El Salvador (SV)
Frankreich, Metropolitan (FX)
Französische Südterritorien (TF)
Heard Island und McDonald Island (HM)
Johnston Island (JT)
Korea, Demokratische Volksrepublik (KP)
Korea, Republik (KR)
Demokratische Volksrepublik Laos (LA)
Libysche Arabische Jamahiriya (LY)
Marianen, Nord (MP)
Insel Nauru (NR)
Niederländische Antillen (AN)
Palau Inseln (PW)
Puerto Rico (PR)
Insel Reunion (RE)
Russische Föderation (RU)
San Marino (SM)
Sao Tome & Principe (ST)
Sierra Leone (SL)
Südgeorgien und South Sandwich (GS)
Sri Lanka (LK)
St. Helena (SH)
St. Kitts & Nevis (KN)
St. Lucia (LC)
St. Pierre & Miquelon (PM)
St. Vincent (VC)
Staatenlose Personen (XX)
Svalbard und Jan Mayen (SJ)
Arabische Republik Syrien (SY)
Taiwan, Republik China (TW)
Timor Leste (TL)
Trinidad und Tobago (TT)
Turks- und Caicosinseln (TC)
Smaller islands in the United States (UM)
Myanmar Union (MM)
United Arab Emirates (AE)
United Kingdom (GB)
Upper Volta (HV)
Vatican City State (VA)
British Virgin Islands (VG)
US Virgin Islands (VI)
Wallis and Futuna (WF)
Western Sahara (EH)
Yemen Arab Rep. (YE)
Democratic Yemen (YD)
<link rel=”alternate” hreflang=”de-DE” href=”https://www.deinedomain.de/” />
How to spot errors when using the hreflang attribute
The network is full of questions from desperate people who have problems integrating the hreflang attribute. They are often only noticed during implementation. Sometimes an existing implementation also has to be checked. You have two options:
Find problems with hreflang using Google Search Console
For you to be able to see whether something is wrong in the Search Console, you must first set it up correctly. At least if your language versions do not have a ccTLD (Country Code Top Level Domain) like .at, .ch or .de. However, if this is the case, the assignment is also determined by them.
To do this, first, click on Search Queries and then on International Orientation.
In any case, the different language variants should be created in the Search Console as separate websites (properties).
You can see whether you or your predecessors did something wrong with the integration if you look at the impressions from the respective target countries on the search page. If you don’t see any, you have probably done something wrong.
Tip: Identify problems with hreflang via an SEO audit
Do you have a problem that cannot be solved even after studying this 3000-word hreflang guide? Then I look forward to your message. I would be happy to advise you on the use of hreflang, solve your project-related UX and SEO problems or carry out a complete SEO audit of your website to reveal all other deficits in your SEO.
Myths about using the hreflang attribute
Finally, I would like to invalidate four hiking legends about the use and effect of the hreflang attribute, which persist. Maybe I’ll save you a little – or even a lot – of work and annoyance.
hreflang myth 1: hreflang will give my international content better positions in the SERPs
Quite simply: no. It will not. Because the use of the hreflang attribute is simply not a ranking factor.
hreflang myth 2: I don’t need to use rel = ”canonical” on a page that uses the hreflang attribute
It’s just not true. As long as you create rel = ”canonical” on your website, all is well.
hreflang myth 3: By using auto redirects, I can do without hreflang
Using auto redirects based on the website visitor’s IP address is a convenient matter. Unfortunately, this practice is also dangerous. You can also use it to send the Google bot in the wrong direction.
Let’s say you redirect the Google bot coming from Ireland to your US website because of your strategy because you think he is an English speaking visitor. Then he cannot index your non-English language versions. Stupid.
hreflang myth 4: When using the hreflang attribute, I can simply shorten the URLs
You can do that. But then the whole thing may not work. So it is best to check carefully whether the integration might look like this:
<link rel=”alternate” hreflang=”de-at” href=”/at/” />
and correct it in this format:
<link rel=”alternate” hreflang=”de-at” href=”https://www.deinedomain.de/at/” />
hreflang is nowhere near as complex and frightening as it seems. Sure – you have to understand it first. But once the mental knot has broken, I see no reason why you couldn’t use it successfully for yourself.
No matter what you want to do with the hreflang attribute, keep one rule in mind: be as pedantic as, you can get.
Write your ISO codes correctly and be absolutely conscientious when using your attributes. Because the biggest danger with this topic is not the manageable complexity of the topic, but a sloppy implementation.
If you take the necessary time, nothing can happen to your project.