Etiqueta hreflang: ¿Qué es y por qué es importante para las webs multi-idioma?

5 mayo 2020 | SEO | 7 Comentarios

Alba Asín

Especialista SEO en Wanatop. La curiosidad por los entresijos de Google le trajo hasta aquí. Trabaja dando sentido real a las webs para maximizar su valor y visibilidad en los resultados de búsqueda.

Como dice John Mueller, analista webmaster de Google, la implementación de hreflang es una de los aspectos más complejos del SEO. Por ello, os traemos una guía para todos aquellos que tengan o deseen tener una web multi-idioma, de forma que tengas todas las claves para una correcta implementación de etiquetas de cara al posicionamiento de tu web.

john mu

¿Qué es la etiqueta hreflang?

El conocido hreflang es una etiqueta que sirve para hacer saber a Google y a otros buscadores las diferentes versiones idiomáticas que tiene una misma web. Además gracias a ella, facilita el trabajo al robot para encontrar donde se encuentran las diferentes versiones.

¿Por qué es importante, para que sirve?

Desde el punto de vista SEO es una etiqueta que debemos tener en cuenta siempre que tengamos varias versiones de idiomas, por dos principales factores:

  • Optimizar los resultados de búsqueda: Con estas etiquetas podemos informar a Google a qué países nos queremos dirigir y en qué idioma. De forma que si nos busca una persona desde fuera de españa, reciba en sus resultados de búsqueda la versión que le corresponde.
  • Evitamos duplicidad de contenido: Por cada idioma que tengamos, existe una copia exacta de la web traducida en diferentes idiomas, en algunos caso puede generar problemas de contenido duplicado que podemos resolver u optimizar usando la etiqueta hreflang.

¿Cuándo recomienda Google utilizar hreflang?

Google nos indica 3 situaciones en las que debemos utilizar la etiqueta alternate:

  • Contenido principal en un solo idioma: Si lo principal lo tenemos en un único idioma y solo aparece traducida la plantilla (como footer o menús).
  • Mismo idioma en distintos países: Esto ocurre cuando el idioma es el mismo (inglés) pero son países o regiones distintas (Reino Unido y Estados Unidos).
  • Tu sitio está traducido: Si tenemos creadas versiones de los distintos idiomas, deberemos indicarle a Google mediante estas etiquetas cada una de ellas.

¿Cómo y dónde implementar etiquetas hreflang?

El objetivo incluir estas etiquetas es conseguir que, cuando el robot pase por una de nuestras páginas, sepa exáctamente cuál es su url equivalente en el resto de idiomas que ofrecemos en nuestra web.

Para ello, Google nos ofrece 3 formas de implementar etiquetas hreflang:

  • Implementar hreflang por HTML

Es la forma más habitual de implementarlo. Dentro del <head> de nuestra página indicaremos las url con la versión del idioma y región a la que le corresponde. La etiqueta tendrá este aspecto por cada una de las versiones:
<link rel="alternate" href="url_otro_idioma" hreflang="código_idioma" />
Aquí podemos ver un ejemplo real de página etiquetada con hreflang por HTML:

spain

Cada una de las líneas que ves, corresponde a un idioma diferente. Si prestas atención al código del idioma, podrás comprobar que por ejemplo hay varias líneas para el (“fr-BE”, “fr-CH”, “fr-FR”, etc.) debido a que este idioma se habla en diferentes países o regiones (Bélgica, Chequia, Francia…) y en nuestro ejemplo existe una versión para cada idioma con sus respectivas características lingüísticas.

Debes tener en cuenta de que para que la implementación sea correcta, deberás aplicar la misma acción recíprocamente en todas las versiones de una página como se indica en el gráfico:

  • Implementar hreflang por encabezado HTTP

Si no es posible implementarlo a través del HTML, puedes configurar la etiqueta Hreflang en el encabezado HTTP para especificar las distintas versiones de idiomas que existen. Esta forma resulta especialmente útil para configurarlo en imágenes o PDFs que no son archivos HTML.

La etiqueta tendrá este formato en el encabezado HTTP:
Enlace: <url1>; rel="alternate"; hreflang="código_idioma_1", <url2>; rel="alternate"; hreflang="código_idioma_2", …
Como puedes ver en el ejemplo anterior se van colocando las equivalencias de cada idioma uno detrás de otro:

  1. En <url> colocaremos la página de destino del primer idioma.
  2. rel=”alternate” lo dejaremos como está.
  3. hreflang=”x-x”: pondremos de nuevo el código del idioma y región correspondiente.

Y repetiremos de la misma forma con cada uno de los idiomas que tengamos.

  • Implementar hreflang mediante Sitemap

Si no quieres implementar etiquetas HTML ni modificar cabeceras HTTP, Google nos da la opción de indicarle todas las versiones de idiomas que existen a través de los Sitemaps.

Para hacerlo a través de este modo debes añadir el elemento <loc> con una única URL que tenga entradas secundarias <xhtml:link> con todas las variantes de idioma y región de la página, incluida la del propio elemento <loc>. 

sitemap

¿Y si tenemos el mismo idioma y distintos países?

Se puede dar el caso de que tengamos diferentes versiones que usen el mismo idioma (por ejemplo podemos utilizar el idioma castellano para España y cualquier país sudamericano). El idioma es el mismo pero las expresiones y la redacción son distintas.

Como vemos, podemos especificar por idioma e idioma-zona geográfica. Esto nos permite, por ejemplo, diferenciar inglés de España y Argentina.
<link rel="alternate" href="https:// ejemplo.com/" hreflang="es-ES"/>
<link rel="alternate" href="https://ar.ejemplo.com/" hreflang="es-AR"/>

¿Qué es el X-default en hreflang y para qué sirve?

La etiqueta X-default se para mostrar una versión idiomática por defecto a los navegadores en países o regiones que no han sido indicados con el hreflang. 

Imagina que tienes una web está principalmente hecha en español, y tienes otras versiones en inglés y portugués. En esta situación quizás te interese definir la versión inglesa por defecto (default) para el resto de idiomas que no han sido especificados. Este valor no es obligatorio pero puede sernos de utilidad en ciertas situaciones. La etiqueta tendría este aspecto:
<link rel="alternate" href="http://example.com/" hreflang="x-default" />

Plugins de hreflang en WordPress

Si trabajas con WordPress, puedes utilizar plugins que ayudarán a controlar el etiquetado y traducción de tu web. Aunque existen muchos plugins con diferentes funciones para realizar esta tarea, te recomendamos los siguientes:

  • WPML: Plugin de pago compatible con la mayoría de temas y plugins que además de traducir las secciones de tu web, lleva incorporada la gestión de las etiquetas hreflang en WordPress. Es tan fácil como acceder a su configuración / idiomas y marcar la casilla de “Mostrar las alternativas de idioma en el encabezado”.

wpml plugin wordpress hreflang

  • Polylang: Plugin de pago, pero con una versión gratuita que también puede interesarte. Su uso también resulta muy fácil ya que las etiquetas hreflang se incluirán automáticamente al incluir los idiomas en tu web.
  • HREFLANG Tags Lite: Es otra alternativa algo más manual, en la que al instalarlo puedes seleccionar las áreas de tu web donde quieres activar la opción de incluir estas etiquetas. En este caso, en vez de generar etiquetas automáticamente, cada vez que crees una página, sección o artículo nuevo, encontrarás un espacio donde configurar su url traducida correspondiente y el idioma al que pertenece.

Errores comunes al implementar la etiqueta hreflang

Google, desde su documentación oficial, nos explican cuáles son los errores más comunes a la hora de configurar el hreflang.

  • Falta de enlaces de confirmación

Esto se basa en la reciprocidad, si la versión española enlaza con la versión inglesa, ésta debe hacer lo mismo con la española. Si no realizamos correctamente este paso, lo más probable es que el GoogleBot no interprete de manera adecuada las etiquetas alternate.

  • Códigos de idioma incorrectos

Los códigos de idioma deben identificar el idioma deseado en formato ISO 639-1 y, de manera opcional, la región en formato ISO 3166-1 Alpha 2 para una url alternativa. 

  • El plugin Qtranslate de WordPress duplica las etiquetas

SI tienes una web multilengua y estás utilizando el plugin Qtranslate para la traducción de tu WordPress, debes tener cuidado puesto que es muy probable que debido a un fallo del plugin se estén duplicando las etiquetas hreflang como vemos a continuación.

qtranslate plugin

Esto puede ser un problema ya que le estamos indicando a Google toda la información por duplicado.

Una posible solución para resolver este fallo usando este plugin es modificar la programación del plugin, para así evitar tener duplicadas nuestras etiquetas hreflang.

qtranslate hreflang

Comprobación y validación de errores en hreflang

Por último, si has configurado las etiquetas y todavía tienes dudas, Google pone a tu disposición una herramienta de comprobación de la segmentación internacional de la web, donde podrás ver si existe algún error en la implementación.

sitemap hreflang

Esperamos que este post sea de gran ayuda para todos aquellos que quieran optimizar su web multi-idioma. si queréis consultarnos algo acerca de nuestros servicios de posicionamiento web, solo tienes que escribirnos y nos pondremos en contacto contigo.

¡Compártelo!

7 Comentarios

  1. Eduardo Alapont Fernández

    Hola
    ¿hay que poner el hreflang en todas las páginas o solo en la index?
    Tengo un site en diferentes idiomas por carpetas /por /esp.. y el contenido no es el mismo con lo que una url no correponde con otra. Muchas gracias

    Responder
    • Víctor Berroya

      Hola Eduardo,

      Gracias por comentar en el blog. Para que la etiqueta hreflang funcione debe ser bidireccional por lo que debemos asociar siempre una url con su homónima en otro idioma.

      Saludos

  2. josefino

    Me uno a la pregunta de Eduardo. Saludos

    Responder
  3. Pecatum Gourmet

    Buenos días,

    En nuestro caso, tras meses con el blog activo en 2 idiomas (y sin ningún error relacionado con estas etiquetas reportado hasta ahora), Search Console nos acaba de informar de errores en sólo 2 de las entradas:

    /blog/en/2016/04/20/happy-mothers-day-theres-only-one-mother-all-year/
    es: no hay etiquetas de retorno
    URL alternativa: /blog/es/2016/04/20/feliz-dia-de-la-madre-madre-solo-hay-una-todo-el-ano/

    Y uno análogo (en: no hay etiquetas de retorno) para otra de las entradas.

    Sin embargo, en el código fuente sí están las etiquetas:

    Es verdad que hace un par de meses modificamos la estructura de los enlaces para eliminar la fecha, ¿puede ser ése el problema? Es decir, Google busca el enlace a xxxx/2016/10/07/yyyyy y ahora ese enlace (que de todas formas está correctamente redirigido) es en realidad xxxx/yyyy.

    La pregunta es: ¿puede eliminarse este aviso de error? ¿O simplemente esperar a que Google reindexe?

    Muchas gracias y un saludo

    Responder
  4. Víctor Berroya

    Buenos días,

    En Search Console no puedes eliminar avisos de error de etiquetas hreflang. Si están bien implementadas dale tiempo para ver si desaparece ese error que os indica Search Console.

    Saludos

    Responder
  5. Alejandro xxx

    Hola Victor,gracias por solucionar algunas dudas sobre las etiquetas Hreflang, pero en mi caso todavía no sé que es lo más adecuado para mi web, te explico:tengo una página en INGLÉS(para todos los países excepto España) y otra página en ESPAÑOL(para España),y me comentan desde el foro de Google que en la del inglés que actualmente tengo la etiqueta en-GB que debería quitarla y no poner ningún hreflang… ¿esto es correcto? ¿Tú harías lo mismo?Gracias de antemano!

    Responder
    • Victor Berroya

      Hola Alejandro, gracias por comentar. Si tienes una única versión en inglés y otra en español yo tendría puestas las etiquetas en y es (sin países, con en-GB específicas para Reino Unido). Eso sí, tienes que tener siempre la versión en uno y otro idioma para que esté correcto (son etiquetas bidireccionales).

      Un saludo!

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *