Use hreflang for multilingual websites

The hreflang tag is used to tell Google and other search engines the language used on a specific page on your website. Search engines use the hreflang tag to ‘redirect’ the visitor to the page in the right language. Hreflang is also referred to as rel="alternate" hreflang="x".

When I was discussing post subjects with our site review team, Annelieke pointed out that hreflang was mentioned on our website, but that we never did an article about it. Perhaps that is because for most sites, hreflang isn’t a ranking related issue. For the larger sites it could be, by the way. In this post, I’d like to explain a bit more about multilingual websites and how hreflang is important for these sites.

What is multilingual

Let’s start at the beginning. What is multilingual? In our online context it basically means that content is available in more than one language.

This can be cross border, for instance French or Chinese, but there is a bit more to that. It can also mean a language variation (so to speak) is available, like our next door neighbors the Belgians have. In Belgium, some speak Flemmish (which is like Dutch) and some speak Walloon (which is like French). More on this later, as we discuss hreflang types. Of course multilingual can also mean people speaking Spanish in an English speaking country. Yes, you can target those as well. It’s all multilingual.

International rankings

In an ideal world, you would have a separate website with it’s own TLD (Top Level Domain) for each language you want to target, like amazon.de and amazon.co.uk. Ideally, these websites would be hosted on a server in the country you want to target. And all should be linked using the hreflang tag from the start. It’s similar to ranking locally: if you are in the location your target audience is in, you’re probably relevant to that audience to Google as well.

All this might be the preferred way to do things, but it has its limitations. What to do when the TLD is already taken, for instance. It also requires you to purchase more domain names, of course. It’s the best way, but also the way that requires most effort. A lot of international websites have grouped their online activities in one location, one country, and manage all the different languages from there. In that case, you can still use hreflang to your benefit, as hreflang can target both language and country for you.

Lastly, you should also tell Google your preferred geo-audience in Google Webmaster Tools. You can find that at Search Traffic > International Targeting > Country > Geographical Target.

Hreflang is your friend

If your website serves pages in multiple languages, or your website itself is served in more than one language, you should make hreflang your friend. There is a number of ways that hreflang can help Google understand these variations.

Google mentions the use of rel="alternate" hreflang="x" at least in these three cases:

Translate only the template parts, like the navigation and footer, while using one language, f.i. English, for the content. This could be the case for website that consist mainly of user-generated content like a forum.
There are small regional variations, but most of the text is the same, like variations of English used in the United States, Great Britain and Ireland.
The entire site is translated into other languages than the original.

I’d like to add one. You can also add hreflang="x", where x is the language, to a link. In that case, the hreflang attribute should reflect the language of the page in the link. That way, you are telling Google that there will be a different language at the other side of that link. This is especially useful for sites that actually tell the visitor the site or page is available in other languages as well by linking these pages.

Locations of hreflang

Besides in the link mentioned in the section above, there are a couple of ways to tell Google about the language variations:

Place an HTML link in the header. You could add a language alternative to your like this:

<link rel="alternate" hreflang="nl" href="http://nl.example.com/" />

In your HTTP header, for instance via your .htaccess file. This is mainly for non-HTML files like PDF’s and might look something like this:

Link: <http://nl.example.com/>; rel="alternate"; hreflang="nl"

XML sitemap. You can also add language alternatives via your sitemap. This is a bit more technical; read more about it in Webmaster Tools.

Examples of language indicators

Let’s go over a number of variations to make this all just a bit more clear. For starters, you want to make sure all languages are covered, even the ones you are not targeting. You can easily add a ‘default’ page by setting an x-default hreflang element:

<link rel="alternate" href="http://example.com/" hreflang="x-default" />

This simply indicates that if none of the alternate links is matched, this page should be served.

That x-default can be replaced by a language and a country like this:

<link rel="alternate" href="http://example.com/en-gb" hreflang="en-gb" />

That is a hreflang setting for all English speakers in Great Britain / United Kingdom (UK). This also points out the importance of the x-default, as this line only targets the visitors that come from the UK (server side) and prefer the English language (client side).

As mentioned, alternative could be:

<link rel="alternate" href="http://example.com/en-us" hreflang="en-us" />
<link rel="alternate" href="http://example.com/en-au" hreflang="en-au" />

By the way, I have seen en-us and en-US, for China it could even be zh-Hans. I don’t think there is a right and wrong in uppercase/lowercase. Even Google uses both in one article. I have also seen brave tries to use en_GB, but that underscore won’t work; it needs to be a hyphen.

One more thing

To finish things off, you also want to add a notice of these alternative pages via OpenGraph:

The locale these tags are marked up in. Note that OpenGraph does use an underscore.
```
<meta property="og:locale" content="en_GB" />
```

An array of other locales this page is available in.

<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />

More on that for instance on the Facebook developers pages.

Hreflang and SEO

The big question for us of course is “what will this all do for SEO?” Well, that seems to depend on for instance the size of the site and the way the content in the original language is already indexed.

I have read a number of case studies, and have discussed it with colleagues. If your website ranks well, and has a significant size, adding a new language and hreflang tags might indeed help the rankings of the ‘new’ website. Google might even index all as one (if it’s one domain), which means a lot more pages for the main domain will be indexed. If these are all of quality, that obviously won’t hurt.

Having said that, the other way around also seems to be the case. Low rankings for your main site won’t help the language alternatives. And for smaller sites, the overall impact seems to be very little.

Should you add hreflang? Yes, you should. Will it help your SEO / rankings? It might.

Some of the case studies that led to that believe:

Case study: The impact of hreflang tag
Hreflang and Geo-Targeting – the Netflix Case Study
An international SEO implementation tale – sitemaps: rel=”alternate” hreflang=”x”

Your call

I hope this post brought you some more understanding of the hreflang tag. If you have a multilingual site, it will help Google understand your site. And that alone should be a reason to add it.

Next to that, I’m very much looking forward to reading your thoughts on this subject and even more to your own case study or studies. Feel free to link your hreflang case study in the comments!

Thanks for reading