Using Hreflang to handle multiple languages (and even a single language!)

Have you ever wondered how do search engines know which version of your website they should show to a specific user?

First of all, they receive a hint from our browsers: the Accept-Language header, which tells servers which languages do we accept. If our computer language is English, then we are telling servers that our language is English! Like this:

Accept-Language: en-GB,en-US;q=0.9,en;q=0.8

This header is used as a hint for when servers don't know our language. This q=0.9 is the quality filter. We're also telling browsers that, is possible, we prefer en-GB over en-US because its quality filter is greater than en-US.

But, how do we, as developers, tell Google that our site is available in multiple languages?

Using Hreflang to provide other localized versions

Although there are other methods which we will explain in the future, today we are going to talk about a special <link> tag we can use to overcome this problem.

The main idea is to tell search engines that our site is available in multiple languages, also by telling them the URL for each language. For example, suppose that this blog is available in Spanish, German, and English. There should be a way to provide them with something like this table:

Language	URL
es	example.com/es
en	example.com/en
de	example.com/de

To do this, we can start by adding a few tags to our <head>. Like this:

<head>
    ...
    <link rel="alternate" hreflang="es" href="https://example.com/es" />
    <link rel="alternate" hreflang="en" href="https://example.com/en" />
    <link rel="alternate" hreflang="de" href="https://example.com/de" />
</head>

This way, search engines will not only know which version they should display to users, but also that a certain page is written in multiple languages!

Choosing a version for unknown languages

What if we receive a visit from, for example, Russia? We don't have a version of this page written in Russian! 😱

We can also specify a certain version as the default version of our website, so if a foreign user enters our site, we could choose which version we want to show them.

We can do it like this:

<head>
    ...
    <link rel="alternate" hreflang="es" href="https://example.com/es" />
    <link rel="alternate" hreflang="en" href="https://example.com/en" / >
    <link rel="alternate" hreflang="de" href="https://example.com/de" />
    <link rel="alternate" hreflang="x-default" href="https://example.com/en" />
</head>

Providing versions in different dialects

What if our site provides content in English, but different versions for Ireland, Canada, and, for example, Australia?

Apart from using the standard language ISO-Code (according to ISO 639-1), we can also specify a region (according to ISO 3166-1):

<link rel="alternate" hreflang="de" href="https://example.com/de" />
<link rel="alternate" hreflang="de-ES" href="https://example.com/de-ES" />

Note: The language does not have to be related to the region. You can provide, for example, content in German for users in Spain.

Implementing Hreflang tags the right way

Although it may seem pretty simple, there are a few guidelines provided by Google to ensure that these tags are implemented correctly:

Each language version must list itself as well as all other language versions.
Alternate URLs must be fully-qualified, including the transport method (http/https), so: https://example.com/foo, not //example.com/foo or /foo
Alternate URLs do not need to be in the same domain. This means we can have different domains for each language, and we can point to each other from different domains.
If you have several alternate URLs targeted at users with the same language but in different locales, it's a good idea also to provide a catchall URL for geographically unspecified users of that language. For example, you may have specific URLs for English speakers in Ireland (en-ie), Canada (en-ca), and Australia (en-au), but should also provide a generic English (en) page for searchers in, say, the US, UK, and all other English-speaking locations. It can be one of the specific pages if you choose.
If two pages don't both point to each other, the tags will be ignored. This is so that someone on another site can't arbitrarily create a tag naming itself as an alternative version of one of your pages.
Consider adding a fallback page for unmatched languages, especially on language/country selectors or auto-redirecting homepages. We can do this using the x-default hreflang tag.

Possible mistakes

Also, Google has stated possible mistakes that we can make that can modify the indexing process:

Although it's not highlighted in Google's documentation, it's important that our <html lang=""> attribute is correctly set, and that it matches the language of the current page.
Missing return links: If page X links to page Y, page Y must link back to page X. If this is not the case for all pages that use hreflang annotations, those annotations may be ignored or not interpreted correctly.
Incorrect language codes: Make sure that all language codes you use identify the language (in ISO 639-1 format) and optionally the region (in ISO 3166-1 Alpha 2 format) of an alternate URL. Specifying the region alone is not valid.

Do I have to implement Hreflang if my site only has 1 language?

Short answer: not necessarily. Hreflang is thought for multilingual sites, so there's no need to implement these tags in your site if it is only available in one language.

Although, it won't harm your website if you implement it, and it could be considered good practice if we implement these tags so that if we ever add a new language to our website, we won't have to perform any new action :-)

Validating our implementation

It's important to validate that our Hreflang implementation is correct. Google provides us with the International Targeting Report. With this tool, we can check if our implementation is correct for pages that already have been indexed by Google.

We can also use a third-party tool to check if our implementation is correct, even before it has been indexed by Google!

Summary

Using Hreflang tags is a way to tell Google that a certain page is also available in other languages. Although it's not necessary to implement them on a single-language website, it may be a good-to-have feature in case you ever add a new language to your site.

TechSEO