How to set up a Multi-Lingual site with HREFLANG

How to set up a Multi-Lingual site with HREFLANG

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.

HREFLANG Code Target Country
hreflang=“de” href=“https://example.com/de/” German site
hreflang=“en” href=“https://example.com/en/” English site
hreflang=“nl” href=“https://example.com/nl/” Dutch site

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:

HREFLANG Code Target Country
hreflang=“de-de” href=“https://example.com/de-de/” German site for Germany
hreflang=“de-at” href=“https://example.com/de-at/” German site for Austria
hreflang=“de-ch” href=“https://example.com/de-ch/” German site for Switzerland

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.

Setting up HREFLANG

This is an example of how you could set up hreflang with x-default:

HREFLANG Code with x-default
hreflang=“x-default” href=“https://example.com/”
hreflang=“de” href=“https://example.com/de/”
hreflang=“en” href=“https://example.com/en/”
hreflang=“nl” href=“https://example.com/nl/”

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.

 

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. 

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn