Skip to content
Meirra

Master Hreflang Tags for International SEO

Complete technical guide for implementing hreflang tags correctly on multilingual websites. Learn best practices, avoid common mistakes, and boost your international SEO.

Updated: 2024-12-20
20 minute read
Technical Guide
View Guide
M

Meirra

SEO & Web Development Expert, Meirra

Master Hreflang Tags for International SEO

The Complete Hreflang Guide

Master multilingual SEO with confidence

Understanding Hreflang

The hreflang attribute tells search engines which language you're using on a specific page, so they can show the right version to users searching in that language.

Introduced by Google in 2011, hreflang is now a critical component of international SEO, helping avoid duplicate content issues and ensuring users see content in their preferred language.

The attribute uses ISO language codes (like 'en' for English or 'es' for Spanish) and optional regional subtags (like 'es-ES' for Spanish in Spain or 'es-MX' for Spanish in Mexico).

This comprehensive guide covers everything you need to properly implement hreflang tags for international websites. Hreflang implementation is one of the most technically challenging aspects of multilingual SEO, but when done correctly, it ensures search engines serve the right language version to the right users. Our platform tracks hreflang performance in real-time.

We'll walk through multiple implementation methods, provide tested code examples, offer specific guidance for international expansion, and help you troubleshoot common errors. All with live dashboard monitoring.

Basic Example

Basic Hreflang Implementation

HTML link elements in the head section

HTML
<head>
  <!-- Other meta tags, title, etc. -->

  <!-- English page (example.com/page) would have these tags: -->
  &lt;link rel="alternate" hreflang="en" href="https://example.com/page/" /&gt;
  &lt;link rel="alternate" hreflang="es" href="https://example.com/es/page/" /&gt;
  &lt;link rel="alternate" hreflang="x-default" href="https://example.com/page/" /&gt;

  <!-- Spanish page (example.com/es/page) would have these same tags: -->
  &lt;link rel="alternate" hreflang="en" href="https://example.com/page/" /&gt;
  &lt;link rel="alternate" hreflang="es" href="https://example.com/es/page/" /&gt;
  &lt;link rel="alternate" hreflang="x-default" href="https://example.com/page/" /&gt;
</head>

Why It Matters

  • Prevents duplicate content issues across language versions
  • Ensures search engines serve the correct language to users
  • Helps maintain separate index rankings for each language version
  • Improves user experience by showing content in users' preferred language
  • Critical for businesses expanding into international markets

Common Mistakes

  • ✕
    Missing return links (not creating bidirectional references)
  • ✕
    Incorrect language or country codes
  • ✕
    Mixing relative and absolute URLs
  • ✕
    Conflicting canonical and hreflang signals
  • ✕
    Improper nesting in XML sitemaps
  • ✕
    Self-reference tags missing
View Troubleshooting Guide

Hreflang Language Codes

Explore valid language codes to use in your hreflang tags.

en
Common

English

en-US
Common

English (United States)

en-GB
Common

English (United Kingdom)

en-CA
Common

English (Canada)

en-AU
Common

English (Australia)

es
Common

Spanish

es-ES
Common

Spanish (Spain)

es-MX
Common

Spanish (Mexico)

es-CO
Common

Spanish (Colombia)

es-AR
Common

Spanish (Argentina)

fr
Common

French

fr-FR
Common

French (France)

fr-CA
Common

French (Canada)

pt
Common

Portuguese

pt-BR
Common

Portuguese (Brazil)

pt-PT
Common

Portuguese (Portugal)

zh
Common

Chinese

zh-CN
Common

Chinese (China)

zh-TW
Common

Chinese (Taiwan)

de
Common

German

de-DE
Common

German (Germany)

it
Common

Italian

it-IT
Common

Italian (Italy)

ja
Common

Japanese

ja-JP
Common

Japanese (Japan)

ko
Common

Korean

ko-KR
Common

Korean (South Korea)

ru
Common

Russian

ru-RU
Common

Russian (Russia)

ar
Common

Arabic

Code Format

Language codes follow ISO 639-1 standard. You can use language-only codes (e.g., 'en') or language-region combinations (e.g., 'en-US').

Interactive Tool

Hreflang Code Generator

Generate correct hreflang code for your multilingual website by entering your URLs below.

Instructions

  1. Enter your base domain (example.com)
  2. Add the pages you want to generate code for
  3. Specify which languages and regions each page is available in
  4. Choose your preferred implementation method (HTML, HTTP headers, or XML sitemap)
  5. Copy the generated code and implement it on your website

Hreflang Code Generator

Generate correct hreflang code for your multilingual website by entering your URLs below.

Domain Settings

Implementation Method

Pages

/ /
Available Languages

Code: 'en' for English, 'es' for general Spanish, 'es-ES' for Spain, 'x-default' for default

Generated Code

HTML Head Method

HTML

Implementation Tips

  • Always include the x-default tag to handle users with language preferences that don't match any of your versions
  • Make sure each language version includes links to all other language versions, including itself
  • Use absolute URLs (starting with http:// or https://) in all hreflang tags
  • Test your implementation with the tools mentioned in the testing section
  • Remember that hreflang is a hint, not a directive - search engines may still show a different version if they think it's more relevant
  • For consistency, use the same method (HTML head, HTTP headers, or XML sitemap) across your entire site

Additional Resources

Google's Official Hreflang DocumentationAhrefs Hreflang Guide
Code

Implementation Methods

Different ways to implement hreflang, each with its own advantages

Methods

HTML Head Tags

★★★★★
Best option for most websites

Add hreflang tags directly in the <head> section of each page

Direct control over tags on each page

Easy to implement for small sites

Works with all search engines

Code Examples

Basic HTML Implementation

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

Real-world Example

Here's an example of what hreflang implementation looks like on a real website:

Booking.com (HTML Head Implementation)

Booking.com website uses hreflang tags in the head for each language/region

HTML
<!DOCTYPE html>
<html lang="es-ES">
<head>
  <meta charset="utf-8">
  <title>Guía de Viajes España | Booking.com</title>
  
  <!-- Self-reference (Spanish - Spain) -->
  <link rel="alternate" hreflang="es-ES" href="https://www.booking.com/destinacione/pais/es.es.html" />
  
  <!-- Other language versions -->
  <link rel="alternate" hreflang="en-GB" href="https://www.booking.com/destinations/country/es.en-gb.html" />
  <link rel="alternate" hreflang="en-US" href="https://www.booking.com/destinations/country/es.html" />
  <link rel="alternate" hreflang="de" href="https://www.booking.com/destinations/country/es.de.html" />
  <link rel="alternate" hreflang="fr" href="https://www.booking.com/destinations/country/es.fr.html" />
  <link rel="alternate" hreflang="it" href="https://www.booking.com/destinations/country/es.it.html" />
  
  <!-- Default version -->
  <link rel="alternate" hreflang="x-default" href="https://www.booking.com/destinations/country/es.html" />
  
  <link rel="canonical" href="https://www.booking.com/destinacione/pais/es.es.html" />
  <!-- Other meta tags... -->
</head>
<body>
  <!-- Page content -->
</body>
</html>

Note: This is a simplified example based on real implementations. Actual implementations may vary.

Pro Tips

Include self-referencing tags

Use absolute URLs

Verify bidirectional links

External Resources

Google Search Central

Official documentation on localized versions

Moz Hreflang Guide

Comprehensive guide on hreflang implementation

Spanish Market Specifics

Important considerations when targeting Spanish-speaking markets

Regional Variations

Spanish varies significantly between Spain (es-ES) and Latin America. Consider using es-ES for Spain and es-MX or es-419 for Latin American markets.

Local Search Behavior

Spanish users often search differently than English users. Keywords may not be direct translations, and search intent can vary by region.

Domain Strategy

Consider using ccTLDs (.es for Spain) or subdirectories with proper geotargeting for better local visibility.

Content Localization

Beyond translation, adapt content for cultural relevance, local examples, currency, and measurement units.

Practical Guide

CMS Implementation

How to implement hreflang in popular content management systems

WordPress

WordPress

Popular CMS with strong multilingual support through plugins

1

Install and activate WPML

2

Configure languages and URL structure

3

WPML automatically adds hreflang tags

Recommended Plugin:

WPML (WordPress Multilingual Plugin)
Shopify

Shopify

E-commerce platform with built-in multilingual features

1

Enable multiple languages in Shopify admin

2

Configure language-specific URLs

3

Use apps for advanced hreflang control

Recommended Plugin:

Langify or Weglot
Drupal

Drupal

Powerful CMS with built-in multilingual capabilities

1

Enable Language and Content Translation modules

2

Configure language detection and selection

3

Use Metatag module for hreflang

Recommended Plugin:

Core Multilingual Modules
WooCommerce

WooCommerce

E-commerce plugin for WordPress with multilingual capabilities

1

Install and activate WPML or Polylang with their respective WooCommerce add-ons

2

Configure languages and translation settings

3

Translate products, categories, and checkout pages

4

Verify hreflang tags are properly implemented on product pages

5

Set up currency and payment gateways for different regions if needed

Recommended Plugin:

WPML with WooCommerce Multilingual
Magento

Magento

Enterprise e-commerce platform with built-in multilingual support

1

Set up store views for each language/locale combination in your Magento admin

2

Configure the locale and language for each store view

3

Translate your content, products, and store information

4

Enable and configure the built-in hreflang tag generator

5

Verify implementation through view-source or browser dev tools

Recommended Plugin:

Built-in Store Views
Webflow

Webflow

Visual web design platform with custom code capabilities

1

Create separate pages or folders for each language version

2

Add custom code snippet in the head section of each page

3

Ensure each language version has links to all other language versions

4

Use absolute URLs for all hreflang references

5

Test implementation using browser developer tools

Recommended Plugin:

Weglot or custom code
Custom Frameworks

Custom Frameworks

Headless CMS or custom-built solutions

1

Identify your site's language and regional structure

2

Create language detection and URL routing logic

3

Implement language switchers and proper redirects

4

Add hreflang tags to all page templates using your preferred method

5

Create automated testing to ensure bidirectional links are maintained

Recommended Plugin:

Custom implementation
Verification

Testing & Validation

Tools and techniques to validate your hreflang implementation

Google Search Console

Google's official tool for monitoring hreflang implementation and identifying issues.

International Targeting report shows hreflang errors

Language and country targeting verification

Crawl coverage for different language versions

Direct feedback from Google's crawler

Visit Tool

Hreflang Tags Testing Tool

Dedicated tool for validating hreflang implementation across your entire website.

Validates bidirectional links

Checks for proper language codes

Identifies missing return tags

Tests from multiple locations

Visit Tool

Screaming Frog SEO Spider

Comprehensive SEO crawler that includes hreflang validation features.

Crawls entire site for hreflang tags

Exports hreflang data for analysis

Identifies implementation errors

Validates against XML sitemaps

Visit Tool

Sitebulb

Visual website auditing tool with powerful hreflang analysis capabilities.

Visual hreflang mapping

Identifies orphaned language versions

Detailed implementation reports

Integration with Google Analytics

Visit Tool

ContentKing

Real-time SEO monitoring platform that tracks hreflang changes.

Real-time hreflang monitoring

Alerts for implementation issues

Historical tracking of changes

API access for automation

Visit Tool

Chrome Developer Tools

Built-in browser tools for quick hreflang verification.

View page source for manual inspection

Network tab to check HTTP headers

Console for JavaScript debugging

Free and always available

Visit Tool

What to Look for When Testing

Technical Checks

  • All tags have complete absolute URLs
  • Valid language codes (es-ES, en-US, etc.)
  • All pages include self-reference tags
  • XML sitemap uses correct xhtml:link syntax

Structural Checks

  • Complete bidirectional links between all versions
  • x-default tag properly configured
  • Consistency between canonical and hreflang tags
  • No redirects interfering with hreflang