InsightsTopicsContact
Eckher
Your guide to what's next.
Eckher
Insights
Topics
Home › Eckher Insights › Markup for multilingual websites
Apr 4, 2020

Markup for multilingual websites

The correct markup for website localization and internationalization.

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.

Cover
See also
Using language codes
Official language codes used on the web.
Flow-relative padding and margin
Why is padding-inline-start better than padding-left?
Styling native HTML dropdowns
How to style the native HTML dropdown?
Eckher
Your guide to what's next.
Copyright © 2021 Eckher. Various trademarks held by their respective owners.