¿Cómo utilizar la etiqueta HREFLANG?

Muchos sitios webs están presentes en varios países proporcionando contenidos a usuarios de diferentes partes del mundo. Estos contenidos pueden estar traducidos buscando de esta manera adoptar estos contenidos a una determinada región. Para ello el motor de búsqueda Google utiliza los atributos <link rel=“alternate” hreflang“idioma” href=“url equivalente”/> para indicarle al buscador que ofrezca un contenido u otro en función del idioma de la configuración de los usuarios.

Veamos un ejemplo:

Suponed que la web ejemplo.es está disponible y geolocalizada para España. No obstante opera en Reino Unidos, Estados Unidos e Italia, por lo tanto ofrece contenido en inglés y español a través de los siguientes dominios.

Dominio principal: ejemplo.es
Dominio US: ejemplo.com
Dominio Italia: ejemplo.com.it
Dominio UK: ejemplo.co.uk

Lo óptimo sería que si un usuario está en Gran Bretaña se le muestren resultados de ejemplo.co.uk, si otro estuviera en Italia ejemplo.com.it, y así sucesivamente. Para que esto ocurra y que no se ofrezcan todas las webs en todos los países, lo mejor es utilizar la etiqueta hreflang.

Para ello en el código fuente de la web principal deberemos introducir las siguientes etiquetas:

rel=“alternate” hreflang“en-US” href=“ejemplo.com”
rel=“alternate” hreflang“it-IT” href=“ejemplo.com.it”
rel=“alternate” hreflang“en-GB” href=“ejemplo.co.uk”

Eso sí, el canonical en este caso apuntará a ejemplo.es.

Lo mismo se debe hacer con cada una de las webs. En el código fuente de la web ejemplo.com, deberíamos introducir las siguientes etiquetas:

rel=“alternate” hreflang“es-ES” href=“ejemplo.es”
rel=“alternate” hreflang“it-IT” href=“ejemplo.com.it”
rel=“alternate” hreflang“en-GB” href=“ejemplo.co.uk”

Y así sucesivamente…

Uno de los errores más habituales es utilizar las etiquetas hreflang, y que todas las páginas lleven los hreflang hacia las portadas. Por ejemplo la web masaltos.com.

Si vemos estos zapatos de Charol: www.masaltos.com/es/zapatos-con-alzas-hombre/tronisco/modelo-charol/88/1 y analizamos el código fuente vemos que:
<link rel=»alternate» hreflang=»es» href=»http://www.masaltos.com/es/» />

Los idiomas de los hreflang son incorrectos
Los href no deben ser las portadas, sino el producto equivalente
No se debe poner hreflang del dominio que se muestra

Por lo tanto los hreflang deberían ser los siguientes:

Y así sucesivamente para la web de Rusia, Turquía e Italia…

Otra cosa más:

No te olvides que los canonicals deben apuntar hacia sí mismo para cada uno de los países. De modo tal que el canonical para el producto Charol en español será: <link rel=»canonical» href=»www.masaltos.com/es/zapatos-con-alzas-hombre/tronisco/modelo-charol/88/1” />

Si estuviéramos en la web de Gran Bretaña www.masaltos.com/en/height-increase-shoes/tronisco/model-charol/88/1 el canonical sería <link rel=»canonical» href=»www.masaltos.com/en/height-increase-shoes/tronisco/model-charol/88/1”/>

Y por último…

No te olvides de incluir los hreflang también en los sitemaps…