Hreflang Implementation Guide
Hreflang Implementation Guide
The complete technical guide for multilingual websites targeting Spanish & English markets
Meirra is loadingMeirra
SEO & Web Development Expert, Meirra
Understanding Hreflang
Hreflang Guide
Understand and optimize your hreflang tags for international SEO
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 websites targeting both Spanish and English markets. 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.
We'll walk through multiple implementation methods, provide tested code examples, offer specific guidance for Spanish market targeting, and help you troubleshoot common errors.
Basic Example
Basic Hreflang Implementation
Note how each page must have the complete set of hreflang tags
<head>
<!-- Other meta tags, title, etc. -->
<!-- English page (example.com/page) would have these tags: -->
<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/" />
<!-- Spanish page (example.com/es/page) would have these same tags: -->
<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/" />
</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 targeting both Spanish and English 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
Hreflang Language Codes
Explore valid language codes to use in your hreflang tags.
en
English
en-US
English (United States)
en-GB
English (United Kingdom)
en-CA
English (Canada)
en-AU
English (Australia)
es
Spanish
es-ES
Spanish (Spain)
es-MX
Spanish (Mexico)
es-CO
Spanish (Colombia)
es-AR
Spanish (Argentina)
fr
French
fr-FR
French (France)
fr-CA
French (Canada)
de
German
de-DE
German (Germany)
it
Italian
it-IT
Italian (Italy)
pt
Portuguese
pt-BR
Portuguese (Brazil)
pt-PT
Portuguese (Portugal)
zh
Chinese
zh-CN
Chinese (China)
zh-TW
Chinese (Taiwan)
ja
Japanese
ja-JP
Japanese (Japan)
ko
Korean
ko-KR
Korean (South Korea)
ru
Russian
ru-RU
Russian (Russia)
ar
Arabic
nl
Dutch
nl-NL
Dutch (Netherlands)
x-default
Default
Code Format
Hreflang language codes follow ISO 639-1 format for languages (two letters, e.g., "es") and optionally ISO 3166-1 Alpha-2 for countries (two letters, e.g., "ES"). Always use lowercase for the language code and uppercase for the country code.