If youāre looking to expand your international offering, it can be quite easy to end up with duplication on your website. This is because youāll likely be offering the same services, just translated into other languages. Or in some cases, offering the same products, but the currency is different. This is where HREFLANG comes up and allows you to set up your website as multi-lingual; the beauty is that the associated code signals to search engines that the content isnāt duplicate, itās just targeting different audiences or languages.Ā
HREFLANG can be very powerful and allows you to serve the right language version to the user, based on their language and location. It essentially tells Googe which version of the site to show to which people.
What is HREFLANG?
It is meant for fully translated sites, or websites with regional variations e.g. Ā£/$/ā¬.
This is an example of how hreflang code could be set up and which country it would be targeting.
This code would mean that:Ā
- Someone searching in German would get the German site.Ā
- Someone searching in English would get the English site.Ā
- Someone searching in Dutch would get the Dutch site.
Ā
If an English site ranks number 2 for a keyword, but a Dutch user has a Dutch language preference on their search engine, then your Dutch site would replace your English site in that number 2 ranking. Your English language rankings can actually help your foreign rankings.Ā
Regional variations:
You can take this further, as of course, there are countries that speak different languages based on their region.Ā
This could look like this:
This would mean that:Ā
- Someone searching in German in Germany would get the /de-de/ site.Ā
- Someone searching in German in Austria would get the /de-at/ site.Ā
- Someone searching in German in Switzerland would get the /de-ch/ site.Ā
By removing the last ādeā from the /de-de/ this would be set to those searching in German from anywhere in the world.
X-Default
x-default is a HREFLANG attribute that signals to algorithms that this page doesn’t have any specific language or locale and this is the default page when no other page is better suited.
This is an example of how you could set up hreflang with x-default:
This would mean that:Ā
- Someone searching in German would get the German site.Ā
- Someone searching in English would get the English site.Ā
- Someone searching in Dutch would get the Dutch site.
- Someone searching in Spanish or another language would get the Default homepage or the country/language selector page.
HREFLANG Implementation
It is important to link from every page to every other language version of that page. So, if you have 10 languages, every version of that page links to 9 other languages indicating that this is the page in Dutch, German etc.Ā
These links would either be in the head of the page, or they could be in the XML Sitemaps. Here are some examples of hreflang implementation:
HTML Meta Tags
If you only have a few languages and are not in full control of the server setup, then HTML meta tags are a good method of HREFLANG implementation.
<link rel=āalternateā hreflang=āen-gbā hreflang="x-default" href=āhttps://example.com/en-gb/ā/>
<link rel=āalternateā hreflang=āen-usā href=āhttps://example.com/en-us/ā />
<link rel=āalternateā hreflang=āen-auā href=āhttps://example.com/en-au/ā/>
Having a lot of these on a page adds a lot of weight and can slow the page down. Despite this, in my experience, this tends to be the method of implementation that is used most often.
HTTP Headers
Adding HREFLANG through HTTP headers can be useful for non-HTML content. However, it is not always easy to maintain for other types of content.Ā
HTTP/1.1 200 OK
Content-Type: application/pdf
Link: <https://es.example.com/document.pdf/>; rel=āalternateā;hreflang=āesā,
<https://en.example.com/document.pdf/>; rel=āalternateā;hreflang=āenā,
<https://de.example.com/document.pdf/>; rel=āalternateā;hreflang=ādeā
XML Sitemaps
This method of implementation for HREFLANG may look ugly but it is the easiest to maintain. It also doesnāt add kilobytes to each page load.
<url>
<loc>https://example.com/english/</loc>
<xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/english/" />
<xhtml:link rel="alternate" hreflang=en href="https://example.com/english/>
<xhtml:link rel="alternate" hreflang="de" href="https://example.com/deutsch/" />
<xhtml:link rel="alternate" hreflang="zh" href="https://example.com/chinese/" />
</url>
<url>
<loc>https://example.com/deutsch/</loc>
<xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/english/" />
<xhtml:link rel="alternate" hreflang=en href="https://example.com/english/>
<xhtml:link rel="alternate" hreflang="de" href="https://example.com/deutsch/" />
<xhtml:link rel="alternate" hreflang="zh" href="https://example.com/chinese/" />
</url>
<url>
<loc>https://example.com/chinese/</loc>
<xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/english/" />
<xhtml:link rel="alternate" hreflang=en href="https://example.com/english/>
<xhtml:link rel="alternate" hreflang="de" href="https://example.com/deutsch/" />
<xhtml:link rel="alternate" hreflang="zh" href="https://example.com/chinese/" />
</url>
HREFLANG Problems
Regardless of whichever method is used, a common problem with HREFLANG is that it can break often. Google says that around 70% of HREFLANG implementations are broken, but itās expected that itās actually more like 90%.Ā
Letās look at some of the common problems.
Broken Links and Relative URLs
This can happen if your HREFLANG links out to
- Broken URLs – perhaps pages are deleted in one language but have not been deleted in others and the HREFLANG hasnāt been updated to remove the language that is no longer used.
- URLs that are redirected – it could be that pages have been redirected but the HREFLANG has not been updated accordingly
- Relative URLs – full versions of the URLs must be used.
Missing Return Link
If page A says A is English and B is German, then page B needs to also say that B is German and A is English.Ā
It cannot lack the return link.
Wrong Country / Region Code
Language ad country/region codes follow strict ISO specifications.
- The first but is the language, comprised of 2 letters, in ISO 639-1 format.Ā
- The second (optional) bit is the region, comprised of 2 letters, in ISO 3166-1 Alpha 2 format.Ā
Ā
It is important to note that:Ā
- hreflang=āen-ukā is no good,
- hreflang=āen-gbā must be used.
Canonical Interference
Each language should have a canonical link that points to itself.
<link rel=āalternateā hreflang=āenā href=āhttps://example.com/en/ā/>
<link rel=āalternateā hreflang=ādeā href=āhttps://example.com/de/ā/>
<link rel=āalternateā hreflang=ānlā href=āhttps://example.com/nl/ā/>
<link rel=ācanonicalā href=āhttps://example.com/en/ā/>
This above example above would be for the English site.Ā
The German site would have the /de/ canonical.
The Dutch site would have the /nl/ canonical.
It Looks Fine but it Says Itās Broken
This could be the case if you have more than one implementation.Ā
Get rid of one and test again.
Useful HREFLANG Tools
Here are some useful tools to help you generate your HREFLANG code without incurring any errors:Ā
The hreflang Tags Generator Tool
Ā
Hreflang Sitemap Generation Tool
Ā
HREFLANG Tag ValidatorĀ
Ā
Hreflang-GeneratorĀ
Final Thoughts
HREFLANG is very powerful, but just because it is working now, doesnāt mean it won’t break in future. I would suggest setting up regular tests and audits to help prevent this, or at least so you can spot issues quickly. You can even use Screaming Frog to help you with your tests.
Make sure you work closely with your developer when setting up your multi-lingual site too to avoid problems in the future. Working with a good dev can save you many headaches and mean your multi-lingual site is set up for success for the long term.Ā
