El Atributo HREFLANG

El atributo hreflang es clave para sitios web multilingües o regionales, ya que indica a los motores de búsqueda el idioma y la región a la que está dirigida una página.

El atributo hreflang es clave para sitios web multilingües o regionales, ya que indica a los motores de búsqueda el idioma y la región a la que está dirigida una página. Esto mejora el SEO y garantiza que los usuarios encuentren la versión correcta de tu contenido según su ubicación o idioma. Aquí un tutorial completo:

¿Qué es `hreflang`?

Propósito: Especifica el idioma (y opcionalmente la región) de una página web alternativa.

Usos principales:

Sitios con contenido en múltiples idiomas (ej: español, inglés, francés).
Contenido adaptado a regiones específicas (ej: español para España vs. México).
Evitar contenido duplicado en los resultados de búsqueda.

Sintaxis Básica

El atributo hreflang se usa dentro de la etiqueta <link> en el <head> del documento:

<link 
  rel="alternate" 
  hreflang="código-de-idioma" 
  href="URL-de-la-versión"
>

Ejemplo:

<!-- Versión en español para España -->
<link rel="alternate" hreflang="es-ES" href="https://ejemplo.com/es/">

<!-- Versión en inglés para EE.UU. -->
<link rel="alternate" hreflang="en-US" href="https://ejemplo.com/en/">

Códigos de Idioma y Región

Formato:

idioma-REGION (basado en estándares ISO).

Idioma: Código de 2 letras (ISO 639-1), como es (español) o en (inglés).
Región (opcional): Código de 2 letras (ISO 3166-1), como ES (España) o MX (México).

Ejemplos de códigos:

Código	Descripción
`es`	Español (genérico).
`es-MX`	Español de México.
`en-GB`	Inglés británico.
`fr-CA`	Francés canadiense.

Casos de Uso Prácticos

Ejemplo 1: Sitio multilingüe

Supongamos que tienes tres versiones de una página:

Español genérico: https://ejemplo.com/es/
Español para Argentina: https://ejemplo.com/es-ar/
Inglés genérico: https://ejemplo.com/en/

En cada página, añade:

<head>
  <!-- Español genérico -->
  <link rel="alternate" hreflang="es" href="https://ejemplo.com/es/">
  <!-- Español para Argentina -->
  <link rel="alternate" hreflang="es-AR" href="https://ejemplo.com/es-ar/">
  <!-- Inglés genérico -->
  <link rel="alternate" hreflang="en" href="https://ejemplo.com/en/">
  <!-- Versión por defecto (para usuarios sin coincidencia) -->
  <link rel="alternate" hreflang="x-default" href="https://ejemplo.com/">
</head>

Ejemplo 2: Contenido regional

Si vendes productos en EE.UU. y Canadá en inglés:

<!-- Versión para EE.UU. -->
<link rel="alternate" hreflang="en-US" href="https://ejemplo.com/en-us/">
<!-- Versión para Canadá -->
<link rel="alternate" hreflang="en-CA" href="https://ejemplo.com/en-ca/">

Reglas Clave

Reciprocidad: Cada página debe enlazar a todas las demás versiones, incluyéndose a sí misma.
Consistencia: Las URLs deben ser accesibles y retornar código 200 (no errores 404).
Canonicalización: Combina hreflang con rel="canonical" para evitar contenido duplicado.

Implementación en HTTP Headers o Sitemaps

Si no puedes usar HTML, hreflang también puede definirse en:

Encabezados HTTP (para archivos no HTML, como PDFs):

Link: <https://ejemplo.com/es/>; rel="alternate"; hreflang="es"

Sitemaps XML:

<url>
  <loc>https://ejemplo.com/es/</loc>
  <xhtml:link rel="alternate" hreflang="es" href="https://ejemplo.com/es/"/>
  <xhtml:link rel="alternate" hreflang="en" href="https://ejemplo.com/en/"/>
</url>

Errores Comunes

Error 1: Códigos inválidos

<!-- Incorrecto: "sp" no es un código ISO 639-1 válido -->
<link rel="alternate" hreflang="sp" href="...">

Error 2: Falta de reciprocidad

Si la página en español enlaza a la inglesa, la inglesa también debe enlazar a la española.

Error 3: Olvidar la región cuando es relevante

<!-- Incorrecto: No diferencia entre español de España y México -->
<link rel="alternate" hreflang="es" href="https://ejemplo.com/es/">

Validación

Usa herramientas como:

Google Search Console: Reporta errores de hreflang.
Hreflang Checker de SEMrush: Analiza implementaciones.
Screaming Frog: Verifica enlaces en crawls de sitios.

Conclusión

El atributo hreflang es esencial para sitios globales, asegurando que los usuarios encuentren la versión adecuada de tu contenido. Al implementarlo correctamente, mejoras la experiencia del usuario y el posicionamiento SEO. ¡Clave para una estrategia web internacional!

¿Qué es hreflang?