Hreflang Implementation Guide
Complete guide to implementing hreflang tags correctly for international SEO.
What are Hreflang Tags?
Hreflang tags are HTML attributes that tell search engines which language and regional version of a page to show users based on their location and language preferences. They help search engines understand the relationship between different language or regional variations of the same content.
The attribute uses ISO 639-1 language codes (like en for English) and optionally ISO 3166-1 country codes (like US for United States) to specify the target audience.
Example: en-US targets English speakers in the United States, while en-GB targets English speakers in the United Kingdom.
Why Use Hreflang Tags?
- Improved User Experience: Users see content in their preferred language and region
- Avoid Duplicate Content Issues: Tell search engines that similar pages are intentional variations
- Better Search Rankings: Increase visibility in region-specific search results
- Reduced Bounce Rates: Users land on the most relevant version of your content
- International SEO: Essential for websites targeting multiple countries or languages
How to Implement Hreflang Tags
There are three methods to implement hreflang tags. Choose the one that best fits your technical setup:
1. HTML <link> Tags (Recommended)
Add hreflang tags in the <head> section of your HTML pages.
<head>
<!-- Current page -->
<link rel="alternate" hreflang="en-US" href="https://example.com/en-us/" />
<!-- UK version -->
<link rel="alternate" hreflang="en-GB" href="https://example.com/en-gb/" />
<!-- Spanish version -->
<link rel="alternate" hreflang="es-ES" href="https://example.com/es/" />
<!-- Default fallback -->
<link rel="alternate" hreflang="x-default" href="https://example.com/" />
</head>✓ Best for: Most websites. Easy to implement and validate.
2. XML Sitemap Method
Add hreflang annotations to your XML sitemap. Useful for sites with many pages.
<?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/en-us/</loc>
<xhtml:link rel="alternate" hreflang="en-US"
href="https://example.com/en-us/" />
<xhtml:link rel="alternate" hreflang="en-GB"
href="https://example.com/en-gb/" />
<xhtml:link rel="alternate" hreflang="es-ES"
href="https://example.com/es/" />
<xhtml:link rel="alternate" hreflang="x-default"
href="https://example.com/" />
</url>
</urlset>✓ Best for: Large sites with thousands of pages. Centralized management.
3. HTTP Header Method
Return hreflang information in HTTP headers. Ideal for non-HTML files (PDFs, etc.).
Link: <https://example.com/en-us/file.pdf>; rel="alternate"; hreflang="en-US",
<https://example.com/en-gb/file.pdf>; rel="alternate"; hreflang="en-GB",
<https://example.com/es/file.pdf>; rel="alternate"; hreflang="es-ES",
<https://example.com/file.pdf>; rel="alternate"; hreflang="x-default"✓ Best for: Non-HTML content like PDFs, images, or downloadable files.
Platform-Specific Guides
WordPress
Use plugins like WPML or Polylang which automatically generate hreflang tags based on your language settings.
- • Install multilingual plugin
- • Configure language settings
- • Plugin handles hreflang automatically
Shopify
Shopify Markets automatically adds hreflang tags when you enable multiple markets.
- • Enable Shopify Markets
- • Add target countries/regions
- • Hreflang tags added automatically
Custom/Static Sites
Manually add hreflang tags to each page's HTML or use build-time generation scripts.
- • Add tags to <head> section
- • Update on every page
- • Use templates to automate
Next.js / Nuxt.js
Use i18n libraries and add hreflang in the head metadata dynamically.
- • Use next-i18next or nuxt/i18n
- • Add link tags in Head component
- • Generate dynamically per route
Common Mistakes to Avoid
❌ Missing Return Tags
Problem: Page A links to Page B, but Page B doesn't link back to Page A.
Solution: Every page must reference all language variants, including itself.
❌ Incorrect Language/Country Codes
Problem: Using en-UK instead of en-GB.
Solution: Always use ISO 639-1 and ISO 3166-1 standard codes. Use our codes reference.
❌ Not Including Self-Referential Tag
Problem: Page doesn't include a hreflang tag pointing to itself.
Solution: Always include the current page in the hreflang annotations.
❌ Linking to Non-Equivalent Content
Problem: Linking pages with completely different content.
Solution: Only link pages that are translations or regional variants of the same content.
❌ Using Relative URLs
Problem: Using /en-us/page instead of full URL.
Solution: Always use absolute URLs with protocol: https://example.com/en-us/page
❌ Forgetting x-default
Problem: No fallback page specified for unmatched users.
Solution: Include hreflang="x-default" pointing to your default/international version.
Best Practices for International SEO
✓ Use Separate URLs for Each Language
Create distinct URLs for each language variant (subdomains, subdirectories, or ccTLDs). Avoid using cookies or browser detection alone.
✓ Be Consistent Across All Pages
Apply the same hreflang pattern across your entire site. If you use subdirectories, stick with subdirectories everywhere.
✓ Keep Content Truly Equivalent
Pages linked with hreflang should be genuine translations or regional adaptations, not completely different content.
✓ Use Language Codes When Possible
Only add country codes when necessary (e.g., en-US vs en-GB for different English variants). Use just en if content serves all English speakers.
✓ Validate Your Implementation
Use our Hreflang Validator to check for errors. Also use Google Search Console to monitor hreflang issues.
✓ Monitor and Update Regularly
Check your hreflang implementation regularly, especially after adding new pages or language versions.
✓ Use Canonical Tags Correctly
Each language version should have a self-referential canonical tag. Don't canonicalize all versions to one language.
Ready to Implement Hreflang Tags?
Use our free tools to generate, validate, and manage your hreflang tags.
Frequently Asked Questions
Q: Do I need hreflang tags if my site is only in one language?
A: Not necessarily. If your site targets only one language and region, hreflang tags aren't required. However, if you have different regional versions (e.g., en-US vs. en-GB) with region-specific content like pricing or availability, hreflang tags are recommended.
Q: What's the difference between language-only (e.g., "en") and language-region (e.g., "en-US") codes?
A: Language-only codes (like en) target all speakers of that language globally. Language-region codes (like en-US) target speakers in a specific country. Use language-region when you have region-specific content; use language-only when content applies to all speakers of that language.
Q: Should I use HTML tags, XML sitemaps, or HTTP headers for hreflang?
A: Each method works, but they have different use cases:
- HTML tags: Best for most sites. Easy to implement and verify.
- XML sitemaps: Good for large sites with many pages or when you can't modify HTML.
- HTTP headers: Useful for non-HTML content like PDFs.
Only use one method per page to avoid conflicts.
Q: What is the x-default tag and when should I use it?
A: The x-default tag specifies a fallback page for users whose language/region doesn't match any of your specified hreflang tags. It's recommended for international sites. Typically, point it to your main language version or a language selector page.
Q: How do I test if my hreflang implementation is correct?
A: Use these methods to validate your implementation:
- Use our Hreflang Validator tool
- Check Google Search Console for hreflang errors
- Verify all pages have bidirectional links (each page links to all variants including itself)
- Ensure you're using correct ISO 639-1 language and ISO 3166-1 country codes
Q: Do hreflang tags affect my search rankings?
A: Hreflang tags don't directly improve rankings, but they help search engines show the right content to the right users. This leads to better user experience, lower bounce rates, and higher engagement—which can indirectly improve your SEO performance in regional searches.
Q: Can I use hreflang for pages that aren't exact translations?
A: Hreflang tags should link pages that serve the same purpose for different languages/regions. They don't need to be word-for-word translations, but they should be equivalent versions. For example, a product page in English and its Spanish equivalent should use hreflang, even if product names or descriptions differ slightly.
Q: How long does it take for Google to recognize hreflang tags?
A: It typically takes a few days to a few weeks for Google to crawl and process hreflang tags. The exact time depends on your site's crawl frequency and the number of pages. Monitor Google Search Console for any errors and be patient—hreflang changes aren't instant.