Real-World Hreflang Examples
Learn from practical examples of hreflang tag implementation for different scenarios
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.
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.
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.
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