Saltar al contenido
Meirra

Domina las Etiquetas Hreflang para SEO Internacional

Guía técnica completa para implementar correctamente las etiquetas hreflang en sitios web multilingües. Aprende las mejores prácticas, evita errores comunes y mejora tu SEO internacional.

Updated: 2024-12-20
20 minutos de lectura
Guía Técnica
Ver Guía
M

Meirra

Experto en SEO y Desarrollo Web, Meirra

Domina las Etiquetas Hreflang para SEO Internacional

La Guía Completa de Hreflang

Domina el SEO multilingüe con confianza

Entendiendo Hreflang

El atributo hreflang le dice a los motores de búsqueda qué idioma estás usando en una página específica, para que puedan mostrar la versión correcta a los usuarios que buscan en ese idioma.

Introducido por Google en 2011, hreflang es ahora un componente crítico del SEO internacional, ayudando a evitar problemas de contenido duplicado y asegurando que los usuarios vean contenido en su idioma preferido.

El atributo utiliza códigos de idioma ISO (como 'en' para inglés o 'es' para español) y subtags regionales opcionales (como 'es-ES' para español en España o 'es-MX' para español en México).

Esta guía completa cubre todo lo que necesitas para implementar correctamente etiquetas hreflang para sitios web internacionales. La implementación de hreflang es uno de los aspectos técnicamente más desafiantes del SEO multilingüe, pero cuando se hace correctamente, asegura que los motores de búsqueda muestren la versión correcta del idioma a los usuarios adecuados. Nuestra plataforma rastrea el rendimiento de hreflang en tiempo real.

Repasaremos múltiples métodos de implementación, proporcionaremos ejemplos de código probados, ofreceremos orientación específica para la expansión internacional y te ayudaremos a solucionar errores comunes. Todo con monitoreo de dashboard en vivo.

Ejemplo Básico

Implementación Básica de Hreflang

Elementos de enlace HTML en la sección head

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>

Por Qué Es Importante

  • Previene problemas de contenido duplicado entre versiones de idiomas
  • Asegura que los motores de búsqueda muestren el idioma correcto a los usuarios
  • Ayuda a mantener clasificaciones de índice separadas para cada versión de idioma
  • Mejora la experiencia del usuario mostrando contenido en el idioma preferido de los usuarios
  • Crítico para empresas expandiéndose a mercados internacionales

Errores Comunes

  • ✕
    Enlaces de retorno faltantes (no crear referencias bidireccionales)
  • ✕
    Códigos de idioma o país incorrectos
  • ✕
    Mezclar URLs relativas y absolutas
  • ✕
    Señales canónicas y hreflang conflictivas
  • ✕
    Anidación incorrecta en sitemaps XML
  • ✕
    Etiquetas de auto-referencia faltantes
Ver Guía de Solución de Problemas

Códigos de Idioma Hreflang

Explora los códigos de idioma válidos para usar en tus etiquetas hreflang.

en
Común

Inglés

en-US
Común

Inglés (Estados Unidos)

en-GB
Común

Inglés (Reino Unido)

en-CA
Común

Inglés (Canadá)

en-AU
Común

Inglés (Australia)

es
Común

Español

es-ES
Común

Español (España)

es-MX
Común

Español (México)

es-CO
Común

Español (Colombia)

es-AR
Común

Español (Argentina)

fr
Común

Francés

fr-FR
Común

Francés (Francia)

fr-CA
Común

Francés (Canadá)

pt
Común

Portugués

pt-BR
Común

Portugués (Brasil)

pt-PT
Común

Portugués (Portugal)

zh
Común

Chino

zh-CN
Común

Chino (China)

zh-TW
Común

Chino (Taiwán)

de
Común

Alemán

de-DE
Común

Alemán (Alemania)

it
Común

Italiano

it-IT
Común

Italiano (Italia)

ja
Común

Japonés

ja-JP
Común

Japonés (Japón)

ko
Común

Coreano

ko-KR
Común

Coreano (Corea del Sur)

ru
Común

Ruso

ru-RU
Común

Ruso (Rusia)

ar
Común

Árabe

Formato de Código

Los códigos de idioma siguen el estándar ISO 639-1. Puedes usar códigos solo de idioma (ej. 'es') o combinaciones idioma-región (ej. 'es-ES').

Herramienta Interactiva

Generador de Código Hreflang

Genera código hreflang correcto para tu sitio web multilingüe ingresando tus URLs a continuación.

Instrucciones

  1. Introduce tu dominio base (ejemplo.com)
  2. Agrega las páginas para las que quieres generar código
  3. Específica en qué idiomas y regiones está disponible cada página
  4. Elige tu método de implementación preferido (HTML, cabeceras HTTP o sitemap XML)
  5. Copia el código generado e impleméntalo en tu sitio web

Generador de Código Hreflang

Genera código hreflang correcto para tu sitio web multilingüe ingresando tus URLs a continuación.

Configuración del Dominio

Método de Implementación

Páginas

/ /
Idiomas Disponibles

Código: 'en' para inglés, 'es' para español general, 'es-ES' para España, 'x-default' para predeterminado

Código Generado

HTML Head Method

HTML

Consejos de Implementación

  • Incluye siempre la etiqueta x-default para manejar usuarios con preferencias de idioma que no coinciden con ninguna de tus versiones
  • Asegúrate de que cada versión de idioma incluya enlaces a todas las otras versiones de idioma, incluida ella misma
  • Usa URLs absolutas (comenzando con http:// o https://) en todas las etiquetas hreflang
  • Prueba tu implementación con las herramientas mencionadas en la sección de pruebas
  • Recuerda que hreflang es una sugerencia, no una directiva - los motores de búsqueda pueden mostrar una versión diferente si creen que es más relevante
  • Para consistencia, usa el mismo método (cabecera HTML, cabeceras HTTP o sitemap XML) en todo tu sitio

Recursos Adicionales

Documentación Oficial de Google sobre HreflangGuía de Hreflang de Ahrefs
Código

Métodos de Implementación

Diferentes formas de implementar hreflang, cada una con sus propias ventajas

Métodos

Etiquetas HTML en Head

★★★★★
Mejor opción para la mayoría de sitios web

Añadir etiquetas hreflang directamente en la sección <head> de cada página

Control directo sobre las etiquetas en cada página

Fácil de implementar para sitios pequeños

Funciona con todos los motores de búsqueda

Ejemplos de Código

Implementación HTML Básica

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" />

Ejemplo del Mundo Real

Aquí hay un ejemplo de cómo se ve la implementación de hreflang en un sitio web real:

Booking.com (implementación en HTML head)

El sitio web Booking.com usa etiquetas hreflang en el head para cada idioma/región

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>

Nota: Este es un ejemplo simplificado basado en implementaciones reales. Las implementaciones reales pueden variar.

Consejos Profesionales

Incluir etiquetas auto-referenciadas

Usar URLs absolutas

Verificar enlaces bidireccionales

Recursos Externos

Google Search Central

Documentación oficial sobre versiones localizadas

Guía de Moz sobre Hreflang

Guía completa sobre implementación de hreflang

Especificidades del Mercado Español

Consideraciones importantes al dirigirse a mercados de habla hispana

Variaciones Regionales

El español varía significativamente entre España (es-ES) y América Latina. Considera usar es-ES para España y es-MX o es-419 para mercados latinoamericanos.

Comportamiento de Búsqueda Local

Los usuarios hispanohablantes a menudo buscan de manera diferente que los angloparlantes. Las palabras clave pueden no ser traducciones directas, y la intención de búsqueda puede variar por región.

Estrategia de Dominio

Considera usar ccTLDs (.es para España) o subdirectorios con geolocalización adecuada para mejor visibilidad local.

Localización de Contenido

Más allá de la traducción, adapta el contenido para relevancia cultural, ejemplos locales, moneda y unidades de medida.

Guía Práctica

Implementación en CMS

Cómo implementar hreflang en sistemas de gestión de contenido populares

WordPress

WordPress

CMS popular con fuerte soporte multilingüe a través de plugins

1

Instalar y activar WPML

2

Configurar idiomas y estructura de URL

3

WPML añade automáticamente etiquetas hreflang

Plugin Recomendado:

WPML (WordPress Multilingual Plugin)
Shopify

Shopify

Plataforma de comercio electrónico con características multilingües integradas

1

Habilitar múltiples idiomas en el administrador de Shopify

2

Configurar URLs específicas por idioma

3

Usar aplicaciones para control avanzado de hreflang

Plugin Recomendado:

Langify o Weglot
Drupal

Drupal

CMS potente con capacidades multilingües integradas

1

Habilitar módulos de Idioma y Traducción de Contenido

2

Configurar detección y selección de idioma

3

Usar módulo Metatag para hreflang

Plugin Recomendado:

Módulos Multilingües del Core
WooCommerce

WooCommerce

Plugin de comercio electrónico para WordPress con capacidades multilingües

1

Instala y activa WPML o Polylang con sus respectivos complementos para WooCommerce

2

Configura idiomas y ajustes de traducción

3

Traduce productos, categorías y páginas de pago

4

Verifica que las etiquetas hreflang estén correctamente implementadas en las páginas de productos

5

Configura moneda y pasarelas de pago para diferentes regiones si es necesario

Plugin Recomendado:

WPML con WooCommerce Multilingual
Magento

Magento

Plataforma de comercio electrónico empresarial con soporte multilingüe integrado

1

Configura vistas de tienda para cada combinación de idioma/localización en tu administrador de Magento

2

Configura la localización e idioma para cada vista de tienda

3

Traduce tu contenido, productos e información de tienda

4

Habilita y configura el generador de etiquetas hreflang incorporado

5

Verifica la implementación a través de ver-código-fuente o herramientas de desarrollo del navegador

Plugin Recomendado:

Vistas de Tienda Integradas
Webflow

Webflow

Plataforma de diseño web visual con capacidades de código personalizado

1

Crea páginas o carpetas separadas para cada versión de idioma

2

Agrega un fragmento de código personalizado en la sección head de cada página

3

Asegúrate de que cada versión de idioma tenga enlaces a todas las otras versiones de idioma

4

Usa URLs absolutas para todas las referencias hreflang

5

Prueba la implementación usando herramientas de desarrollador del navegador

Plugin Recomendado:

Weglot o código personalizado
Frameworks Personalizados

Frameworks Personalizados

CMS headless o soluciones personalizadas

1

Identifica la estructura de idioma y regional de tu sitio

2

Crea lógica de detección de idioma y enrutamiento de URL

3

Implementa selectores de idioma y redirecciones adecuadas

4

Agrega etiquetas hreflang a todas las plantillas de página usando tu método preferido

5

Crea pruebas automatizadas para asegurar que se mantengan los enlaces bidireccionales

Plugin Recomendado:

Implementación personalizada
Verificación

Pruebas y Validación

Herramientas y técnicas para validar tu implementación de hreflang

Google Search Console

Herramienta oficial de Google para monitorear la implementación de hreflang e identificar problemas.

El informe de Orientación Internacional muestra errores de hreflang

Verificación de orientación por idioma y país

Cobertura de rastreo para diferentes versiones de idioma

Retroalimentación directa del rastreador de Google

Visitar Herramienta

Herramienta de Prueba de Etiquetas Hreflang

Herramienta dedicada para validar la implementación de hreflang en todo tu sitio web.

Valida enlaces bidireccionales

Verifica códigos de idioma correctos

Identifica etiquetas de retorno faltantes

Prueba desde múltiples ubicaciones

Visitar Herramienta

Screaming Frog SEO Spider

Rastreador SEO integral que incluye funciones de validación de hreflang.

Rastrea todo el sitio en busca de etiquetas hreflang

Exporta datos de hreflang para análisis

Identifica errores de implementación

Valida contra sitemaps XML

Visitar Herramienta

Sitebulb

Herramienta de auditoría visual de sitios web con potentes capacidades de análisis de hreflang.

Mapeo visual de hreflang

Identifica versiones de idioma huérfanas

Informes detallados de implementación

Integración con Google Analytics

Visitar Herramienta

ContentKing

Plataforma de monitoreo SEO en tiempo real que rastrea cambios de hreflang.

Monitoreo de hreflang en tiempo real

Alertas para problemas de implementación

Seguimiento histórico de cambios

Acceso API para automatización

Visitar Herramienta

Chrome Developer Tools

Herramientas integradas del navegador para verificación rápida de hreflang.

Ver código fuente para inspección manual

Pestaña de red para verificar encabezados HTTP

Consola para depuración de JavaScript

Gratis y siempre disponible

Visitar Herramienta

Qué Buscar al Probar

Verificaciones Técnicas

  • Todas las etiquetas tienen URLs absolutas completas
  • Códigos de idioma válidos (es-ES, en-US, etc.)
  • Todas las páginas incluyen etiquetas de auto-referencia
  • Sitemap XML utiliza sintaxis xhtml:link correcta

Verificaciones de Estructura

  • Enlaces bidireccionales completos entre todas las versiones
  • Etiqueta x-default configurada correctamente
  • Consistencia entre etiquetas canónicas y hreflang
  • No hay redirecciones que interfieran con hreflang