Las últimas notícias sobre SEO y Marketing Digital en nuestro Blog de Marketing Digital 

Las etiquetas Hreflang

Por Digital Growth

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 v