HTML · SEO & Metadata

Hreflang

Target users by language and region with proper international SEO

Find videos you like?

Save to resource drawer for future reference!

What is Hreflang?

Understanding hreflang tags for multi-language and multi-regional sites

Hreflang tags tell search engines which language and regional versions of a page to show users based on their location and language preferences. This prevents duplicate content issues and ensures users see the right version.

Multi-Language

Serve different language versions of the same content

Regional Targeting

Target specific regions with localized content (pricing, shipping)

User Experience

Automatically show users content in their preferred language

Multi-Language Implementation

How to implement hreflang for different language versions

Multi-Language Hreflang

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CoderPod - Learn Web Development</title>
    <!-- Hreflang for Multiple Languages -->
    <link rel="alternate" hreflang="en" href="https://coderpod.com/">
    <link rel="alternate" hreflang="es" href="https://coderpod.com/es/">
    <link rel="alternate" hreflang="fr" href="https://coderpod.com/fr/">
    <link rel="alternate" hreflang="de" href="https://coderpod.com/de/">
    <link rel="alternate" hreflang="x-default" href="https://coderpod.com/">
  </head>
  <body>
    <div class="container">
      <h1>🌍 Multi-Language Website</h1>
      <div class="info-banner">
        <h3>💡 What is Hreflang?</h3>
        <p>
          Hreflang tags tell search engines which language version to show users based on their
          location and language preferences. This ensures French users see the French version,
          Spanish users see the Spanish version, etc.
        </p>
      </div>
      <h2 style="color: #6366f1; margin: 30px 0 15px; font-size: 1.5rem;">
        Available Languages:
      </h2>
      <div class="language-grid">
        <div class="lang-card active">
          <div class="flag">🇬🇧</div>
          <div class="lang-name">English</div>
          <div class="lang-code">hreflang="en"</div>
        </div>
        <div class="lang-card">
          <div class="flag">🇪🇸</div>
          <div class="lang-name">Español</div>
          <div class="lang-code">hreflang="es"</div>
        </div>
        <div class="lang-card">
          <div class="flag">🇫🇷</div>
          <div class="lang-name">Français</div>
          <div class="lang-code">hreflang="fr"</div>
        </div>
        <div class="lang-card">
          <div class="flag">🇩🇪</div>
          <div class="lang-name">Deutsch</div>
          <div class="lang-code">hreflang="de"</div>
        </div>
      </div>
      <h3 style="color: #6366f1; margin: 30px 0 15px;">Hreflang Tags:</h3>
      <div class="tag-display">
        &lt;link rel="alternate" hreflang="en" href="https://coderpod.com/"&gt;
        &lt;link rel="alternate" hreflang="es" href="https://coderpod.com/es/"&gt;
        &lt;link rel="alternate" hreflang="fr" href="https://coderpod.com/fr/"&gt;
        &lt;link rel="alternate" hreflang="de" href="https://coderpod.com/de/"&gt;
        &lt;link rel="alternate" hreflang="x-default" href="https://coderpod.com/"&gt;
      </div>
      <p style="text-align: center; color: #6b7280; margin-top: 30px; line-height: 1.6;">
        ✅ x-default is the fallback for users whose language isn't specified<br>
        View source to see all hreflang tags in the &lt;head&gt;!
      </p>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Regional Targeting

Target different regions with the same language but localized content

Regional Hreflang Targeting

Frontend

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CoderPod - US Store</title>
    <!-- Hreflang for Regional Targeting -->
    <link rel="alternate" hreflang="en-US" href="https://coderpod.com/us/">
    <link rel="alternate" hreflang="en-GB" href="https://coderpod.com/uk/">
    <link rel="alternate" hreflang="en-CA" href="https://coderpod.com/ca/">
    <link rel="alternate" hreflang="en-AU" href="https://coderpod.com/au/">
    <link rel="alternate" hreflang="en" href="https://coderpod.com/">
  </head>
  <body>
    <div class="container">
      <h1>🗺️ Regional Targeting (Same Language)</h1>
      <p style="text-align: center; color: #6b7280; font-size: 1.1rem; margin-bottom: 30px;">
        Target different English-speaking regions with region-specific content
      </p>
      <div class="region-grid">
        <div class="region-card active">
          <div class="flag">🇺🇸</div>
          <div class="region-name">United States</div>
          <div class="region-code">hreflang="en-US"</div>
          <div class="region-details">
            $ USD • Shipping: 2-5 days<br>
            coderpod.com/us/
          </div>
        </div>
        <div class="region-card">
          <div class="flag">🇬🇧</div>
          <div class="region-name">United Kingdom</div>
          <div class="region-code">hreflang="en-GB"</div>
          <div class="region-details">
            £ GBP • Shipping: 3-7 days<br>
            coderpod.com/uk/
          </div>
        </div>
        <div class="region-card">
          <div class="flag">🇨🇦</div>
          <div class="region-name">Canada</div>
          <div class="region-code">hreflang="en-CA"</div>
          <div class="region-details">
            $ CAD • Shipping: 2-6 days<br>
            coderpod.com/ca/
          </div>
        </div>
        <div class="region-card">
          <div class="flag">🇦🇺</div>
          <div class="region-name">Australia</div>
          <div class="region-code">hreflang="en-AU"</div>
          <div class="region-details">
            $ AUD • Shipping: 5-10 days<br>
            coderpod.com/au/
          </div>
        </div>
      </div>
      <div class="format-box">
        <h3>📋 Hreflang Format Guide</h3>
        <div class="format-example">
          <div class="format-label">Language Only:</div>
          <code>hreflang="en"</code> → Any English speaker
        </div>
        <div class="format-example">
          <div class="format-label">Language + Region:</div>
          <code>hreflang="en-US"</code> → English speakers in United States
        </div>
        <div class="format-example">
          <div class="format-label">Fallback (Always include):</div>
          <code>hreflang="x-default"</code> → Default for unmatched users
        </div>
        <p style="color: #78350f; margin-top: 15px; line-height: 1.6;">
          <strong>Format:</strong> language-REGION (ISO 639-1 + ISO 3166-1 Alpha 2)<br>
          <strong>Examples:</strong> en-US, es-MX, fr-CA, de-CH, pt-BR
        </p>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Common Language Codes

ISO 639-1 language codes and ISO 3166-1 region codes

Language Only:

en - English (any region)

es - Spanish

fr - French

de - German

zh - Chinese

ja - Japanese

Language + Region:

en-US - English (United States)

en-GB - English (United Kingdom)

es-ES - Spanish (Spain)

es-MX - Spanish (Mexico)

fr-CA - French (Canada)

pt-BR - Portuguese (Brazil)

Hreflang Best Practices

Complete guide to implementing hreflang correctly

Hreflang Best Practices Guide

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hreflang Best Practices | Guide</title>
  </head>
  <body>
    <div class="container">
      <h1>✅ Hreflang Best Practices</h1>
      <div class="rules-grid">
        <div class="rule-card">
          <h3>
            <span style="font-size: 1.5rem;">1️⃣</span>
            Bidirectional Links
          </h3>
          <p>
            Each language version must link to ALL other versions, including itself.
            If page A links to page B, then page B must link back to page A.
          </p>
          <div class="code-example">
            &lt;!-- On English page --&gt;
            &lt;link rel="alternate" hreflang="en" href="https://example.com/"&gt;
            &lt;link rel="alternate" hreflang="es" href="https://example.com/es/"&gt;
            &lt;!-- On Spanish page --&gt;
            &lt;link rel="alternate" hreflang="es" href="https://example.com/es/"&gt;
            &lt;link rel="alternate" hreflang="en" href="https://example.com/"&gt;
          </div>
        </div>
        <div class="rule-card">
          <h3>
            <span style="font-size: 1.5rem;">2️⃣</span>
            Self-Referencing Required
          </h3>
          <p>
            Each page must include a hreflang tag pointing to itself.
          </p>
          <div class="code-example">
            &lt;!-- On English page, must include self-reference --&gt;
            &lt;link rel="alternate" hreflang="en" href="https://example.com/"&gt;
          </div>
        </div>
        <div class="rule-card">
          <h3>
            <span style="font-size: 1.5rem;">3️⃣</span>
            Always Include x-default
          </h3>
          <p>
            Add an x-default version for users whose language/region doesn't match any specified version.
          </p>
          <div class="code-example">
            &lt;link rel="alternate" hreflang="x-default" href="https://example.com/"&gt;
          </div>
        </div>
        <div class="rule-card">
          <h3>
            <span style="font-size: 1.5rem;">4️⃣</span>
            Use Absolute URLs
          </h3>
          <p>
            Always use full URLs with protocol and domain. Relative URLs won't work.
          </p>
          <div class="code-example">
            &lt;!-- Good --&gt;
            &lt;link rel="alternate" hreflang="es" href="https://example.com/es/"&gt;
            &lt;!-- Bad - Don't use relative URLs --&gt;
            &lt;link rel="alternate" hreflang="es" href="/es/"&gt;
          </div>
        </div>
        <div class="rule-card">
          <h3>
            <span style="font-size: 1.5rem;">5️⃣</span>
            Correct Language Codes
          </h3>
          <p>
            Use ISO 639-1 for language and ISO 3166-1 Alpha 2 for region codes.
          </p>
          <div class="code-example">
            &lt;!-- Language only --&gt;
            hreflang="en"     ✅ English (any region)
            hreflang="es"     ✅ Spanish (any region)
            &lt;!-- Language + Region --&gt;
            hreflang="en-US"  ✅ English in United States
            hreflang="en-GB"  ✅ English in United Kingdom
            hreflang="es-ES"  ✅ Spanish in Spain
            hreflang="es-MX"  ✅ Spanish in Mexico
          </div>
        </div>
      </div>
      <h2 style="color: #8b5cf6; margin: 40px 0 20px; font-size: 2rem; text-align: center;">
        ✅ Do's and ❌ Don'ts
      </h2>
      <div class="do-dont-grid">
        <div class="do-card">
          <h4>✅ DO</h4>
          <ul style="margin: 10px 0 10px 20px; line-height: 1.8;">
            <li>Include self-reference</li>
            <li>Link bidirectionally</li>
            <li>Use absolute URLs</li>
            <li>Add x-default</li>
            <li>Match HTML lang attribute</li>
            <li>Use canonical with hreflang</li>
          </ul>
        </div>
        <div class="dont-card">
          <h4>❌ DON'T</h4>
          <ul style="margin: 10px 0 10px 20px; line-height: 1.8;">
            <li>Use relative URLs</li>
            <li>Forget bidirectional links</li>
            <li>Skip self-reference</li>
            <li>Omit x-default</li>
            <li>Use wrong language codes</li>
            <li>Link to 404 pages</li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Three Ways to Implement Hreflang

Choose the method that works best for your site

1. HTML Link Tags (Recommended)

Add link tags in the <head> section of each page

<link rel="alternate" hreflang="es" href="https://example.com/es/">

2. HTTP Headers

Return hreflang in HTTP response headers (for PDFs, non-HTML files)

Link: <https://example.com/es/>; rel="alternate"; hreflang="es"

3. XML Sitemap

Add hreflang annotations in your sitemap.xml file

<xhtml:link rel="alternate" hreflang="es" href="https://example.com/es/"/>

Hreflang Best Practices

Bidirectional links - Each page must link to all others, including itself
Self-referencing required - Include hreflang for current page
Always add x-default - Fallback for unmatched users
Use absolute URLs - Full URLs with https://
Correct format - language-REGION (en-US, es-MX)
Match HTML lang - Hreflang should match lang attribute
Use with canonical - Canonical + hreflang work together
Test thoroughly - Use Search Console International Targeting report

Testing Hreflang Implementation

Tools to validate your hreflang tags

🔧 Google Search Console

International Targeting report shows hreflang errors

Settings → International Targeting

✅ Hreflang Tags Testing Tool

Free online validator for hreflang implementation

https://www.aleydasolis.com/english/international-seo-tools/hreflang-tags-generator/

Common Hreflang Mistakes

Missing self-reference - Page must include hreflang to itself
One-way links - Must be bidirectional (A→B and B→A)
Relative URLs - Must use absolute URLs with domain
No x-default - Always include fallback version
Wrong language codes - Use ISO 639-1 and ISO 3166-1
Conflicting with canonical - Both should point to same URL
404 links - All hreflang URLs must be accessible
Inconsistent implementation - All pages must have complete set

Search Engine Support

Hreflang is fully supported by Google, Bing, and Yandex. It's been a standard for international SEO since 2011 and is essential for any multi-language or multi-regional website.

Previous Topic

Canonical URLs

rel="canonical" for duplicate content management.

Next Topic

Accessibility Basics

Introduction to web accessibility (a11y) and its importance.

Ask a Question

Have a question about Hreflang? Ask our AI assistant.

🔐 Login to use AI Assistant

HTML Code Editor

Write and experiment with HTML code.

Output

Click "Run Code" to see the output.

Execution is only supported for Java, Spring, and JavaScript.

HTML · SEO & Metadata

Hreflang

Target users by language and region with proper international SEO

Find videos you like?

Save to resource drawer for future reference!

What is Hreflang?

Understanding hreflang tags for multi-language and multi-regional sites

Multi-Language

Serve different language versions of the same content

Regional Targeting

Target specific regions with localized content (pricing, shipping)

User Experience

Automatically show users content in their preferred language

Multi-Language Implementation

How to implement hreflang for different language versions

Multi-Language Hreflang

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CoderPod - Learn Web Development</title>
    <!-- Hreflang for Multiple Languages -->
    <link rel="alternate" hreflang="en" href="https://coderpod.com/">
    <link rel="alternate" hreflang="es" href="https://coderpod.com/es/">
    <link rel="alternate" hreflang="fr" href="https://coderpod.com/fr/">
    <link rel="alternate" hreflang="de" href="https://coderpod.com/de/">
    <link rel="alternate" hreflang="x-default" href="https://coderpod.com/">
  </head>
  <body>
    <div class="container">
      <h1>🌍 Multi-Language Website</h1>
      <div class="info-banner">
        <h3>💡 What is Hreflang?</h3>
        <p>
          Hreflang tags tell search engines which language version to show users based on their
          location and language preferences. This ensures French users see the French version,
          Spanish users see the Spanish version, etc.
        </p>
      </div>
      <h2 style="color: #6366f1; margin: 30px 0 15px; font-size: 1.5rem;">
        Available Languages:
      </h2>
      <div class="language-grid">
        <div class="lang-card active">
          <div class="flag">🇬🇧</div>
          <div class="lang-name">English</div>
          <div class="lang-code">hreflang="en"</div>
        </div>
        <div class="lang-card">
          <div class="flag">🇪🇸</div>
          <div class="lang-name">Español</div>
          <div class="lang-code">hreflang="es"</div>
        </div>
        <div class="lang-card">
          <div class="flag">🇫🇷</div>
          <div class="lang-name">Français</div>
          <div class="lang-code">hreflang="fr"</div>
        </div>
        <div class="lang-card">
          <div class="flag">🇩🇪</div>
          <div class="lang-name">Deutsch</div>
          <div class="lang-code">hreflang="de"</div>
        </div>
      </div>
      <h3 style="color: #6366f1; margin: 30px 0 15px;">Hreflang Tags:</h3>
      <div class="tag-display">
        &lt;link rel="alternate" hreflang="en" href="https://coderpod.com/"&gt;
        &lt;link rel="alternate" hreflang="es" href="https://coderpod.com/es/"&gt;
        &lt;link rel="alternate" hreflang="fr" href="https://coderpod.com/fr/"&gt;
        &lt;link rel="alternate" hreflang="de" href="https://coderpod.com/de/"&gt;
        &lt;link rel="alternate" hreflang="x-default" href="https://coderpod.com/"&gt;
      </div>
      <p style="text-align: center; color: #6b7280; margin-top: 30px; line-height: 1.6;">
        ✅ x-default is the fallback for users whose language isn't specified<br>
        View source to see all hreflang tags in the &lt;head&gt;!
      </p>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Regional Targeting

Target different regions with the same language but localized content

Regional Hreflang Targeting

Frontend

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CoderPod - US Store</title>
    <!-- Hreflang for Regional Targeting -->
    <link rel="alternate" hreflang="en-US" href="https://coderpod.com/us/">
    <link rel="alternate" hreflang="en-GB" href="https://coderpod.com/uk/">
    <link rel="alternate" hreflang="en-CA" href="https://coderpod.com/ca/">
    <link rel="alternate" hreflang="en-AU" href="https://coderpod.com/au/">
    <link rel="alternate" hreflang="en" href="https://coderpod.com/">
  </head>
  <body>
    <div class="container">
      <h1>🗺️ Regional Targeting (Same Language)</h1>
      <p style="text-align: center; color: #6b7280; font-size: 1.1rem; margin-bottom: 30px;">
        Target different English-speaking regions with region-specific content
      </p>
      <div class="region-grid">
        <div class="region-card active">
          <div class="flag">🇺🇸</div>
          <div class="region-name">United States</div>
          <div class="region-code">hreflang="en-US"</div>
          <div class="region-details">
            $ USD • Shipping: 2-5 days<br>
            coderpod.com/us/
          </div>
        </div>
        <div class="region-card">
          <div class="flag">🇬🇧</div>
          <div class="region-name">United Kingdom</div>
          <div class="region-code">hreflang="en-GB"</div>
          <div class="region-details">
            £ GBP • Shipping: 3-7 days<br>
            coderpod.com/uk/
          </div>
        </div>
        <div class="region-card">
          <div class="flag">🇨🇦</div>
          <div class="region-name">Canada</div>
          <div class="region-code">hreflang="en-CA"</div>
          <div class="region-details">
            $ CAD • Shipping: 2-6 days<br>
            coderpod.com/ca/
          </div>
        </div>
        <div class="region-card">
          <div class="flag">🇦🇺</div>
          <div class="region-name">Australia</div>
          <div class="region-code">hreflang="en-AU"</div>
          <div class="region-details">
            $ AUD • Shipping: 5-10 days<br>
            coderpod.com/au/
          </div>
        </div>
      </div>
      <div class="format-box">
        <h3>📋 Hreflang Format Guide</h3>
        <div class="format-example">
          <div class="format-label">Language Only:</div>
          <code>hreflang="en"</code> → Any English speaker
        </div>
        <div class="format-example">
          <div class="format-label">Language + Region:</div>
          <code>hreflang="en-US"</code> → English speakers in United States
        </div>
        <div class="format-example">
          <div class="format-label">Fallback (Always include):</div>
          <code>hreflang="x-default"</code> → Default for unmatched users
        </div>
        <p style="color: #78350f; margin-top: 15px; line-height: 1.6;">
          <strong>Format:</strong> language-REGION (ISO 639-1 + ISO 3166-1 Alpha 2)<br>
          <strong>Examples:</strong> en-US, es-MX, fr-CA, de-CH, pt-BR
        </p>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Common Language Codes

ISO 639-1 language codes and ISO 3166-1 region codes

Language Only:

en - English (any region)

es - Spanish

fr - French

de - German

zh - Chinese

ja - Japanese

Language + Region:

en-US - English (United States)

en-GB - English (United Kingdom)

es-ES - Spanish (Spain)

es-MX - Spanish (Mexico)

fr-CA - French (Canada)

pt-BR - Portuguese (Brazil)

Hreflang Best Practices

Complete guide to implementing hreflang correctly

Hreflang Best Practices Guide

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hreflang Best Practices | Guide</title>
  </head>
  <body>
    <div class="container">
      <h1>✅ Hreflang Best Practices</h1>
      <div class="rules-grid">
        <div class="rule-card">
          <h3>
            <span style="font-size: 1.5rem;">1️⃣</span>
            Bidirectional Links
          </h3>
          <p>
            Each language version must link to ALL other versions, including itself.
            If page A links to page B, then page B must link back to page A.
          </p>
          <div class="code-example">
            &lt;!-- On English page --&gt;
            &lt;link rel="alternate" hreflang="en" href="https://example.com/"&gt;
            &lt;link rel="alternate" hreflang="es" href="https://example.com/es/"&gt;
            &lt;!-- On Spanish page --&gt;
            &lt;link rel="alternate" hreflang="es" href="https://example.com/es/"&gt;
            &lt;link rel="alternate" hreflang="en" href="https://example.com/"&gt;
          </div>
        </div>
        <div class="rule-card">
          <h3>
            <span style="font-size: 1.5rem;">2️⃣</span>
            Self-Referencing Required
          </h3>
          <p>
            Each page must include a hreflang tag pointing to itself.
          </p>
          <div class="code-example">
            &lt;!-- On English page, must include self-reference --&gt;
            &lt;link rel="alternate" hreflang="en" href="https://example.com/"&gt;
          </div>
        </div>
        <div class="rule-card">
          <h3>
            <span style="font-size: 1.5rem;">3️⃣</span>
            Always Include x-default
          </h3>
          <p>
            Add an x-default version for users whose language/region doesn't match any specified version.
          </p>
          <div class="code-example">
            &lt;link rel="alternate" hreflang="x-default" href="https://example.com/"&gt;
          </div>
        </div>
        <div class="rule-card">
          <h3>
            <span style="font-size: 1.5rem;">4️⃣</span>
            Use Absolute URLs
          </h3>
          <p>
            Always use full URLs with protocol and domain. Relative URLs won't work.
          </p>
          <div class="code-example">
            &lt;!-- Good --&gt;
            &lt;link rel="alternate" hreflang="es" href="https://example.com/es/"&gt;
            &lt;!-- Bad - Don't use relative URLs --&gt;
            &lt;link rel="alternate" hreflang="es" href="/es/"&gt;
          </div>
        </div>
        <div class="rule-card">
          <h3>
            <span style="font-size: 1.5rem;">5️⃣</span>
            Correct Language Codes
          </h3>
          <p>
            Use ISO 639-1 for language and ISO 3166-1 Alpha 2 for region codes.
          </p>
          <div class="code-example">
            &lt;!-- Language only --&gt;
            hreflang="en"     ✅ English (any region)
            hreflang="es"     ✅ Spanish (any region)
            &lt;!-- Language + Region --&gt;
            hreflang="en-US"  ✅ English in United States
            hreflang="en-GB"  ✅ English in United Kingdom
            hreflang="es-ES"  ✅ Spanish in Spain
            hreflang="es-MX"  ✅ Spanish in Mexico
          </div>
        </div>
      </div>
      <h2 style="color: #8b5cf6; margin: 40px 0 20px; font-size: 2rem; text-align: center;">
        ✅ Do's and ❌ Don'ts
      </h2>
      <div class="do-dont-grid">
        <div class="do-card">
          <h4>✅ DO</h4>
          <ul style="margin: 10px 0 10px 20px; line-height: 1.8;">
            <li>Include self-reference</li>
            <li>Link bidirectionally</li>
            <li>Use absolute URLs</li>
            <li>Add x-default</li>
            <li>Match HTML lang attribute</li>
            <li>Use canonical with hreflang</li>
          </ul>
        </div>
        <div class="dont-card">
          <h4>❌ DON'T</h4>
          <ul style="margin: 10px 0 10px 20px; line-height: 1.8;">
            <li>Use relative URLs</li>
            <li>Forget bidirectional links</li>
            <li>Skip self-reference</li>
            <li>Omit x-default</li>
            <li>Use wrong language codes</li>
            <li>Link to 404 pages</li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Three Ways to Implement Hreflang

Choose the method that works best for your site

1. HTML Link Tags (Recommended)

Add link tags in the <head> section of each page

<link rel="alternate" hreflang="es" href="https://example.com/es/">

2. HTTP Headers

Return hreflang in HTTP response headers (for PDFs, non-HTML files)

Link: <https://example.com/es/>; rel="alternate"; hreflang="es"

3. XML Sitemap

Add hreflang annotations in your sitemap.xml file

<xhtml:link rel="alternate" hreflang="es" href="https://example.com/es/"/>

Hreflang Best Practices

Bidirectional links - Each page must link to all others, including itself
Self-referencing required - Include hreflang for current page
Always add x-default - Fallback for unmatched users
Use absolute URLs - Full URLs with https://
Correct format - language-REGION (en-US, es-MX)
Match HTML lang - Hreflang should match lang attribute
Use with canonical - Canonical + hreflang work together
Test thoroughly - Use Search Console International Targeting report

Testing Hreflang Implementation

Tools to validate your hreflang tags

🔧 Google Search Console

International Targeting report shows hreflang errors

Settings → International Targeting

✅ Hreflang Tags Testing Tool

Free online validator for hreflang implementation

https://www.aleydasolis.com/english/international-seo-tools/hreflang-tags-generator/

Common Hreflang Mistakes

Missing self-reference - Page must include hreflang to itself
One-way links - Must be bidirectional (A→B and B→A)
Relative URLs - Must use absolute URLs with domain
No x-default - Always include fallback version
Wrong language codes - Use ISO 639-1 and ISO 3166-1
Conflicting with canonical - Both should point to same URL
404 links - All hreflang URLs must be accessible
Inconsistent implementation - All pages must have complete set

Search Engine Support

Hreflang is fully supported by Google, Bing, and Yandex. It's been a standard for international SEO since 2011 and is essential for any multi-language or multi-regional website.

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Canonical URLs

Accessibility Basics

HTML Code Editor

Building Your Learning Module...

Hreflang

Multi-Language

Regional Targeting

User Experience

Multi-Language Hreflang

Regional Hreflang Targeting

Language Only:

Language + Region:

Hreflang Best Practices Guide

1. HTML Link Tags (Recommended)

2. HTTP Headers

3. XML Sitemap

Hreflang Best Practices

🔧 Google Search Console

✅ Hreflang Tags Testing Tool

Common Hreflang Mistakes

Search Engine Support

Canonical URLs

Accessibility Basics

HTML Code Editor

Hreflang

Multi-Language

Regional Targeting

User Experience

Multi-Language Hreflang

Regional Hreflang Targeting

Language Only:

Language + Region:

Hreflang Best Practices Guide

1. HTML Link Tags (Recommended)

2. HTTP Headers

3. XML Sitemap

Hreflang Best Practices

🔧 Google Search Console

✅ Hreflang Tags Testing Tool

Common Hreflang Mistakes

Search Engine Support