Hreflang Guide: Implementing International SEO Correctly
14 min readNovember 30, 2024
Hreflang tags are essential for websites targeting multiple languages or regions. This guide will teach you how to implement them correctly to ensure search engines show the right content to the right users.
What is Hreflang?
Hreflang is an HTML attribute that tells search engines about the language and regional targeting of a webpage. It helps Google and other search engines serve the correct language version to users based on their location and language preferences.
Basic Hreflang Syntax
<link rel="alternate" hreflang="en" href="https://example.com/en/page" /> <link rel="alternate" hreflang="es" href="https://example.com/es/page" /> <link rel="alternate" hreflang="fr" href="https://example.com/fr/page" />
Why Hreflang Matters
Without proper hreflang implementation, your website may suffer from:
- Duplicate content issues: Same content in different languages may be seen as duplicates
- Wrong language shown: Users might see content in the wrong language
- Poor user experience: Higher bounce rates when users can't understand content
- Diluted ranking signals: Link equity split across language versions
- Lower conversions: Users can't engage with content they don't understand
Hreflang Values Explained
Language Codes (ISO 639-1)
# Language only hreflang="en" # English hreflang="es" # Spanish hreflang="fr" # French hreflang="de" # German
Language-Region Codes
# Language + Region (ISO 3166-1 Alpha 2) hreflang="en-us" # English - United States hreflang="en-gb" # English - United Kingdom hreflang="es-es" # Spanish - Spain hreflang="es-mx" # Spanish - Mexico hreflang="fr-ca" # French - Canada
The x-default Value
Use hreflang="x-default" for users whose language/region doesn't match any of your specified versions:
<link rel="alternate" hreflang="x-default" href="https://example.com/page" />
Implementation Methods
1. HTML <head> Section
<head> <link rel="alternate" hreflang="en" href="https://example.com/en/page" /> <link rel="alternate" hreflang="es" href="https://example.com/es/page" /> <link rel="alternate" hreflang="x-default" href="https://example.com/page" /> </head>
2. HTTP Header
Link: <https://example.com/en/page>; rel="alternate"; hreflang="en",
<https://example.com/es/page>; rel="alternate"; hreflang="es"3. XML Sitemap
<url> <loc>https://example.com/en/page</loc> <xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/page"/> <xhtml:link rel="alternate" hreflang="es" href="https://example.com/es/page"/> <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/page"/> </url>
Hreflang Rules You Must Follow
- Include self-referencing hreflang on each page
- Every language version must reference all other versions
- Include x-default for unmatched languages/regions
- Use absolute URLs (not relative)
- Ensure all hreflang URLs are indexable (return 200)
- Keep hreflang consistent across all implementation methods
- Don't use hreflang for canonicalized pages
- Match hreflang URLs to canonical URLs
Common Hreflang Mistakes
- Missing return links: Page A links to B, but B doesn't link back to A
- Incorrect language codes: Using "uk" for Ukrainian (correct) vs UK English (incorrect)
- Pointing to redirected URLs: Hreflang URLs should resolve directly
- Conflicting with canonical: Hreflang and canonical should point to the same URL set
- Using on canonicalized pages: Only canonical pages should have hreflang
- Missing x-default: Always include a default version
URL Structure for Multilingual Sites
Option 1: Subdirectories (Recommended)
example.com/en/page example.com/es/page example.com/fr/page
Pros: Easy to implement, single domain authority
Option 2: Subdomains
en.example.com/page es.example.com/page fr.example.com/page
Pros: Separate server locations possible, clear separation
Option 3: Country-Code Domains
example.com/page (US) example.co.uk/page (UK) example.fr/page (France)
Pros: Strong geo-targeting signals, separate branding per region
Testing and Validation
Validate your hreflang implementation using these tools:
- Google Search Console: International Targeting report
- Screaming Frog: Crawl and check hreflang attributes
- Hreflang validator tools: Online validators like hreflang.org
- Google's hreflang testing tool: Part of GSC URL inspection
Complete Implementation Example
<!-- English version (example.com/en/page) --> <head> <link rel="canonical" href="https://example.com/en/page" /> <link rel="alternate" hreflang="en" href="https://example.com/en/page" /> <link rel="alternate" hreflang="es" href="https://example.com/es/page" /> <link rel="alternate" hreflang="fr" href="https://example.com/fr/page" /> <link rel="alternate" hreflang="x-default" href="https://example.com/en/page" /> </head> <!-- Spanish version (example.com/es/page) --> <head> <link rel="canonical" href="https://example.com/es/page" /> <link rel="alternate" hreflang="en" href="https://example.com/en/page" /> <link rel="alternate" hreflang="es" href="https://example.com/es/page" /> <link rel="alternate" hreflang="fr" href="https://example.com/fr/page" /> <link rel="alternate" hreflang="x-default" href="https://example.com/en/page" /> </head>