hreflang

Pages declare their language and region for international users.

Impact

About

The hreflang attribute helps search engines understand which language and region a webpage is targeting. This is useful when a website has multiple versions in different languages or for different regions. By using hreflang, the site can show the correct version of a page to users based on their language or location, improving their experience. It also helps search engines avoid showing the wrong language version in search results, leading to better SEO and user engagement.

Why it's important

Indicates page language and region, helping users see the right version and improving search results in different countries.

User stories

As a website visitor, I want to see the page in my language so I can easily understand the content.

Code

Add inside <head> for each language version:

<link rel="alternate" hreflang="en" href="https://example.gov/en/page/">
<link rel="alternate" hreflang="es" href="https://example.gov/es/page/">
<link rel="alternate" hreflang="x-default" href="https://example.gov/page/">

Error

ScanGov messaging when a site fails a standard:

The pages has a missing or invalid hreflang attribute.

Example

Full <head> pattern for a site offering English and Spanish content:

<head>
  <meta charset="UTF-8">
  <title>Benefits — U.S. Department of Veterans Affairs</title>

  <!-- Self-referencing canonical -->
  <link rel="canonical" href="https://www.va.gov/benefits/">

  <!-- hreflang: tell search engines about language alternates -->
  <link rel="alternate" hreflang="en" href="https://www.va.gov/benefits/">
  <link rel="alternate" hreflang="es" href="https://www.va.gov/es/benefits/">
  <link rel="alternate" hreflang="x-default" href="https://www.va.gov/benefits/">
</head>

Guidance

Google Search Central

Indicators

Botability