Skip to main content

Real-World Hreflang Examples

Learn from practical examples of hreflang tag implementation for different scenarios

1

E-commerce Product Page (Multiple Regions)

A product page targeting English speakers in different countries with specific regional versions

Scenario

An online store selling smartphones with versions for US, UK, Canada, and Australia. Each region has different pricing and availability.

Implementation 

<link rel="alternate" hreflang="en-US" href="https://shop.example.com/iphone-15" />
<link rel="alternate" hreflang="en-GB" href="https://shop.example.com/uk/iphone-15" />
<link rel="alternate" hreflang="en-CA" href="https://shop.example.com/ca/iphone-15" />
<link rel="alternate" hreflang="en-AU" href="https://shop.example.com/au/iphone-15" />
<link rel="alternate" hreflang="x-default" href="https://shop.example.com/iphone-15" />

💡Key Point: The x-default tag points to the US version as the default for unmatched regions.

2

Multilingual Blog Post

A blog article translated into multiple languages without regional targeting

Scenario:

A tech blog with articles in English, Spanish, French, and German. No specific regional targeting needed.

Implementation:

<link rel="alternate" hreflang="en" href="https://blog.example.com/ai-trends-2025" />
<link rel="alternate" hreflang="es" href="https://blog.example.com/es/tendencias-ia-2025" />
<link rel="alternate" hreflang="fr" href="https://blog.example.com/fr/tendances-ia-2025" />
<link rel="alternate" hreflang="de" href="https://blog.example.com/de/ki-trends-2025" />
<link rel="alternate" hreflang="x-default" href="https://blog.example.com/ai-trends-2025" />

Key Point: Using language-only codes (no region) when content applies to all speakers of that language worldwide.

3

Spanish Language with Regional Variants

Handling Spanish for Spain vs. Latin America with appropriate fallbacks

Scenario:

A service page with different Spanish versions for Spain, Mexico, and Argentina, plus a generic Spanish fallback.

Implementation:

<link rel="alternate" hreflang="en" href="https://example.com/services" />
<link rel="alternate" hreflang="es-ES" href="https://example.com/es/servicios" />
<link rel="alternate" hreflang="es-MX" href="https://example.com/mx/servicios" />
<link rel="alternate" hreflang="es-AR" href="https://example.com/ar/servicios" />
<link rel="alternate" hreflang="es" href="https://example.com/es/servicios" />
<link rel="alternate" hreflang="x-default" href="https://example.com/services" />

Key Point: Include both regional (es-MX) and language-only (es) tags for proper fallback handling.

4

XML Sitemap Hreflang Implementation

How to include hreflang annotations in your XML sitemap

Scenario:

Adding hreflang to XML sitemap for large sites where in-page tags would be impractical.

Implementation:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <url>
    <loc>https://example.com/page</loc>
    <xhtml:link rel="alternate" hreflang="en" href="https://example.com/page" />
    <xhtml:link rel="alternate" hreflang="es" href="https://example.com/es/pagina" />
    <xhtml:link rel="alternate" hreflang="fr" href="https://example.com/fr/page" />
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/page" />
  </url>
</urlset>

Key Point: Include the xmlns:xhtml namespace and use xhtml:link tags within each URL entry.

⚠️Common Mistakes to Avoid

❌ Missing Return Tags

Every page must link back to all variants, including itself. 

<!-- WRONG: English page doesn't have self-referential tag -->
<link rel="alternate" hreflang="es" href="/es/page" />
<!-- CORRECT: Include self-referential tag -->
<link rel="alternate" hreflang="en" href="/page" />
<link rel="alternate" hreflang="es" href="/es/page" />

❌ Mixing Language-Only and Regional Codes Incorrectly

Don't use generic language codes when you have regional variants. 

<!-- WRONG: Generic 'en' conflicts with regional variants -->
<link rel="alternate" hreflang="en" href="/page" />
<link rel="alternate" hreflang="en-US" href="/us/page" />
<link rel="alternate" hreflang="en-GB" href="/uk/page" />
<!-- CORRECT: Use x-default for fallback instead -->
<link rel="alternate" hreflang="en-US" href="/us/page" />
<link rel="alternate" hreflang="en-GB" href="/uk/page" />
<link rel="alternate" hreflang="x-default" href="/us/page" />

❌ Using Non-Standard Language Codes

Always use ISO 639-1 language codes and ISO 3166-1 country codes. 

<!-- WRONG: Invalid language/country codes -->
<link rel="alternate" hreflang="uk" href="/ukraine/page" />  <!-- 'uk' is Ukrainian, not Ukraine -->
<link rel="alternate" hreflang="en-UK" href="/uk/page" />  <!-- Should be GB, not UK -->
<!-- CORRECT: Use proper ISO codes -->
<link rel="alternate" hreflang="uk" href="/ukrainian/page" />  <!-- Ukrainian language -->
<link rel="alternate" hreflang="en-GB" href="/uk/page" />  <!-- English for Great Britain -->

Ready to Generate Your Hreflang Tags?

Use our free generator to create perfect hreflang tags for your website

Start Generator

Want another helper for your international rollout? Discover how KeywordForge Pro can simplify adjacent tasks in your workflow.