Las etiquetas hreflang son fundamentales para la internacionalización de sitios web, ya que ayudan a los motores de búsqueda a identificar el idioma y la región adecuados para mostrar a los usuarios. Y, siendo sinceros, suelen ser un auténtico quebradero de cabeza porque su implementación parece sencilla, pero suelen ocasionar bastantes problemas que conviene conocer para atajarlos cuanto antes.
A continuación, te explicamos cómo y cuándo usar las etiquetas hreflang, los errores más usuales y herramientas útiles para implementarlas correctamente. ¡Vamos!
Índice
¿Qué es el hreflang?
La etiqueta hreflang es un atributo utilizado en los elementos <link> y <a> en HTML para indicar el idioma y, opcionalmente, la región geográfica a la que está dirigida una página web específica.
Es comúnmente utilizada en sitios multilingües o internacionales para ayudar a los motores de búsqueda a mostrar la versión más relevante de una página para los usuarios según su idioma o región.
SEO y hreflang: ¿Cuándo usar las etiquetas?
Como ya dijimos al principio, si se trata de un proyecto de ámbito internacional, entonces tendrás que lidiar con ellas. Google ha previsto varios casos donde el uso de hreflang está recomendado:
1. Contenido en varios idiomas
Si tu sitio tiene versiones en diferentes idiomas, como español e inglés, usa hreflang para señalar estas variaciones.
2. Diferencias regionales
Si ofreces contenido adaptado por zonas geográficas, como español para México (es-MX) y España (es-ES), es también importante definir las variantes regionales.
3. Mismo contenido para diferentes audiencias
Las etiquetas hreflang indican a los motores de búsqueda qué versión mostrar, evitando penalizaciones por contenido duplicado.
✍ Te puede interesar→ Qué es el SEO internacional y cómo puede ayudarte a impulsar tu negocio.
Cómo implementar las etiquetas hreflang
Echa primero un vistazo a su sintaxis porque aquí suceden a veces los primeros errores:
<link rel=”alternate” href=”https://www.ejemplo.com/es/prueba/” hreflang=”es-ES” />
<link rel=”alternate” href=”https://www.ejemplo.com/en/test/” hreflang=”en-GB” />
El hreflang es un rel=”alternate”, lo que significa que siempre indica una URL alternativa a aquella en la que se implementa la misma anotación alternativa.
El elemento href indica la URL alternativa específica. El elemento hreflang indica el idioma y, cuando es necesario también, la región. Ambos códigos están estandarizados y, por tanto, deben usarse con la sintaxis correcta: para marcar el idioma de destino debemos utilizar los códigos de idioma ISO 639-1 y, para la región, los códigos de país ISO 3166-1 Alpha 2.
Es decir, si la versión en inglés está dirigida a cualquier persona que hable ese idioma, no sería necesario más que incluir ‘en’ pero si además el principal público está en Reino Unido habría que añadir ‘en-GB’. Asegúrate de incluirlo correctamente.
Ahora sí, vamos con ejemplos prácticos de cómo colocar estas etiquetas correctamente.
1. Hreflang en el encabezado HTML
Inserta una etiqueta `<link>` en la sección `<head>` de cada página. Ejemplo:
<link rel=”alternate” hreflang=”es-ES” href=”https://www.ejemplo.com/es/”>
<link rel=”alternate” hreflang=”en-US” href=”https://www.ejemplo.com/en/”>
2. Hreflang en el sitemap XML
Incluye las referencias hreflang directamente en tu sitemap. Ejemplo:
<url>
<loc>https://www.tusitio.com/es/</loc>
<xhtml:link rel=”alternate” hreflang=”es-ES” href=”https://www.ejemplo.com/es/”/>
<xhtml:link rel=”alternate” hreflang=”en-US” href=”https://www.ejemplo.com/en/”/>
</url>
3. Hreflang en los encabezados HTTP
Si no puedes modificar el HTML, usa los encabezados HTTP para declarar hreflang. Esto es común en archivos o recursos descargables. Ejemplo:
Link: <https://www.ejemplo.com/es/>; rel=”alternate”; hreflang=”es”,
<https://www.ejemplo.com/en-us/>; rel=”alternate”; hreflang=”en-US”
Un paso más: el x-default
El valor `x-default` en las etiquetas hreflang se utiliza para indicar una versión de una página que no está específicamente orientada a un idioma o región, pero que puede servir como una opción predeterminada para usuarios cuyo idioma o región no esté cubierto por las etiquetas hreflang específicas.
Es especialmente útil para:
- Páginas de selección de idioma donde el usuario puede elegir manualmente su idioma o región.
- Contenido global: cuando el contenido es neutral y no está específicamente dirigido a ningún idioma o región.
El uso de `x-default` evita confusiones a los motores de búsqueda y garantiza que la página correcta se muestre a usuarios que no se ajustan a los idiomas o regiones especificados. También mejora la experiencia del usuario al redirigirlo a una página que le permita elegir su preferencia.
Ejemplo de Uso del x-default
Supongamos que tienes un sitio web con versiones para francés e inglés, pero recibes tráfico de países con lenguas diferentes. Para esos usuarios, la página más acertada sería la inglesa, ya que será más fácil que sepan inglés que francés. Esa página inicial sería designada con `x-default`.
<head>
<link rel=”alternate” hreflang=”fr” href=”https://www.ejemplo.com/fr/”>
<link rel=”alternate” hreflang=”en” href=”https://www.ejemplo.com/en/”>
<link rel=”alternate” hreflang=”x-default” href=”https://www.ejemplo.com/en/”>
</head>
Errores comunes y cómo evitarlos
Aquí está todo resumido. Coge aire y revisa si alguno de ellos es tu caso:
1. Incluir etiquetas hreflang en URLs no indexables
Ojo: las etiquetas hreflang se implementan en URLS indexables y con código de estado 200. Es decir, no incluyas URLs bloqueadas por robots.txt ni con redirecciones (3XX) u otro código de estado diferente al 200. Si sigues esta directriz, habrás esquivado buena parte de los problemas.
– ❌ Error. Hreflang en URLs que no lo deben llevar (bloqueadas por robots, redirigidas, etc.).
– ✔️ Solución. Verifica que las páginas con hreflang estén accesibles para los motores de búsqueda.
2. No coincidir URLs canónicas con hreflang
En la línea con lo anterior, solo tiene sentido que la etiqueta se use en las URLs consideradas principales, no una URL con parámetros, por ejemplo.
– ❌ Error. Tener una URL declarada como canónica diferente a la indicada en hreflang.
– ✔️ Solución. La URL de hreflang debe coincidir con la canónica. Importante: también deben ser canónicas las URLs incluidas en el setlist de etiquetas por idioma / región.
3. Falta de reciprocidad
Esto es un poco más específico de este tipo de etiquetas, pero es fácil de entender. Si defines que la página A apunta a la página B, asegúrate de que la página B también apunte a la página A.
– ❌ Error. Página A tiene hreflang para B, pero B no lo tiene para A.
– ✔️ Solución. Asegúrate de una relación bidireccional.
4. Uso incorrecto de códigos de idioma/país:
Respetar la sintaxis es importante. Es un error tan fácil de subsanar como consultar los códigos oficialmente válidos pero aun así es bastante común encontrar fallos.
– ❌ Error. Usar un código inválido, como es_MX (debe ser es-MX).
– ✔️ Solución. Sigue el estándar ISO 639-1 para idiomas y ISO 3166-1 alpha-2 para países.
5. Uso en URLs que no lo deben llevar
Lo sentimos, pero nada de trabajar en bloque. El etiquetado hreflang correcto exige revisar una a una. Si una parte de la web, pongamos un directorio en italiano, no tiene equivalente a otro apartado de la web, no incluyas el set de etiquetas (ni tan siquiera a la home).
– ❌ Error. Usar etiquetado hreflang en partes de la web sin equivalencia.
– ✔️ Solución. Usar únicamente en aquellos apartados que se necesite porque haya una serie de URLs equivalentes para otro país o región.
6. No incluir el hreflang de la propia URL de referencia
Siempre se debe implementar las anotaciones hreflang de autorreferencia y no solo las que apuntan al idioma y país alternativo o URLs de solo idioma.
– ❌ Error. Excluir la URL de referencia del setlist de etiquetas hreflang.
– ✔️ Solución. Verificar que la propia URL está en el listado de etiquetas.
Herramientas útiles para gestionar hreflang
Estas son algunas de las herramientas más habituales y utilizadas en SEO para identificar si todo está correcto.
Verifica errores de Hreflang en la sección de Cobertura o Internacionalización.
➡️ Accede aquí para conocer más sobre esta herramienta→ Google Search Console: guía y tutorial de la herramienta para SEO.
Audita etiquetas hreflang en masa para detectar problemas como enlaces rotos o reciprocidad faltante.
Descubre la mejor guía sobre esta herramienta→ Cómo usar Screaming Frog: guía de configuración y optimización SEO para webs.
Generador de etiquetas hreflang de Aleyda Solís
La consultora SEO proporciona una herramienta gratuita genial para crear el setlist de etiquetas sin errores.
Comprueba de forma rápida si tus etiquetas hreflang están configuradas correctamente.
Ahrefs / SEMrush:
Monitorea el rendimiento de tus páginas internacionales y verifica problemas de implementación desde el apartado de Site Audit de cualquiera de las herramientas profesionales.
Implementar etiquetas hreflang correctamente es crucial para mejorar la experiencia de los usuarios y evitar problemas de SEO. Dedica tiempo a la configuración adecuada, valida tu trabajo con herramientas y corrige los errores comunes para maximizar la eficacia de tu estrategia.
El esfuerzo vale la pena! Y si necesitas ayuda, en agenciaSEO.eu contamos con el conocimiento y la experiencia para ayudarte a que tus proyectos multilingües o multirregionales funcionen. ¡Contacta con nosotros!🚀
