Hreflang for Multilingual Sites

Tell search engines about language and regional variations of your pages with hreflang.

Overview

When you have the same content in multiple languages or for different regions, search engines need to know which version to show to which users. The hreflang attribute on <link> elements in <head> provides this signal. For example: your homepage exists in English (en), French (fr), Spanish (es), and a US-specific English version (en-US). Without hreflang, Google might show the wrong version to users or penalize you for duplicate content. Each page should list all language variants including itself with hreflang="x-default" as a fallback for unmatched languages.

Key Points

•<link rel="alternate" hreflang="en" href="https://example.com/en/"> in every <head>
•Every page must list ALL language versions, including itself
•hreflang="x-default" is the fallback URL for users with no matching language
•Language codes follow BCP 47: en, fr, es, zh-Hans, pt-BR
•Region-specific: en-US (US English), en-GB (British English), pt-BR (Brazilian Portuguese)
•Hreflang is also specifiable in sitemaps as an alternative to <link> tags

Examples

Hreflang links on an English page

<!-- On the /en/ page (English) -->
<head>
  <link rel="canonical" href="https://example.com/en/">

  <!-- All language variants listed on every page -->
  <link rel="alternate" hreflang="en"    href="https://example.com/en/">
  <link rel="alternate" hreflang="en-US" href="https://example.com/en-us/">
  <link rel="alternate" hreflang="en-GB" href="https://example.com/en-gb/">
  <link rel="alternate" hreflang="fr"    href="https://example.com/fr/">
  <link rel="alternate" hreflang="es"    href="https://example.com/es/">
  <link rel="alternate" hreflang="de"    href="https://example.com/de/">

  <!-- Fallback for users with no matching language -->
  <link rel="alternate" hreflang="x-default" href="https://example.com/en/">
</head>

Same links on the French page

<!-- On the /fr/ page (French) IDENTICAL link set -->
<head>
  <link rel="canonical" href="https://example.com/fr/">

  <!-- Exact same hreflang block as on the English page -->
  <link rel="alternate" hreflang="en"         href="https://example.com/en/">
  <link rel="alternate" hreflang="fr"         href="https://example.com/fr/">
  <link rel="alternate" hreflang="es"         href="https://example.com/es/">
  <link rel="alternate" hreflang="x-default"  href="https://example.com/en/">
</head>

Every page in the cluster must have the same complete hreflang link set.

Common language codes

<!-- Language only -->
hreflang="en"     English (any region)
hreflang="fr"     French
hreflang="es"     Spanish
hreflang="de"     German
hreflang="zh-Hans" Simplified Chinese

<!-- Language + Region -->
hreflang="en-US"  English (United States)
hreflang="en-GB"  English (United Kingdom)
hreflang="pt-BR"  Portuguese (Brazil)
hreflang="zh-TW"  Traditional Chinese (Taiwan)

<!-- Fallback -->
hreflang="x-default"  Fallback for unmatched languages

Common Mistakes

Only adding hreflang to some pages but not all Google ignores incomplete implementations
Using incorrect language codes (e.g., "english" instead of "en")
Forgetting x-default users from unlisted languages see no preferred version

Note

If you have a small site, hreflang <link> tags work fine. For large sites with thousands of pages, implement hreflang in your XML sitemap instead it's easier to maintain and doesn't bloat every page's <head>.

Hreflang for Multilingual Sites

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What is the purpose of hreflang in HTML?