Many sites provide different versions of a page based on a user's language or
region. hreflang
links tell search engines the URLs for all the versions of
a page so that they can display the correct version for each language or region.
How the Lighthouse hreflang
audit fails
Lighthouse flags
incorrect hreflang
links:
![Lighthouse audit showing incorrect hreflang links](/https/developer.chrome.com/static/docs/lighthouse/seo/hreflang/image/lighthouse-audit-showing-c1b52e7e2527d.png)
Lighthouse checks for hreflang
links
in the page's head
and in its response headers.
Lighthouse then checks for valid language codes within the hreflang
links.
Lighthouse reports any hreflang
links with invalid language codes.
Lighthouse does not check region codes or your sitemap.
How to define an hreflang
link for each version of a page
Suppose that you have three versions of a page:
- An English version at
https://example.com
- A Spanish version at
https://es.example.com
- A German version at
https://de.example.com
There are three ways to tell search engines that these pages are equivalent. Choose whichever method is easiest for your situation.
Option 1: Add hreflang
links to the <head>
of each page:
<link rel="alternate" hreflang="en" href="https://example.com" />
<link rel="alternate" hreflang="es" href="https://es.example.com" />
<link rel="alternate" hreflang="de" href="https://de.example.com" />
Each version of a page must link to all other versions,
including itself. Otherwise, search engines may ignore the hreflang
links
or interpret them incorrectly.
For pages that allow users to select their language, use the x-default
keyword:
<link rel="alternate" href="https://example.com" hreflang="x-default" />
Option 2: Add Link
headers to your HTTP response:
Link: <https://example.com>; rel="alternate"; hreflang="en", <https://es.example.com>;
rel="alternate"; hreflang="es", <https://de.example.com>; rel="alternate"; hreflang="de"
Option 3: Add language version information to your sitemap.
<url>
<loc>https://example.com</loc>
<xhtml:link rel="alternate" hreflang="es"
href="https://es.example.com"/>
<xhtml:link rel="alternate" hreflang="de"
href="https://es.example.com"/>
</url>
Guidelines for hreflang
values
- The
hreflang
value must always specify a language code. - The language code must follow ISO 639-1 format.
- The
hreflang
value can also include an optional regional code. For example,es-mx
is for Spanish speakers in Mexico, whilees-cl
is for Spanish speakers in Chile. - The region code must follow the ISO 3166-1 alpha-2 format.