Markup for multilingual websites

The correct markup for website localization and internationalization.

Internationalization and localization HTML Search engine optimization

Many websites have content in multiple languages targeting multiple countries. For the purposes of SEO, it is important to explicitly specify the target region and language codes for each page and link different page versions to each other.

The lang attribute

Normally, each page only includes content in one primary language and targets a specific country or region. This language needs to be specified in the root <html> tag using the lang attribute:


<!doctype html>
<html lang="en-gb">
    <!-- ... HTML content -->
</html>

To learn more about the lang attribute, visit W3C's website.

The hreflang attribute

Consider the following scenario: a website has three pages about a book in different languages:

Since all those pages have the same content, it is important to have those pages link to each other. This will also enable Google to display the correct language version of a page in search results.

One of the easiest methods to indicate multiple language/locale versions of a page is to use <link rel="alternate" hreflang="LANGUAGE_CODE-COUNTRY_CODE" href="..." /> tags. All thee pages need to include the same <link> elements in the <head> section:

<link rel="alternate" hreflang="en-gb"     href="https://www.example.com/en-gb/harry-potter" />
<link rel="alternate" hreflang="en-us"     href="https://www.example.com/en-us/harry-potter" />
<link rel="alternate" hreflang="en"        href="https://www.example.com/en-gb/harry-potter" />
<link rel="alternate" hreflang="de-de"     href="https://www.example.com/de-de/harry-potter" />
<link rel="alternate" hreflang="de"        href="https://www.example.com/de-de/harry-potter" />
<link rel="alternate" hreflang="x-default" href="https://www.example.com/en-gb/harry-potter" />

The snippet above specifies the following instructions for Google Search:

English speakers in the U.K. should be directed to /en-gb/harry-potter
English speakers in the U.S. should be directed to /en-us/harry-potter
English speakers in the rest of the world should be directed to /en-gb/harry-potter
German speakers in Germany and worldwide should be directed to /de-de/harry-potter
In all other cases, the users should be directed to /en-gb/harry-potter

If the websites also has the https://www.example.com/harry-potter (or https://www.example.com/xx/harry-potter) page which shows a language/country selector or clickable map, place the following snippet on all four pages instead:

<link rel="alternate" hreflang="en-gb"     href="https://www.example.com/en-gb/harry-potter" />
<link rel="alternate" hreflang="en-us"     href="https://www.example.com/en-us/harry-potter" />
<link rel="alternate" hreflang="en"        href="https://www.example.com/en-gb/harry-potter" />
<link rel="alternate" hreflang="de-de"     href="https://www.example.com/de-de/harry-potter" />
<link rel="alternate" hreflang="de"        href="https://www.example.com/de-de/harry-potter" />
<link rel="alternate" hreflang="x-default" href="https://www.example.com/harry-potter" />

Country code top level domains

If a website uses a domain name under a country-code top level domain, e.g. example.de, this can also act as a geotargeting signal.