Todos hemos escuchado hablar de las etiquetas hreflang pero de forma resumida ¿qué objetivo cumple esta etiqueta?. Si tenemos un sitio web tiene varias versiones de una página en diferentes idiomas o dirigidas a regiones concretas, se debe indicarlo a los navegadores. Así se puede mostrar a los usuarios la versión más adecuada de tu página según su idioma o región.
Aunque los navegadores encuentren versiones de tus páginas en otros idiomas, se recomienda que indiquemos todas las versiones en otros idiomas o dirigidas a regiones concretas, que tengan el sitio web.
¿Qué son las etiquetas Hreflang?
Hreflang son etiquetas que sirven para indicar a los Navegadores (Google, Yahoo, etc.) que un sitio web está disponible en varios idiomas, al tiempo que le comunica dónde están las diferentes versiones multidiomas de la web.
Para resumir, los objetivos principales de la implementación de las etiquetas hreflang:
- Mostrar a los navegadores qué páginas del site en un idioma “X” corresponden a qué páginas en los demás idiomas existentes en la web.
- Prevenir el contenido duplicado entre diferentes idiomas. Sobre todo, en sitios web que tienen varias versiones de una página en diferentes idiomas o dirigidas a regiones concretas.
¿Cómo implementar las etiquetas Hreflang?
Cuando nos surge la duda de cómo implementar las etiquetas hreflang, Existen varias formas para implementarlas:
Implementar Hreflang con Etiquetas HTML
En la sección <head> de cada página que tenga alguna variante en otro idioma, incluiremos la etiqueta con el formato siguiente: <link rel=»alternate» hreflang=»x» href=»alternateURL«> que reenvie a las otras versiones, y también a sí misma. Por ejemplo:
“https://www.ejemplo.com/es/» tendrá el bloque hreflang siguiente:
<link rel=»alternate» href=»https://www.ejemplo.com/es/» hreflang=»es» />
<link rel=»alternate» href=»https://www.ejemplo.com/» hreflang=»en» />
<link rel=»alternate» href=»https://www.ejemplo.com/fr/» hreflang=»fr» />
<link rel=»alternate» href=»https://www.ejemplo.com/de/» hreflang=»de» />
En este caso estamos marcando el idioma al que pertenece cada versión ideomática de la web, pero también podemos marcarle el país en cuestión al que se dirige cada idioma:
<link rel=»alternate» href=»https://www.ejemplo.com/es/» hreflang=»es-es» />
<link rel=»alternate» href=»https://www.ejemplo.com/» hreflang=»en-gb» />
<link rel=»alternate» href=»https://www.ejemplo.com/fr/» hreflang=»fr-fr» />
<link rel=»alternate» href=»https://www.ejemplo.com/de/» hreflang=»de-de» />
Todas las páginas de la versión española y de los demás idiomas tienen que tener marcado en el hreflang qué páginas de los otros idiomas son una versión en otra lengua de esa página en cuestión, dejando también marcada la propia url.
Implementar Hreflang en Encabezados HTTP.
Para archivos que no son HTML, como por ejemplo archivos PDF, se puede implementar el hreflang de estos archivos devolviendo encabezados HTTP con las respuestas GET de tus páginas para informar de todas sus variantes de idioma y región.
El encabezado debe tener este formato:
Enlace: ; rel=»alternate»; hreflang=»código_idioma_1″, ; rel=»alternate»; hreflang=»código_idioma_2″, …
La URL completa de la página alternativa correspondiente al código de idioma del atributo hreflang asociado. Debe incluirse entre estos símbolos: < >. Ejemplo: https://www.google.com
código_idioma_x
Se debe indicar el conjunto de valores separados por comas , rel=»alternate», y hreflang para cada versión de la página, incluida la versión solicitada. Los encabezados Link: que se devuelven en cada versión son idénticos. Ejemplo
Ejemplo de encabezado Link: devuelto por un sitio web que tiene tres versiones de un archivo PDF: una para los usuarios que hablan francés, otra dirigida a los hablantes de francés de Bélgica y una tercera que se mostrará a todos los demás visitantes que hablen español:
Link: http://fr.example.com/file.pdf; rel=»alternate»; hreflang=»fr»,
http://fr-be.example.com/file.pdf; rel=»alternate»; hreflang=»fr-be»,
http://es.example.com/file.pdf; rel=»alternate»; hreflang=»es»
Implementar etiquetas hreflang mediante sitemap.
Por último, se puede implementar las etiquetas hreflang las variantes de idioma y región de todas tus URL mediante un sitemap.Se añade un elemento que incluya una única URL y tenga entradas secundarias con todas las variantes de idioma y región de la página, incluida la del propio elemento . Es decir, si tienes cinco versiones de una página, tu sitemap debe incluir cinco entradas, cada una con cinco entradas secundarias idénticas.
Mediante Screaming Frog, podemos generar fácilmente un sitemap con las etiquetas hreflang correspondientes. Muestra:
Reglas de sitemaps:
• Especificar el espacio de nombres xhtml de este modo:
xmlns:xhtml=»http://www.w3.org/1999/xhtml»
• Crea un elemento por URL.
• En cada elemento debe incluirse un elemento secundario que indique la URL de una página.
• En cada elemento debe incluirse un elemento secundario en el que se indiquen todas las versiones alternativas de una página, incluida la suya propia. El orden de estos elementos secundarios no es importante, pero te recomendamos que uses siempre el mismo orden para que te resulte más fácil comprobar si hay errores.
Implementación del valor x-default en la etiqueta Hreflang.
Se debe incluir el valor x-default dentro de las etiquetas hreflang, para mostrar una versión concreta a los usuarios de idiomas no indicados. El valor «x-default» se usa cuando la configuración del navegador de los usuarios no coincide con ningún idioma ni región indicados en las etiquetas hreflang. Este valor no es obligatorio, pero se recomienda incluirlo para controlar qué versión se muestra a los usuarios de idiomas que no hayas especificado.
Debemos de tener en cuenta la implementación de esta etiqueta ya que una mala implementación de la misma puede ser perjudicial para nuestro proyecto web. A continuación, se muestra un ejemplo real de esto que os hablo a modo de historia:
Consecuencias de una mala implementación del hreflang
Tras la comprobación diaria de las métricas relativas al SEO de mis clientes me doy cuenta de que en uno de ellos en particular ha sufrido una fuerte bajada de tráfico orgánico en la home mientras en las tipologías de página de categorías y productos mantenían una tendencia positiva.
Ante esto pensé “bajada en la home = a bajada en la keyword de marca”, por lo que busqué el nombre de la marca en Google y me encontré con esto:
¿Esto qué es? (eso no fue lo qué pensé exactamente pero lo estoy suavizando para que el post lo puedan leer todo tipo de públicos XD)
El resultado que mostraba Google era la Home de la web con un utm mal montado…
Ante esto, entré en el código de esta página que Google daba como resultado y vi que como url canónica tenía la home sin parámetros, lo cual era correcto.
Y aquí me hice la pregunta del millón ¿Cómo es posible que esta url que tiene un canonical hacia la home es la que sale como resultado cuando buscamos por el nombre de la marca y no la home sin parámetros?
Tras darle más vueltas a la cabeza con este problema que la niña del exorcista hice el mismo procedimiento de comprobación con la home que el que hice anteriormente con la url con el falso utm, y ahí fui donde encontré finalmente el problema. El canonical de la home era autoreferenciado lo cual era OK, pero al mirar el hreflang de la home observé lo siguiente:
En la etiqueta hreflang de la versión ES se habían autogenerado estos parámetros, por esto Google había empezado a mostrar esta página en vez de la home cuando se hacía una búsqueda de marca.
Una vez que se corrigió este problema, a los días volvió todo a la normalidad ?
