Skip to content

Descubre qué es la etiqueta Hreflang y cómo afecta al SEO internacional

Alejandro Frades
Descubre qué es la etiqueta Hreflang y cómo afecta al SEO internacional

¿Qué es la etiqueta hreflang?

La etiqueta hreflang es un atributo HTML que se utiliza para especificar el idioma y la región de una página web. Esta etiqueta es fundamental para los sitios web multilingües, ya que permite a los motores de búsqueda entender qué versión de una página deben mostrar a los usuarios según su idioma y ubicación geográfica. Al implementar correctamente hreflang, se puede mejorar significativamente la experiencia del usuario y el posicionamiento SEO internacional de un sitio web.

¿Cuál es su función principal?

La función principal de la etiqueta hreflang es indicar a los motores de búsqueda qué versiones de una página web están disponibles para diferentes idiomas y regiones. Esto ayuda a:

  • Mostrar la versión correcta de una página a los usuarios: Los motores de búsqueda pueden presentar la versión más relevante de una página según el idioma y la región del usuario.
  • Evitar contenido duplicado: Al diferenciar claramente entre las versiones de una página, se evita que el contenido duplicado afecte negativamente el SEO.
  • Mejorar la experiencia del usuario: Los usuarios son dirigidos automáticamente a la versión de la página en su idioma preferido, mejorando así su experiencia en el sitio.

Explicación detallada de la composición del hreflang:

Ejemplo de etiqueta hreflang:

<link rel=«alternate» hreflang=«es-ES» href=«https://www.example.com/es/» />

Desglose de la etiqueta hreflang:

  1. Etiqueta <link>:
    • Esta etiqueta HTML se usa para definir la relación entre el documento actual y un recurso externo.
  2. Atributo rel="alternate":
    • Indica que la URL especificada en el atributo href es una versión alternativa de la página actual.
  3. Atributo hreflang="es-ES":
    • hreflang: Especifica el idioma y, opcionalmente, la región de la URL alternativa.
    • es-ES: Es un código de idioma y región que sigue el formato ISO. En este caso:
      • es: Código ISO 639-1 para el idioma español.
      • ES: Código ISO 3166-1 Alpha 2 para la región España.
  4. Atributo href="https://www.example.com/es/":
    • Especifica la URL de la versión alternativa de la página.
    • https://: Indica el protocolo utilizado (en este caso, HTTPS).
    • www.example.com: Es el dominio del sitio web.
    • /es/: Es el subdirectorio o la ruta que indica la versión en español de España del contenido.

¿Cómo la puedo implementar en mi web?

Cuando trabajamos en WordPress, la mayoría de los plugins de idiomas ya implementan el hreflang de forma correcta. De todas formas, es importante saber cómo lo implementan para poder detectar y corregir cualquier posible error.

En caso de que lo quieras implementar de forma manual :

En el HTML

Se puede añadir la etiqueta hreflang directamente en el HTML de cada página. Esto se hace mediante la inclusión de enlaces en la sección <head> del HTML. Por ejemplo:

<link rel=»alternate» href=»https://www.example.com/es/» hreflang=»es» />
<link rel=»alternate» href=»https://www.example.com/en/» hreflang=»en» />

En el encabezado HTTP

Otra opción es incluir la etiqueta hreflang en los encabezados HTTP de las respuestas del servidor. Este método es útil para contenido dinámico o para sitios donde no es práctico editar el HTML de cada página.

Link: <https://www.example.com/es/>; rel=»alternate»; hreflang=»es»
Link: <https://www.example.com/en/>; rel=»alternate»; hreflang=»en»

En el sitemap XML

Incluir hreflang en el sitemap XML es una opción eficiente para sitios grandes con muchas páginas. Esto permite gestionar todas las versiones de las páginas en un solo archivo. Un ejemplo de entrada en un sitemap XML sería:

<url> <loc>https://www.example.com/es/</loc>

<xhtml:link rel=«alternate» hreflang=«es» href=«https://www.example.com/es/» />

<xhtml:link rel=«alternate» hreflang=«en» href=«https://www.example.com/en/» />

</url>

* Recuerda que los enlaces tienen que ser bidireccionales, es decir, si apuntas una url con el hreflang, esa url tendrá que tener un hreflang de vuelta.

El valor x-default

El valor x-default es una opción especial en la etiqueta hreflang que se utiliza para indicar la versión predeterminada de una página web. Esta versión se muestra a los usuarios cuyo idioma o región no están específicamente cubiertos por otras etiquetas hreflang. Es especialmente útil para dirigir el tráfico a una versión genérica de la página cuando no se puede determinar un idioma o región específicos.

Ejemplo práctico de implementación de x-default

Supongamos que tienes un sitio web con versiones en inglés para el Reino Unido y en español para España. También tienes una versión general de la página para todos los demás usuarios. La configuración hreflang se vería así:

<link rel=«alternate» hreflang=«en-GB» href=«https://www.example.com/en-gb/» />

<link rel=«alternate» hreflang=«es-ES» href=«https://www.example.com/es-es/» />

<link rel=«alternate» hreflang=«x-default» href=«https://www.example.com/» />

En este ejemplo:

  • Los usuarios en el Reino Unido verán la versión en inglés (en-GB).
  • Los usuarios en España verán la versión en español (es-ES).
  • Los usuarios de cualquier otra región verán la versión predeterminada (x-default).

Plugins para implementar hreflang

Existen varios plugins que facilitan la implementación de hreflang, especialmente para los usuarios de WordPress. Algunos de los plugins más populares son:

  • Polylang: Permite crear un sitio web multilingüe y gestionar las etiquetas hreflang de manera sencilla.
  • WPML (WordPress Multilingual Plugin): Otro plugin muy popular que ofrece soporte completo para hreflang y muchas otras características para sitios multilingües.
  • Yoast SEO: Este plugin de SEO incluye una funcionalidad para gestionar las etiquetas hreflang de manera eficiente.

Estos plugins simplifican el proceso de implementación al automatizar la mayoría de las tareas y proporcionar interfaces de usuario amigables.

¿Cuándo es necesario implementar el hreflang?

La implementación de hreflang es necesaria en los siguientes casos:

  • Sitios multilingües: Si tu sitio web tiene contenido en varios idiomas, es crucial implementar hreflang para asegurar que los motores de búsqueda muestren la versión correcta a los usuarios.
  • Sitios con variaciones regionales: Si tienes versiones de tu sitio específicas para diferentes regiones (por ejemplo, inglés para EE.UU. y Reino Unido), hreflang ayuda a direccionar a los usuarios a la versión correcta.
  • E-commerce internacional: Las tiendas en línea que operan en múltiples mercados se benefician enormemente de hreflang para mostrar productos y precios relevantes para cada región.
  • Contenido duplicado en diferentes idiomas: Si tienes contenido similar en varios idiomas, hreflang es esencial para evitar problemas de duplicidad y mejorar tu SEO.

Validando que los hreflang estan correctamente añadidos

Hay herramientas en línea específicas para validar hreflang. Estas herramientas permiten ingresar una URL y verificar si las etiquetas hreflang están implementadas correctamente. Algunas opciones son:

  • Hreflang.org: Una herramienta simple y gratuita para validar tus etiquetas hreflang.
  • Merkle’s Hreflang Tag Testing Tool: Esta herramienta permite analizar páginas individuales o un conjunto de URLs para verificar hreflang.

Errores habituales

Faltan enlaces recíprocos

Si en una página X se incluye un enlace a una página Y, en esta página Y tiene que haber un enlace a la página X. Si no se cumple esta condición en todas las páginas que usan anotaciones hreflang, es posible que estas anotaciones se ignoren o no se interpreten correctamente. Por ejemplo, si en https://de.example.com/index.html se incluye este enlace:

<link rel=»alternate» hreflang=»en-gb» href=»https://en-gb.example.com/index.html» />

También se debe incluir un enlace hreflang en https://en-gb.example.com/index.html que devuelva a la versión en alemán del contenido:

<link rel=»alternate» hreflang=»de» href=»https://de.example.com/index.html» />

Códigos de idioma incorrectos

Asegúrate de que los códigos de idioma que usas identifiquen el idioma en formato ISO 639-1 y, opcionalmente, la región en formato ISO 3166-1 Alpha 2 de las URLs alternativas. No se puede especificar únicamente la región.

Conclusiones

La etiqueta hreflang es vital para mejorar el SEO de sitios web multilingües al indicar el idioma y la región de cada página a los motores de búsqueda. Esto asegura que los usuarios vean la versión correcta de la página según su ubicación y preferencias lingüísticas. Su correcta implementación, ya sea en HTML, encabezados HTTP o sitemaps XML, evita la duplicidad de contenido y mejora la experiencia del usuario. Herramientas y plugins de WordPress pueden facilitar esta tarea, garantizando que tu sitio esté optimizado para una audiencia global.

Alejandro Frades marketing specialist Modular
Autor
Alejandro Frades
Marketing Specialist
La mente detrás de los contenidos sociales de Modular. Siempre al tanto de las últimas tendencias para aprovecharlas y hacer que el mundo digital sea más ameno y entretenido.

Suscríbete a nuestra Newsletter sobre el mundo web