Alex Bobes Logo
Tech

International SEO: Mastering Hreflang Implementation

Alex Bobes
14 min read
International SEO: Mastering Hreflang Implementation
Listen to article Ready
0:00 0:00

Here's a stat that should get your attention: 67% of websites that use hreflang tags have errors. That's according to Ahrefs' study of 6.6 million pages. Two out of three sites get it wrong.

But here's the thing – hreflang isn't actually that complicated. The problem is most guides turn it into rocket science when it's really just about telling Google which version of your page to show to which users.

I've spent years implementing international SEO across dozens of sites. This guide simplifies the complexity and provides practical advice.

What you'll learn:

  • When you actually need hreflang (and when you don't)
  • The three implementation methods and which one to use
  • How to avoid the most common errors
  • Step-by-step implementation for WordPress, Shopify, and custom sites
  • How to test and monitor your implementation

Let's start with the basics.

What Hreflang Actually Does

Hreflang tells search engines which language and regional versions of a page exist. That's it.

Example scenario:

You run an e-commerce site selling to both the US and the UK. You have separate pages for each market with different pricing, shipping info, and product availability. Without hreflang, Google might show your UK page to US users (or vice versa), leading to confused customers and lost sales.

Hreflang solves this dilemma by telling Google, "This page is for US English speakers, and this other page is the UK English equivalent."

What hreflang does NOT do:

  • Translate your content automatically
  • Handle redirects
  • Fix duplicate content issues
  • Boost your rankings directly

According to Google's International Targeting documentation, hreflang is specifically for helping search engines serve the right version of your content to the right users based on their language and location.

Do You Actually Need Hreflang?

Most sites don't need hreflang. Here's the decision framework:

You NEED hreflang if:

  • You have the same content in multiple languages (English, Spanish, French versions)
  • You have regional variations of the same language with different content (US English vs UK English with different products/pricing)
  • You serve different content to different regions even in the same language
  • You have an e-commerce site with regional pricing or product availability

You DON'T need hreflang if:

  • You have a single-language site with no regional variations
  • You use automatic geo-redirects (these conflict with hreflang)
  • Your international pages are completely different content (not translations)
  • You're a local business with no international expansion plans

Real-world example:

A client was losing $180,000 annually because their UK and US pages competed in search results. US users landed on UK pages with prices in pounds and shipping that didn't work. After implementing hreflang:

  • 43% reduction in bounce rate from international traffic
  • 31% increase in international organic traffic within 4 months
  • $220,000 additional annual revenue

But the first attempt had errors that caused a 15% traffic drop before they were fixed. That's why getting it right matters.

For organisations exploring international expansion, understanding broader market dynamics helps inform strategy. The analysis of Romania's economic future in the age of AI provides context for how technology enables global business operations.

The Three Implementation Methods

There are three ways to add hreflang tags. Choose based on your site size and technical capabilities.

Method 1: HTML Head Tags (Best for Most Sites)

Add hreflang tags directly in your page's <head> section.

Example:

<head>
    <link rel="alternate" hreflang="en-US" href="https://example.com/page" />
    <link rel="alternate" hreflang="en-GB" href="https://example.com/uk/page" />
    <link rel="alternate" hreflang="es-ES" href="https://example.com/es/page" />
    <link rel="alternate" hreflang="x-default" href="https://example.com/page" />
</head>

Pros:

  • Easy to implement
  • Visible in page source for debugging
  • Works with any CMS
  • Changes take effect immediately

Cons:

  • Adds page weight
  • Hard to maintain at scale (1000+ pages)
  • Manual errors are common

Best for: Sites with 10-500 pages, WordPress sites, teams with limited technical resources

Method 2: XML Sitemap (Best for Large Sites)

Add hreflang information to your XML sitemap.

Example:

<?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-US" href="https://example.com/page" />
        <xhtml:link rel="alternate" hreflang="en-GB" href="https://example.com/uk/page" />
        <xhtml:link rel="alternate" hreflang="es-ES" href="https://example.com/es/page" />
        <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/page" />
    </url>
</urlset>

Pros:

  • Scales well for large sites
  • Centralized management
  • Easy to automate
  • Doesn't affect page load time

Cons:

  • Google may take longer to process
  • Requires sitemap generation capability
  • Errors affect entire implementation

Best for: Sites with 1000+ pages, e-commerce sites, sites with automated content management

Method 3: HTTP Headers (Best for Non-HTML Files)

Add hreflang in HTTP response headers.

Example (Apache):

<Files "document.pdf">
    Header set Link: '<https://example.com/document.pdf>; rel="alternate"; hreflang="en-US", <https://example.com/uk/document.pdf>; rel="alternate"; hreflang="en-GB"'
</Files>

Pros:

  • Perfect for PDFs, images, videos
  • Doesn't add to page weight
  • Centralized configuration

Cons:

  • Requires server access
  • Harder to debug
  • More complex to implement

Best for: PDF documents, non-HTML content, technical teams

Which Method Should You Use?

Site Size Pages Recommended Method Why
Small 10-500 HTML Head Easy to implement, easy to debug
Medium 500-1000 HTML Head or Sitemap Transition point – choose based on resources
Large 1000+ XML Sitemap Scales better, easier to automate
Mixed Content Any Hybrid (HTML + Headers) HTML for pages, headers for PDFs

My recommendation: Start with HTML head tags. Once you hit 500-1000 pages or need better automation, migrate to XML sitemap.

The Moz International SEO Guide provides additional context on implementation methods and when to use each approach.

Language and Region Codes: Getting It Right

This is where most errors happen. The format is strict: language-REGION (e.g., en-US).

Critical formatting rules:

  • Language code: Two lowercase letters (ISO 639-1)
  • Region code: Two uppercase letters (ISO 3166-1)
  • Separator: Hyphen (-), not underscore (_)
  • Format: en-US NOT en-us or en_US or US-en 

Common language-region combinations:

Target Audience Correct Code Common Mistakes
US English en-US en-us, en_US, en-USA
UK English en-GB en-UK, en-gb (GB not UK!)
Spanish (Spain) es-ES es-SP, es-Spain
Spanish (Mexico) es-MX es-mx, mx
French (France) fr-FR fr-fr, fr-France
German (Germany) de-DE de-de, de-GER
Chinese (Simplified) zh-CN zh-Hans, cn
Portuguese (Brazil) pt-BR pt-br, br

The x-default tag:

Use x-default to specify which page to show users whose language/region doesn't match any of your tags.

<link rel="alternate" hreflang="x-default" href="https://example.com/page" />

Usually point this to your primary market or a language selector page.

Language-only vs Language-Region:

You can use language codes alone (en, es) or with regions (en-US, es-MX).

  • Language-only: Use when content is identical across all regions speaking that language
  • Language-region: Use when you have region-specific variations (pricing, products, legal content)

For detailed language code specifications, refer to the ISO 639-1 standard and ISO 3166-1 country codes.

The Six Most Common Errors (And How to Avoid Them)

Based on that 67% error rate, here are the mistakes that kill most implementations:

Error 1: Missing Return Links (45% of sites)

The problem: Page A links to Page B, but Page B doesn't link back to Page A. Google ignores both tags.

Example of wrong implementation:

<!-- US page links to UK page -->
<link rel="alternate" hreflang="en-US" href="https://example.com/page" />
<link rel="alternate" hreflang="en-GB" href="https://example.com/uk/page" />

<!-- But UK page doesn't link back to US page -->
<!-- Missing the en-US link! -->

How to fix it:

Every page must include ALL language versions, including itself.

<!-- US page -->
<link rel="alternate" hreflang="en-US" href="https://example.com/page" />
<link rel="alternate" hreflang="en-GB" href="https://example.com/uk/page" />

<!-- UK page (must include both) -->
<link rel="alternate" hreflang="en-US" href="https://example.com/page" />
<link rel="alternate" hreflang="en-GB" href="https://example.com/uk/page" />

Error 2: Wrong Language/Region Codes (28% of sites)

The problem: Using incorrect formatting or invalid codes.

Common mistakes:

  • en-us instead of en-US (wrong case)
  • en_US instead of en-US (underscore instead of hyphen)
  • en-UK instead of en-GB (wrong country code)
  • US-en instead of en-US (inverted order)

How to fix it:

Use a configuration file or constants to ensure consistency:

// JavaScript configuration
const HREFLANG_CODES = {
    'us': 'en-US',
    'uk': 'en-GB',
    'spain': 'es-ES',
    'mexico': 'es-MX',
    'france': 'fr-FR'
};

Error 3: Missing Self-Reference (35% of sites)

The problem: Pages don't include themselves in their hreflang list.

Wrong:

<!-- UK page missing self-reference -->
<link rel="alternate" hreflang="en-US" href="https://example.com/page" />
<link rel="alternate" hreflang="es-ES" href="https://example.com/es/page" />
<!-- Where's en-GB pointing to this page? -->

Correct:

<!-- UK page with self-reference -->
<link rel="alternate" hreflang="en-US" href="https://example.com/page" />
<link rel="alternate" hreflang="en-GB" href="https://example.com/uk/page" />
<link rel="alternate" hreflang="es-ES" href="https://example.com/es/page" />

Error 4: Non-Canonical URLs (18% of sites)

The problem: Hreflang points to URLs that aren't the canonical version.

Issues:

  • URLs with tracking parameters: ?utm_source=...
  • Inconsistent trailing slashes: /page vs /page/
  • HTTP vs HTTPS: http:// vs https://
  • www vs non-www: www.example.com vs example.com

How to fix it:

Always use canonical URLs in hreflang tags. Check each page's canonical tag and use that URL.

Error 5: Conflicting Signals (12% of sites)

The problem: Hreflang contradicts canonical tags or redirects.

Example conflict:

<!-- UK page says its canonical is the US version -->
<link rel="canonical" href="https://example.com/page" />

<!-- But hreflang says UK is a separate version -->
<link rel="alternate" hreflang="en-GB" href="https://example.com/uk/page" />

How to fix it:

Each page's canonical should point to itself, and hreflang should point to canonical versions:

<!-- UK page -->
<link rel="canonical" href="https://example.com/uk/page" />
<link rel="alternate" hreflang="en-US" href="https://example.com/page" />
<link rel="alternate" hreflang="en-GB" href="https://example.com/uk/page" />

Error 6: Broken or Redirecting URLs (15% of sites)

The problem: Hreflang points to URLs that return 404 errors or redirect to other URLs.

How to fix it:

  • Verify all hreflang URLs return 200 status codes
  • Remove or fix broken links
  • Update redirecting URLs to point to final destinations
  • Test regularly as your site evolves

For error detection, Google Search Console provides official reporting on hreflang errors, though with some delay in processing.

Step-by-Step Implementation

Let's walk through implementation for the most common platforms.

WordPress Implementation

WordPress doesn't have native hreflang support. Use a plugin or manual implementation.

Option 1: WPML Plugin (Recommended)

WPML is the most popular WordPress multilingual plugin ($99-299/year).

Setup:

  1. Install and activate WPML
  2. Go to WPML → Languages → Add languages
  3. Set URL structure (I recommend subdirectories: /es/, /fr/)
  4. Enable "Add hreflang tags" in WPML → Languages
  5. Translate content using WPML's interface

WPML automatically generates correct hreflang tags with bidirectional linking.

Option 2: Manual Implementation (Free)

Add to your theme's functions.php:

<?php
function add_hreflang_tags() {
    if (is_singular()) {
        $current_url = get_permalink();
        
        // Define your language versions
        $versions = array(
            'en-US' => 'https://example.com' . parse_url($current_url, PHP_URL_PATH),
            'en-GB' => 'https://example.com/uk' . parse_url($current_url, PHP_URL_PATH),
            'es-ES' => 'https://example.com/es' . parse_url($current_url, PHP_URL_PATH)
        );
        
        // Output hreflang tags
        foreach ($versions as $lang => $url) {
            echo '<link rel="alternate" hreflang="' . esc_attr($lang) . '" href="' . esc_url($url) . '" />' . "\n";
        }
        
        // Add x-default
        echo '<link rel="alternate" hreflang="x-default" href="' . esc_url($versions['en-US']) . '" />' . "\n";
    }
}
add_action('wp_head', 'add_hreflang_tags');
?>

Option 3: Polylang (Budget-Friendly)

Polylang offers a free version with a paid pro version ($99/year) that includes automatic hreflang.

For organisations managing complex WordPress implementations, the development principles outlined in semantic HTML5 inspection help ensure code quality and standards compliance.

Shopify Implementation

Shopify has native multi-language support (Shopify Plus) or uses apps.

Option 1: Shopify Markets (Shopify Plus)

  1. Go to Settings → Markets
  2. Add countries/regions
  3. Go to Settings → Languages → Add language
  4. Translate content
  5. Hreflang is automatic

Option 2: Langify App ($17.50/month)

  1. Install Langify from Shopify App Store
  2. Add languages in Langify settings
  3. Translate content using Langify interface
  4. Hreflang is automatic

Option 3: Weglot ($15-99/month)

  1. Install Weglot from Shopify App Store
  2. Add languages in Weglot dashboard
  3. Automatic machine translation with manual editing
  4. Hreflang is automatic

Custom Sites / Headless CMS

For custom implementations, you have complete control.

Database structure:

CREATE TABLE page_translations (
    id INT PRIMARY KEY AUTO_INCREMENT,
    page_id INT NOT NULL,
    language_code VARCHAR(10) NOT NULL,
    url VARCHAR(500) NOT NULL,
    UNIQUE KEY (page_id, language_code)
);

Generate hreflang tags:

// Node.js example
async function getHreflangTags(pageId) {
    const versions = await db.query(
        'SELECT language_code, url FROM page_translations WHERE page_id = ?',
        [pageId]
    );
    
    const tags = versions.map(v => ({
        hreflang: v.language_code,
        href: v.url
    }));
    
    // Add x-default
    tags.push({
        hreflang: 'x-default',
        href: versions[0].url
    });
    
    return tags;
}

Testing Your Implementation

Before Google processes your tags, catch errors with these tests:

Manual Checklist

For 10-20 sample pages:

□ View page source, find hreflang tags in 
□ Count tags (should match number of versions + x-default)
□ Verify self-referencing tag present
□ Check code formatting (case, hyphens)
□ Verify URLs are absolute (include https://)
□ Confirm URLs are canonical versions
□ Check x-default points to correct version

Automated Tools

1. Google Search Console (Free)

  • Add your site to Search Console
  • Submit sitemaps
  • Check International Targeting report for errors
  • Note: Errors appear days/weeks after implementation

2. Screaming Frog ($259/year)

  • Download and install Screaming Frog SEO Spider
  • Crawl your site
  • Go to Hreflang tab
  • Check for missing return links, invalid codes, broken URLs
  • Export error report

3. Hreflang Testing Tool (Free)

Use the hreflang validation tool for quick single or multi-page validation.

Validation Script

# Simple Python validation script
import requests
from bs4 import BeautifulSoup

def validate_hreflang(url):
    response = requests.get(url)
    soup = BeautifulSoup(response.content, 'html.parser')
    tags = soup.find_all('link', rel='alternate', hreflang=True)
    
    print(f"\nValidating: {url}")
    print(f"Found {len(tags)} hreflang tags")
    
    # Check self-reference
    has_self_ref = any(tag.get('href') == url for tag in tags)
    if not has_self_ref:
        print("Missing self-reference")
    else:
        print("Self-reference present")
    
    # Check x-default
    has_x_default = any(tag.get('hreflang') == 'x-default' for tag in tags)
    if not has_x_default:
        print("No x-default tag")
    else:
        print("X-default present")
    
    # List all tags
    for tag in tags:
        print(f"  {tag.get('hreflang')}: {tag.get('href')}")

# Test your pages
validate_hreflang('https://example.com/page')

Monitoring and Maintenance

Hreflang isn't "set it and forget it." Ongoing monitoring is critical.

Weekly Tasks

  • Check Search Console for new errors
  • Monitor international traffic patterns
  • Verify new pages have proper hreflang tags

Monthly Tasks

  • Run full site crawl with Screaming Frog
  • Review international traffic and conversion trends
  • Update documentation with any changes

Key Metrics to Track

Metric What to Watch Tool
Hreflang errors Should be <2% of pages Google Search Console
International organic traffic Should increase 20-50% over 6 months Google Analytics
Bounce rate by country Should decrease 15-30% Google Analytics
Rankings in target countries Track key terms by country Ahrefs, Semrush
Conversion rate by region Should improve 10-25% Google Analytics

Common Maintenance Issues

New pages without hreflang:

  • Set up automated checks in your deployment pipeline
  • Create templates that automatically include hreflang
  • Run weekly audits to catch missing tags

Broken links:

  • Monitor for 404 errors in hreflang URLs
  • Set up alerts for broken links
  • Fix immediately to prevent Google ignoring tags

Outdated translations:

  • Track when source content changes
  • Flag translated versions for review
  • Update all versions simultaneously when possible

ROI and Business Case

Implementing hreflang requires resources. Here's how to justify the investment.

Expected Results

Based on dozens of implementations:

Traffic Impact:

  • 20-50% increase in international organic traffic within 6 months
  • 15-30% reduction in bounce rate from international visitors
  • 10-25% improvement in conversion rates for international users

Timeline:

  • Weeks 1-4: Implementation and testing
  • Weeks 4-8: Google processes tags, initial improvements
  • Months 3-6: Full impact realized
  • Ongoing: Sustained improvements with proper maintenance

Cost Breakdown

Site Size Implementation Cost Annual Maintenance Expected Traffic Lift Break-Even Timeline
Small (<500 pages) $5K-$15K $2K-$5K 20-40% 8-12 months
Medium (500-2K pages) $15K-$50K $5K-$15K 30-60% 6-10 months
Large (2K-10K pages) $50K-$150K $15K-$40K 40-80% 4-8 months
Enterprise (10K+ pages) $150K-$500K $40K-$100K 50-100% 3-6 months

Real-World Example

E-commerce site with US and UK versions:

  • Before hreflang: $2.5M annual revenue, 68% bounce rate from wrong-region traffic
  • Implementation cost: $35,000
  • After hreflang (6 months):
    • 43% reduction in bounce rate
    • 31% increase in international traffic
    • $220,000 additional annual revenue
  • ROI: 629% first year

Final Words

Hreflang isn't complicated – it's just precise. The 67% error rate exists because people overcomplicate it or rush implementation without proper testing.

Key takeaways:

  1. Only implement if you need it - Don't add complexity unnecessarily
  2. Start simple - HTML head tags work for most sites
  3. Test thoroughly - Catch errors before Google processes your tags
  4. Monitor continuously - Hreflang requires ongoing maintenance
  5. Fix errors immediately - Small mistakes break entire implementations

Next steps:

  1. Determine if you need hreflang using the decision framework
  2. Choose your implementation method based on site size
  3. Implement on 10-20 pilot pages first
  4. Test thoroughly using the validation checklist
  5. Monitor Search Console for errors
  6. Roll out to full site once pilot is successful

The investment pays off. Sites with proper hreflang implementation see significant improvements in international traffic, user engagement, and revenue. But only if you get it right.

FAQ

How long does it take for Google to process hreflang tags?

Google typically processes hreflang tags within 2-4 weeks, but it can take up to 8 weeks for full implementation. You'll see initial changes in Search Console's International Targeting report within days, but full traffic impact takes longer. Monitor your Search Console regularly during this period.

Can I use hreflang with automatic geo-redirects?

No. Automatic redirects conflict with hreflang because Google's crawlers come from US IP addresses and will never see your international versions. Remove automatic redirects and use a country selector instead, allowing users to choose their region while letting Google crawl all versions. The Google Search Central documentation specifically advises against combining redirects with hreflang.

Do I need separate hreflang tags for mobile and desktop versions?

No. Hreflang works across devices automatically. If you have separate mobile URLs (m.example.com), you need separate hreflang implementation for those URLs, but you don't need device-specific hreflang codes. With responsive design (recommended), one set of hreflang tags covers all devices.

What's the difference between hreflang and canonical tags

Canonical tags tell Google which version of duplicate/similar content is the "master" version. Hreflang tells Google which language/region version to show to which users. They work together: each regional page should have a canonical pointing to itself and hreflang connecting it to other regional versions. They serve different purposes, and both are needed for international sites.

Can I use hreflang for different content in the same language?

Yes, but only if the content is truly region-specific (different products, prices, legal requirements). If you're just showing slightly different content to different regions for no good reason, you're creating duplicate content issues. Hreflang doesn't fix duplicate content; it tells Google that similar content is intentionally different for different regions. For more on content strategy, see the guide on LLM seeding and content visibility.

Related Articles

More articles you might find interesting

The Role of the CTO in Mergers and Acquisitions
Tech

The Strategic CTO: Mastering Technology Integration in Modern M&A

With global deal value reaching $3.4 trillion in 2024 and technology deals showing 27% growth in North America alon], the role of the Chief Technology Officer has evolved from technical assessor to strategic value orchestrator. Yet despite this critical importance, technology integration issues still account for 30% of failed mergers, representing billions in lost value and missed opportunities.

Alex Bobes
The Origins of ChatGPT and NLP: A Technical Overview
Tech

From Turing to ChatGPT: 75 Years of NLP History Explained

In November 2022, ChatGPT hit 1 million users in just 5 days. Two months later, it reached 100 million monthly active users - the fastest consumer application growth in history. But calling ChatGPT an "overnight success" misses the point entirely.

Alex Bobes
How AI Could Cause Mass Unemployment by 2040
Tech

AI and Jobs in 2025: What the Data Actually Shows About Employment Impact

As someone who's spent 16 years in tech leadership watching technology waves come and go, I've learned one thing: the gap between fear and reality is usually massive. The AI employment story is no different. While 78% of organizations now use AI (up from 55% in 2023), employment numbers remain remarkably stable. The Brookings Institution's October 2025 analysis puts it bluntly: "New data show no AI jobs apocalypse—for now."

Alex Bobes