Si tienes un sitio web grande que ofrece contenido en varios idiomas debido a la diversidad de tus usuarios, el mejor modo de hacerlo y de notificar a los buscadores online, es a través del uso de etiquetas hreflang.

Antes de seguir, quiero aclarar que este no es un artículo simplemente narrado a la ligera. Mucha gente tiene dudas respecto al uso de este tipo de etiquetas, que si bien son fáciles de implementar, a no todos les sale bien de entrada, de hecho, yo tarde varias horas en descubrir cómo implementarlas correctamente, así que hoy quiero contarles como hacerlo sin que se equivoquen.

¿Pero para qué sirve?

Si tu sitio se encuentra disponible en varios idiomas y subdividido en varios subdominios, por ejemplo:

  • es.dominio.com (español)
  • en.dominio.com (inglés)
  • pt.dominio.com (portugués)

O incluso si estuviese separado por carpetas del tipo /es/ /en/ o /pt/, de nada le serviría a un potencial cliente tuyo que se encuentre en Estados Unidos, realizar una búsqueda en Google y toparse con la versión en español o portugués de tu sitio web. Podrías estar perdiendo a un posible usuario o comprador.

Entonces, ya sea que tu sitio esté traducido completamente, o que sólo algunas partes del mismo se encuentren traducidas ya que el contenido en realidad es generado por los usuarios (por ejemplo en los foros), o que en tu web ofrezcas distintas versiones de textos incluso dentro de un mismo idioma debido a una variación de dialectos (por ejemplo ‘ca-fr’ para el francés canadiense o ‘fr-fr’ para el francés de Francia), la solución a tu problema es la correcta utilización de etiquetas de idiomas.

¿Tienes un ejemplo práctico?

Si aún no entiendes a qué me refiero, quizás las siguientes imágenes te ayuden a ver el problema sobre el que estamos hablando.

Si estando en Argentina, voy a Google y busco: “Facebook”, este es el primer resultado que aparece:

facebook argentina hreflang

Si estando en Francia, voy a Google y busco: “Facebook”, este es el primer resultado que aparece:

facebook francia hreflang

Como se puede ver, los resultados no sólo cambian el idioma de sus textos, sino que fundamentalmente también cambia la URL hacia la cual nos estamos dirigiendo. En el caso de Argentina accedemos a ‘es-la.facebook.com’ que la versión en Español de Facebook para América Latina y en el caso de Francia accedemos a ‘fr-fr.facebook.com’ que es la versión en Francés de Facebook para Francia (ya que hay otros países que también usan al Francés como idioma, pero tienen sus propios dialectos).

Si vamos entonces a facebook.com desde nuestro navegador incógnito, y sin iniciar sesión, analizamos el código fuente de su página de inicio, veremos lo siguiente:

facebook hreflang

Ahora, si Facebook lo usa, y Google así lo recomienda.. ¡sin duda alguna nosotros también deberíamos hacerlo!

¿Cómo usar las etiquetas de hreflang?

Puedes insertar estas etiquetas dentro de la etiqueta del header de tu sitio o bien puedes optar por hacerlo desde tu sitemap. A continuación te voy a enseñar como hacerlo desde el header de tu web.

Debes insertar tus hreflang en todas las páginas de tu sitio que estén traducidas, y todos tus hreflang deben estar enlazados entre si. ¡¿Qué dijiste?

Te lo muestro con el siguiente ejemplo:

<link rel="alternate" href="http://dominio.com/en" hreflang="en" />
<link rel="alternate" href="http://dominio.com/es" hreflang="es" />
<link rel="alternate" href="http://dominio.com/pt" hreflang="pt" />

Sería exactamente igual si en vez de dividir tus idiomas en carpetas, lo haces en subdominios, sólo deberías cambiar las url’s a por ejemplo “http://en.dominio.com/” en vez de “http://dominio.com/en/”.

Todo ese código, con tus respectivas URL’s, debe ir en el header de tu sitio, entre las etiquetas <head> y </head>.

Pero eso no es todo, también debes incluir el hreflang=”x-default”, con la cual señalarás cuál es el dominio principal del sitio:

<link rel="alternate" href="http://dominio.com/" hreflang="x-default" />

Entonces, tu código final debería lucir así:

<link rel="alternate" href="http://dominio.com/" hreflang="x-default" />
<link rel="alternate" href="http://dominio.com/en" hreflang="en" />
<link rel="alternate" href="http://dominio.com/es" hreflang="es" />
<link rel="alternate" href="http://dominio.com/pt" hreflang="pt" />

Ya te dije que este código debe ir en el header de sus sitios, pero … ¿en todo el header?

No, únicamente en los headers de las webs traducidas.

Este es un error muy común. Una vez con uno de mis sitios que estaba disponible en español, inglés y portugués coloqué un código como el de arriba en el header de todo el sitio. GRAN ERROR.

Google comenzó a indexar todo en mi sitio 3 veces. Cada una de mis URL’s las indexó con cada uno de los subdominios de idioma.

Si mi web hubiera estado completamente traducida, por ejemplo un sitio de e-commerce, quizás esto no hubiera sido un problema.

Pero mi web era más similar a un foro. En esta web los usuarios subían su propio contenido, entonces si bien el template de la web podía ser traducido a varios idiomas, el contenido de cada artículo no lo sería, ya que estos eran creados meramente por los usuarios.

¿Qué sucedió?

Google indexó toda mi web 3 veces, “una en cada idioma”, aunque al ingresar a estos artículos, el idioma del contenido era siempre uno solo. En definitiva esto no hizo más que crear mucho contenido duplicado dentro de mi sitio.

¿Cómo lo solucioné?

A mi sólo me importaba que la página principal de ese sitio pueda ser accedida a través de Google, en el idioma correspondiente de cada usuario dependiendo su ubicación geográfica.

Entonces creé distintos templates para la página de inicio, colocando estos en distintos subdominios e indicándole a Google cuál de ellos debería mostrarle a cada usuario dependiendo su idioma. ¿Cómo? Colocando en cada uno de los headers de los index’s de estos subdominios el conjunto de etiquetas hreflang.

¿Cómo sé si implementé bien mis etiquetas de hreflang?

Google puede tardar días o incluso semanas en mostrar correctamente los cambios de este tipo en nuestros sitios, especialmente si se trata de sitios nuevos sin autoridad.

Por suerte, durante mis andanzas por hacer funcionar correctamente a este conjunto de etiquetas me encontré con el sitio http://hreflang.ninja/ en el cual pueden colocar la URL de su sitio y testiar si han implementado bien estas etiquetas.

Si llegaste hasta aquí, espero que te haya servido este artículo. Si tienes alguna otra duda al respecto o si esta guía te ayudó te invito a dejar un comentario a continuación :).

Dejá una respuesta