Multilingual sites and hreflang

Module 3: The technical basics of a page · Reading time: 12 minutes

Learning objective: After this lesson you can set up hreflang correctly for a site in several languages or for several countries, and check that the links are reciprocal.

Key concepts: language version, hreflang, language code (ISO 639-1), country code (ISO 3166-1 alpha-2), script code (ISO 15924), x-default, reciprocity (return link), self-reference, HTML, HTTP header or sitemap, separate addresses per language, no automatic redirects based on language, lang attribute

The problem: which version do you show?

Bloemenatelier Lotte is growing. An English version of the site is coming for tourists and expats, and a German one for customers just across the border. The same page with bridal bouquets now exists three times:

https://www.example.com/bruidsboeketten          (Dutch)
https://www.example.com/en/bridal-bouquets       (English)
https://www.example.com/de/brautstraeusse        (German)

For every search, a search engine has to choose which of the three to show. Someone in Cologne searching in German should get the German version, not the Dutch one. With hreflang you tell the search engine which pages are language versions of each other and which language or country each version is meant for.

hreflang is not a ranking trick. It only makes sure the right version appears in the right place. Nor is it language detection: Google says it does not use hreflang or the HTML lang attribute to determine the language of a page; it works that out itself, from the text. Do set the lang attribute (<html lang="nl">) correctly, though, for browsers, translation tools and screen readers.

First the basics: separate addresses

Google recommends a separate address for each language version, and advises against switching the language with cookies or browser settings on the same address. The reason is practical: Googlebot usually crawls from the United States. If the content at one address changes depending on who is looking, Googlebot may only ever see one version.

For the same reason: don't redirect visitors automatically to another language version based on their language or location. Google explicitly advises against it. A Dutch person on holiday in Germany wants the Dutch site; put a clear language switcher on the page instead and let everyone reach every version.

If you target countries instead of languages, with separate domains such as example.de and example.nl, the same applies. The versions don't have to be on the same domain.

What hreflang looks like

The <head> of every language version contains the same set of lines:

<link rel="alternate" hreflang="nl" href="https://www.example.com/bruidsboeketten">
<link rel="alternate" hreflang="en" href="https://www.example.com/en/bridal-bouquets">
<link rel="alternate" hreflang="de" href="https://www.example.com/de/brautstraeusse">
<link rel="alternate" hreflang="x-default" href="https://www.example.com/bruidsboeketten">

Four rules you need to know:

1. Every version lists itself and all the others. So the English page has exactly the same four lines, including the line for en that points to itself.
2. Links must be reciprocal. If the Dutch page points to the German one, the German page must point back to the Dutch one. Google says: if two pages don't both point to each other, the links are ignored. This is the most common mistake, which is why this lesson's exercise checks it.
3. Full addresses. Including https://. A path such as /en/bridal-bouquets or //www.example.com/en/... doesn't count.
4. In a clean <head>. The lines go in the <head> of the HTML. If something breaks the head earlier on, such as a stray <img> or <div> that doesn't belong there, a search engine may treat the head as closed and miss the rest.

The codes

The value of hreflang is a language code, optionally followed by a country code:

The language code comes from ISO 639-1 (two letters), the country code from ISO 3166-1 alpha-2. Upper or lower case doesn't matter, but the convention is language in lower case, country in upper case. Three pitfalls:

• A country on its own doesn't work. hreflang="be" means Belarusian (the language code be), not Belgium. A country always follows a language: nl-BE or fr-BE.
• en-UK doesn't exist. The country code for the United Kingdom is GB. Google says codes such as EU, UN or UK have no effect.
• Only add a country if the versions really differ (different prices, currency, delivery, spelling). If you have one German version for everyone, simply use de.

x-default

x-default is optional. It points to the page for visitors that none of your versions suits, for example someone who speaks French. This is often your main language or a page where visitors choose a language themselves.

Three methods, choose one

Google supports three equivalent ways to specify hreflang:

1. In the HTML, with <link> lines in the head, as shown above. The most common method.

2. As an HTTP header Link, useful for files without HTML, such as a PDF:

   Link: <https://www.example.com/en/price-list.pdf>; rel="alternate"; hreflang="en"

3. In the sitemap, with xhtml:link lines for each <url>. Useful for large sites, because the pages don't get heavier.

You don't need to combine them. If you use more than one, they must say exactly the same thing.

hreflang and canonical together

hreflang and canonical (lesson 3.5) work together, but don't mix them up:

• Every language version has a canonical pointing to itself. The English page is not a copy of the Dutch one, so it doesn't point to the Dutch page as its canonical address. If you do that, you're saying "the English page doesn't really exist", and it drops out of the index.
• The addresses in hreflang are the canonical addresses of the versions. If hreflang points to an address that redirects, returns a 404, has noindex or has a canonical pointing elsewhere, the group breaks.

When choosing the canonical address, Google prefers addresses that are part of an hreflang group. So a clean group also helps your canonicalisation.

In practice: let the system do it

Maintaining hreflang by hand is error-prone: with ten languages and a hundred pages, that's a thousand lines that all have to be right. Let your website system do it. On a multilingual site, WebOké's AI Builder adds hreflang links on every page to the same page in the other languages, plus an x-default pointing to the main language, and deliberately leaves a page without a translated counterpart out of the group. In WordPress, multilingual plugins do the same. In other website builders you'll find it under names such as "languages" or "international". Afterwards, check for yourself that the links work both ways; that's what the exercise does.

Summary

• hreflang tells search engines which pages are language or country versions of each other; it doesn't detect language and isn't a ranking trick.
• Give every version its own address, and don't redirect automatically based on language or location.
• Every version lists itself and all the others, with full addresses, and every link must be returned; otherwise Google ignores it.
• Codes: language from ISO 639-1, optionally with a country from ISO 3166-1 alpha-2 (en-GB, not en-UK); x-default for everyone else.
• Every version has a canonical pointing to itself; hreflang only points to canonical addresses that return 200.

Quiz

Exercise

Exercise A3.6: Are your hreflang links reciprocal? Enter the address of a page that exists in several languages. The program collects the hreflang links from the head and the Link header, checks the codes and the self-reference, fetches every other language version and checks that it points back, returns 200, has no noindex and has a canonical pointing to itself. No multilingual site of your own? Use https://european-union.europa.eu/index_nl.

Further reading

• Google Search Central, Tell Google about localized versions of your page: https://developers.google.com/search/docs/specialty/international/localized-versions
• Google Search Central, Managing multi-regional and multilingual sites: https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites
• Google Search Central, Consolidate duplicate URLs: https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls
• ISO 639 language codes (Library of Congress): https://www.loc.gov/standards/iso639-2/php/code_list.php