Skip to main content

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.

Generate Hreflang Tags Validate Your Tags

Frequently Asked Questions

Want more international SEO support? Visit LinkGuard Pro for companion resources that reinforce the best practices in this guide.