Etiqueta hreflang para SEO Internacional

Tiempo de lectura estimado: 4 minutos

Si quieres preparar tu web para que esté visible en varios idiomas vas a tener que tener presente varios factores en tu estrategia SEO internacional:

  • Palabras clave adecuadas al público objetivo a quien te dirijes. No se puede traducir tal cual el contenido porque las necesidades y preferencias de la audiencia objetivo pueden ser diferentes según el país, la cultura o el comportamiento de búsqueda. Ello implica realizar un análisis de palabras clave para esa región o idioma, pero da para un post diferente al que nos ocupa.
  • Elegir un dominio y una estructura de URLs adecuada. Se puede escoger un dominio de nivel superior de código de país (ccTLD o country code Top Level Domain) como .fr para francia, .co.uk para Reino Unido o el .es para España. Otra opción, no menos interesante, es la de escoger un TLD genérico, como el .com. Pero nuevamente, esto daría para otro post.
  • Crear un contenido relevante para la audiencia, considerando las necesidades que podemos cubrir con nuestro sitio web a esos usuarios que visitan la página desde regiones con costumbres culturales diferentes.
  • Construir enlaces desde sitios web locales puede ser de gran ayuda en la estrategia SEO internacional (correcto, daría para otro post).
  • Indicar a los motores de búsqueda las diferentes versiones de idioma o región a la que queremos dirigir cada página para que muestren la versión correcta a cada usuario es una práctica necesaria para mejorar la experiencia de usuario.

¿Qué es la etiqueta hreflang?

La etiqueta hreflang permite a los webmasters indicar a Google y otros motores de búsqueda que existen versiones de una página en varios idiomas o dirigidas a diferentes regiones geográficas. Esto ayuda a los motores de búsqueda a mostrar la versión correcta del contenido a los usuarios en función de su idioma y ubicación, mejorando así la experiencia del usuario.

Debe especificarse el idioma del contenido utilizando un código estándar de idioma (ISO 639-1) y, opcionalmente, puede añadirse un código de estándar país ISO 3166-1 alpha 2 para dirigirse a una región específica. Por ejemplo:

  • El código ISO 639-1 para Español es «es».
  • El código ISO 3166-1 Alpha-2 para España es «ES».

Si queremos definir una URL específicamente para el español de España en una meta etiqueta hreflang, usaríamos el código ISO 639-1 para español («es») combinado con el código ISO 3166-1 Alpha-2 para España («ES»). La etiqueta para la URL https://midominio.com/es/ definida para el idioma español en la región geográfica de España quedaría:

<link rel="alternate" href="https://midominio.com/es/" hreflang="es-ES" />

¿Cómo usar hreflang?

Para utilizar la etiqueta hreflang, debe incluirse en el encabezado de páginas HTML (entre las etiquetas <head></head>) o en el archivo sitemap.xml.

En su implementación más básica, cada etiqueta señalará una versión de idioma o región específica de esa página.

<link rel="alternate" href="https://midominio.com" hreflang="es" />
<link rel="alternate" href="https://midominio.com/en/" hreflang="en" />

Este código indica que hay dos versiones de la página: una en español (es) y otra en inglés (en).

Como hemos indicado, se puede indicar versiones específicas de un idioma para diferentes regiones utilizando tanto el código de idioma ISO 639-1 como el código de país ISO 3166-1 Alpha-2. Esto es útil para contenidos que están geográficamente localizados, como el inglés para EE. UU. (en-US) y el inglés para el Reino Unido (en-GB).

<link rel="alternate" href="https://midominio.com/en-gb/" hreflang="en-GB" />
<link rel="alternate" href="https://midominio.com/en-us/" hreflang="en-US" />

Por último, es muy importante definir la etiqueta x-default para indicar una página que se sirva por defecto a usuarios cuya localización no coincida con ninguna de las disponibles.

Ejemplo de uso de la etiqueta hreflang

Vamos a ver un ejemplo sencillo de cómo implementar la etiqueta hreflang para el sitio web https://midominio.com/ en español, donde se ha creado una versión en inglés bajo la URL https://midominio.com/en/ y otra en francés bajo la URL https://midominio.com/fr/, la versión por defecto es la de inglés.

La etiqueta hreflang debe estar presente en todas las páginas de todos los idiomas para definirla correctamente. Quedaría:

<!-- Para la página en inglés (versión predeterminada) -->
<link rel="alternate" href="https://midominio.com/en/" hreflang="en" />
<link rel="alternate" href="https://midominio.com/fr/" hreflang="fr" />
<link rel="alternate" href="https://midominio.com/" hreflang="es" />
<link rel="alternate" href="https://midominio.com/en/" hreflang="x-default" />

<!-- Para la página en francés -->
<link rel="alternate" href="https://midominio.com/en/" hreflang="en" />
<link rel="alternate" href="https://midominio.com/fr/" hreflang="fr" />
<link rel="alternate" href="https://midominio.com/" hreflang="es" />
<link rel="alternate" href="https://midominio.com/en/" hreflang="x-default" />

<!-- Para la página en español -->
<link rel="alternate" href="https://midominio.com/en/" hreflang="en" />
<link rel="alternate" href="https://midominio.com/fr/" hreflang="fr" />
<link rel="alternate" href="https://midominio.com/" hreflang="es" />
<link rel="alternate" href="https://midominio.com/en/" hreflang="x-default" />

¿Cómo usar hreflang en sitemap.xml?

Como hemos indicado, se puede implementar las versiones de varios idiomas mediante hreflang a través del fichero sitemap.xml, una opción interesante en sitios grandes. A continuación muestro un ejemplo de cómo se vería en un sitemap:

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

¿Es compatible hreflang con canonical?

Las etiquetas hreflang y canonical son compatibles y deberían ser utilizadas conjuntamente en situaciones apropiadas para optimizar el SEO de sitios multilingües o internacionales y evitar problemas de contenido duplicado.

La etiqueta hreflang se utiliza para indicar a los motores de búsqueda que hay versiones de contenido específicas para diferentes idiomas o regiones geográficas. La etiqueta canonical se utiliza para señalar la versión preferida de un conjunto de páginas con contenido idéntico o muy similar.

Aquí va un ejemplo de uso de ambas etiquetas combinadas:

<link rel="alternate" href="https://midominio.com/en/" hreflang="en" />
<link rel="alternate" href="https://midominio.com/fr/" hreflang="fr" />
<link rel="alternate" href="https://midominio.com/" hreflang="es" />
<link rel="alternate" href="https://midominio.com/en/" hreflang="x-default" /><link rel="canonial" href="https://midominio.com/" />

En este caso, las etiquetas hreflang ayudan a Google a entender que hay tres versiones lingüísticas de la página, y la etiqueta canonical señala que, de las páginas que podrían ser interpretadas como duplicadas dentro de la versión en español, esta es la versión preferida.