¿De qué es este artículo?

El atributo rel=”alternate” hreflang=”x” se utiliza para comunicar a los motores de búsqueda el idioma de su contenido y la región geográfica para la que está destinado. Les ayuda a decidir qué versión mostrar a quién. Es particularmente útil si tiene el sitio web en varios idiomas. En este artículo explicamos cómo utilizar este atributo del tag <link>.

¿Qué es el atributo rel="alternate" hreflang="x”?

El atributo rel="alternate" hreflang="x” se utiliza para indicar el idioma del contenido y la región para la que el contenido está destinado.

A menudo, el atributo rel="alternate" hreflang="x” se denomina etiqueta rel="alternate" hreflang="x” erróneamente. Por comodidad, en este artículo lo llamamos simplemente atributo hreflang.

Si tiene el sitio web disponible en varios idiomas, el atributo hreflang es la herramienta esencial para indicar a los motores de búsqueda qué idioma mostrar a sus visitantes. En este momento está respaldado por Google y Yandex.

¿Por qué el atributo hreflang debería interesarle?

Si tiene el sitio web disponible en múltiples versiones lingüísticas, cada visitante debería ver la versión correcta correspondiente al idioma en el que busca. Para ayudar a los motores de búsqueda a mostrar la versión correcta debería utilizar el atributo hreflang indicando así el idioma de contenido y eventualmente la región objetiva.

Imagínese esta situación: tiene el sitio web en dos idiomas, inglés y español. Ahora necesita que los motores de búsqueda muestren la versión correcta. Para este propósito utilizará el atributo hreflang con el valor en y es.

Tomemos otro ejemplo: tiene el sitio web en español pero en dos versiones diferentes para los usuarios españoles y mexicanos. Para aclarar a los motores de búsqueda qué versión mostrar, tiene que combinar las definiciones del idoma y de la región: es-es para la versión orientada a España y es-mx para la versión orientada a México.

La ventaja adicional de la utilización del atributo hreflang es la prevención de problemas con el contenido duplicado, sobre todo en caso de múltiples versiones en un mismo idioma como en el ejemplo de arriba (con el español de España y de México). El contenido puede ser muy similar, por lo que hay que distinguir claramente las dos versiones.

Las partes diferentes del atributo hreflang

Ahora analizaremos el atributo hreflang por partes. Un ejemplo:

<link rel="alternate" hreflang="es" href="https://www.ejemplo.es/" />

Vamos paso a paso:

  1. La parte link rel="alternate" dice que existe una relación entre esta página y alguna otra. En este artículo nos interesa el atributo hreflang, pero existen muchas otras relaciones como paginación, páginas AMP, o páginas optimizadas para móviles.
  2. La parte hreflang="es" determina el público objetivo indicando el idioma o la combinación del idoma y de la región.
  3. La parte href contiene la URL de la página mencionada en la previa parte.

¿Cómo implementar el atributo hreflang?

Hay 3 maneras de implementar el atributo hreflang:

  1. En la sección <head> de la página HTML
  2. En el encabezado HTTP
  3. En el archivo sitemap XML

Habitualmente lo más simple es incluir el atributo en la sección <head> de la página HTML.

Al utilizar el atributo hreflang no solamente determina el público objetivo del contenido pero también describe las versiones localizadas de la página. Imagínese que la página está disponible en español, inglés y francés, así la definición completa sería la siguiente y estaría presente en todas las variantes de la página:

El atributo hreflang indica las versiones traducidas de una página.
El atributo hreflang indica las versiones traducidas de una página.

<link rel="canonical" href="https://www.ejemplo.com/es/" /> <link rel="alternate" hreflang="es" href="https://www.ejemplo.com/es/" /> <link rel="alternate" hreflang="en-gb" href="https://www.ejemplo.com/uk/" /> <link rel="alternate" hreflang="fr" href="https://www.ejemplo.com/fr/" /> <link rel="alternate" hreflang="x-default" href="https://www.ejemplo.com/es/" />

También puede definir una página por si acaso no hay variante apropiada para su público. Se hace a través del valor x-default.

Mejores prácticas para utilizar el atributo hreflang

La mejor manera de mostrar cómo se utiliza el atributo hreflang es con el ejemplo - tenemos tres versiones diferentes de la página para los usuarios ecuatorianos, mexicanos y españoles.

El atributo hreflang completo será:

<link rel="alternate" hreflang="es-ec" href="https://www.ejemplo.es/ec/" /> <link rel="alternate" hreflang="es-mx" href="https://www.ejemplo.es/mx/" /> <link rel="alternate" hreflang="es-es" href="https://www.ejemplo.es/" /> <link rel="alternate" hreflang="x-default" href="https://www.ejemplo.es/" />

Haga referencia a la página misma y a sus versiones traducidas

El atributo hreflang tiene que determinar el idioma y la región del público objetivo de la página misma y de todas sus variantes.

Tomemos la página https://www.ejemplo.com/ del ejemplo de arriba - sus versiones traducidas son: https://www.ejemplo.com/ca/ y https://www.ejemplo.com/uk/.

Utilice las referencias bidireccionales del atributo hreflang

Todas las referencias del atributo hreflang tienen que ser bidireccionales. Esto significa que cada variante de la página hace referencia a todas las otras variantes.

Utilice correctamente los idomas y las combinaciones del idioma y de la región

El valor del atributo hreflang indica el idoma (en el formato ISO 639‑1) y eventualmente la región (en el formato ISO 3166-1 Alpha 2) objetiva de la URL.

Primero hay que definir el idioma y luego la región. El orden es importante. Al revés no funciona.

No es posible definir solamente la región sin definir el idioma primero. La siguiente definición NO ES válida:

<link rel="alternate" hreflang="mx" href="https://www.ejemplo.es/mx/" />

Siempre utilice hreflang=”x-default”

Nunca olvide definir la variante a mostrar en caso de que no haya variante apropiada para su público. Se hace a través de hreflang=”x-default”.

En el ejemplo de arriba vemos:

<link rel="alternate" hreflang="x-default" href="https://www.ejemplo.es/" />

Esto significa que a los usuarios de otros países que España, México y Ecuador, se les mostrará la versión https://www.ejemplo.es/.

El atributo hreflang y la URL canónica

El atributo hreflang no reemplaza la URL canónica. Hay que definir ambos. Por ejemplo:

<link rel="canonical" href="http://www.ejemplo.es/" /> <link rel="alternate" href="https://www.ejemplo.es/" hreflang="es-es" /> <link rel="alternate" href="https://www.ejemplo.es/ec/" hreflang="es-ec" />

En el ejemplo anterior vemos que la página ecuatoriana (https://www.ejemplo.es/ec/) es la versión alternativa de la página española (https://www.ejemplo.es/). La página ecuatoriana contendrá:

<link rel="canonical" href="http://www.ejemplo.es/ec/" /> <link rel="alternate" hreflang="es-ec" href="https://www.ejemplo.es/ec/" /> <link rel="alternate" hreflang="es-es" href="https://www.ejemplo.es/" />

Sin embargo, si la URL canónica no lleva a sí misma sino a otra página, el atributo hreflang tiene que hacer referencia a la página canónica. Por ejemplo, si https://www.ejemplo.es/pagina-de-acceso es la URL alternativa de https://www.ejemplo.es/, la página /pagina-de-acceso contendrá:

<link rel="canonical" href="http://www.ejemplo.es/" /> <link rel="alternate" hreflang="es-es" href="https://www.ejemplo.es/" /> <link rel="alternate" hreflang="es-ec" href="https://www.ejemplo.es/ec/" />

La página https://www.ejemplo.es/ec/ debe hacer referencia a <link rel="alternate" href="https://www.ejemplo.es/" hreflang="es-es" />.

Para resumirlo: la URL no canónica (/pagina-de-acceso en nuestro ejemplo) nunca aparecerá en la definición del atributo hreflang.

URL absolutas

Las URL relativas no violan ninguna regla, pero el consenso general dice que no se utilizan en el atributo hreflang. Los motores de búsqueda pueden a menudo malinterpretarlas. Lo mismo vale para todas las URL utilizadas en la etiqueta <link>: URL canónica, paginación, páginas AMP y atributo para móviles.

No traduzca, localice

Las versiones plurilingües no suelen ser las meras traducciones de la versión principal. Deberían ofrecer al usuario la misma experiencia, referencias culturales apropiadas, la moneda correcta, la zona horaria correcta y todo lo que hace falta para la audiencia objetiva.

Preguntas frecuentes sobre el atributo hreflang

  1. ¿Por qué los motores de búsqueda ignoran mi atributo hreflang?
  2. ¿Puedo utilizar más de un atributo hreflang en una sola página?

1. ¿Por qué los motores de búsqueda ignoran mi atributo hreflang?

El atributo hreflang no es una directiva sino una señal. Los motores de búsqueda no tienen ninguna obligación de seguirlo. Sin embargo, en la mayoría de los casos lo siguen.

2. ¿Puedo utilizar más de un atributo hreflang en una sola página?

Sí, puede utilizar más de un atributo hreflang en una sola página para indicar que la página está orientada a más de un país o de una región. Si tiene por ejemplo una página orientada a España y a México, puede indicarlo así:

<link rel="alternate" hreflang="es-es" href="https://www.ejemplo.es/" /> <link rel="alternate" hreflang="es-mx" href="https://www.ejemplo.es/" />

Hay que también incluir el atributo general para los usuarios españoles:

<link rel="alternate" hreflang="es" href="https://www.ejemplo.es/" />

Fuente

  1. Directrices de Google

Comenzar tus 14 días de prueba gratuita

Comience en tan solo 20 segundos

Ponga un nombre de dominio válido, por favor (www.ejemplo.es).
  • No se requiere ninguna tarjeta de crêdito
  • No hay que instalar nada
  • Sin compromiso