La guía definitiva para el hreflang

hreflang es una solución técnica para sitios que tienen contenido similar en múltiples idiomas y en donde el propietario de un sitio, utiliza los motores de búsqueda para proporcionarle a la gente el idioma que más se adecue a sus necesidades.

Digamos que un usuario holandés ingresa a la versión en inglés de un sitio aún cuando hay una versión en holandés. En este caso, lo que requieres es que Google le muestre al usuario la página en holandés en los resultados de búsqueda. Este, precisamente, es el tipo de problema a resolver para el que fue diseñado hreflang. En este artículo (bastante largo) vamos a discutir:

•  Para qué se utiliza hreflang.
• Cuál es el beneficio de SEO al utilizar hreflang.
• Qué es hreflang.
• Lo que logra hreflang.
• Por qué deberías usar hreflang.
• Qué decisiones arquitectónicas debes tomar.
• Las ideas técnicas básicas de hreflang que debes saber.
• Las decisiones de implementación que debes tomar.
• Otras cosas técnicas que necesitamos tomar en cuenta, como:
  • x-default
  • Cómo rel=”canonical” y hreflang trabajan juntas.
• Qué herramientas utilizar cuando investigamos y evaluamos la implementación.
• Cómo mantener tu implementación trabajando una vez que la instalaste.

hreflang es una de las características más difíciles que he visto salir de un motor de búsqueda. Hacerlo bien es difícil y lleva tiempo. Por lo tanto, esta guía te ayudará a impedir que caigas en las trampas más comunes al implementar esta solución. Asegúrate de leer e investigar mucho sobre el tema si vas a emprender un proyecto de hreflang .

¿Qué se entiende por hreflang?

hreflang es un método para marcar las páginas que son similares en significado pero que se encuentran en diferentes idiomas y/o regiones . Puedes utilizar esto para tres tipos de variaciones:

• Contenido con las diferencias regionales como en-us y en-gb.
• Contenido en diferentes idiomas como en, de y fr.  
• Una combinación de diferentes idiomas y variaciones regionales.

Puedes utilizar hreflang para dirigirte a diferentes mercados que utilizan el mismo lenguaje, lo que es un caso bastante común. Por ejemplo, usando hreflang se puede diferenciar entre los EE.UU. y el Reino Unido o entre Alemania y Austria.

¿Cuál es el beneficio SEO de usar hreflang?

Entonces, ¿Por qué estamos hablando sobre hreflang? ¿Cuál es el beneficio en SEO? Hay dos razones principales, desde el punto de vista del SEO, por las que deberías implementarlo.

Principalmente, si tienes una versión de una página que has optimizado para el lenguaje de los usuarios y para su localización, debes querer que aterricen en esa página.

Utilizar el lenguaje y la ubicación correctas mejora la experiencia del usuario y por lo tanto, conduce a un menor número de personas que rebotan de vuelta a los resultados de búsqueda. Un menor porcentaje de rebote ayuda a mejorar tu posición en los resultados de búsqueda.

La segunda razón es que hreflang evita un problema de contenido duplicado. Es posible que tenga el mismo contenido en inglés en diferentes URLs dirigidas al Reino Unido, los EE.UU. y Australia, pero la diferencia en éstas páginas puede ser tan pequeña como un cambio en los precios y en las divisas. Google podría no comprender pos sí solo lo que estamos tratando de hacer, por lo tanto, lo ven como contenido duplicado.

Con hreflang hay que dejar muy claro que el motor de búsqueda, es (casi) el mismo contenido, sólo que optimizado para diferentes personas.

¿Qué es hreflang?

hreflang es código, el cual puedes mostrar a los motores de búsqueda en tres maneras diferentes (de esto hablaremos más adelante). Con este código se especifican todas las direcciones URL de tu sitio(s) que tienes en con el mismo contenido. Estas direcciones URL pueden tener el mismo contenido en un idioma diferente, o el mismo idioma, pero dirigida a una región diferente.

¿Qué se logra con el hreflang?

En una implementación completa de hreflang, cada URL especifica qué variaciones están disponibles. Cuando los usuarios buscan, Google realiza el siguiente proceso:

1. Determina que quiere mostrar una URL.
2. Verifica si la URL cuenta con hreflang.
3. Presenta en los resultados la URL más apropiada para ese usuario.

La ubicación actual de los usuarios y sus ajustes de lenguaje determinan la URL más apropiada. Un usuario puede tener múltiples lenguajes en los ajustes de su navegador. Por ejemplo, puedes tener holandés, inglés y alemán. El orden en el que estos lenguajes aparecen en los ajustes determina el lenguaje más apropiado.

¿Quién da soporte a hreflang?

hreflang es soportado por Google y Yandex. Bing no tiene un equivalente, pero soporta los “language meta tags” o meta etiquetas de lenguaje.

¿Deberías usar hreflang?

Basado en lo que hemos aprendido sobre qué es hreflang y cómo funciona, podemos determinar si tú deberías usarlo. Te aconsejo usarlo si:

• Tienes el mismo contenido en múltiples lenguajes.
• Tienes contenido dirigido a diferentes regiones geográficas, pero en el mismo lenguaje.

No importa si el contenido reside en uno o múltiples dominios. Tú puedes vincular variaciones dentro del mismo dominio y también puedes vincular entre dominios.

Opciones de implementación

Algo que es muy importante en la aplicación de hreflang es, no ser demasiado específico. Digamos que tienes tres tipos de páginas:

• Alemán.
• Alemán, especialmente dirigido a Austria. 
• Alemán, especialmente dirigido a Suiza. 

Deberías elegir implementarlos usando tres atributos hreflang como estos:

• de-de dirigido a hablantes de alemán en Alemania. 
• de-at dirigido a hablantes de alemán en Austria. 
• de-ch dirigido a hablantes de alemán en Suiza. 

Como sea, ¿cuál de estos tres resultados debería mostrar Google a alguien que realiza una búsqueda de alemán en Bélgica?

La primera página sería probablemente la mejor. Para asegurarnos que cada búsqueda de usuarios alemanes que no coincide a ningún de-at o DE-CH consigue que únicamente cambie ese atributo hreflang a sólo de. Especificar sólo el lenguaje es, en muchos casos, lo más inteligente que se puede hacer. Es bueno saber que al crear conjuntos de enlaces de esta manera, el más específico gana. El orden en que los motores de búsqueda ven los enlaces, no importa. Siempre van a intentar que éstos coincidan desde lo más específico hasta lo menos específico.

Como implementar hreflang 

Independientemente de qué tipo de aplicación elijas (hablaremos de esto a detalle más adelante), existen tres reglas básicas que debes seguir:

1. Atributos válidos hreflang.

El atributo hreflang necesita contener un valor que consiste en el idioma, combinado opcionalmente con una región. El atributo de idioma tiene que estar en formato ISO 639-1 (un código de dos letras).

Códigos de región erróneos

Google puede hacerle frente a algunos de los errores de códigos de región más comunes, aunque no deberías tomar ningún riesgo. Por ejemplo, va a entender en-uk igual de bien que el correcto en-gb. Sin embargo, en-eu no funcionará, ya que la UE no define un país.

La región es opcional y debe estar en formato ISO 3166-1 alfa 2. Más concretamente, debería ser un elemento asignado oficialmente. Esto significa que es necesario utilizar esta lista para su verificación. Aquí es donde muchas veces las cosas salen mal: utilizar el código de zona incorrecto es un problema muy común. Puedes encontrar los códigos correctos en Wikipedia para verificar los que estas utilizando.

2. Los enlaces de retorno.

La segunda regla básica es sobre los enlaces de retorno. Independientemente del tipo de implementación, cada URL necesita enlaces de retorno a cualquier otra URL, toma en cuenta que se debe apuntar a las versiones canónicas (más sobre esto más adelante). Cuantos más idiomas tengas, mayor será la tentación de limitar los enlaces de retorno: no lo hagas. Si tú tienes 80 idiomas, tendrás enlaces hreflang para 80 direcciones URL. No hay manera de evitar eso.

3. Enlaza hreflang a si mismo.

La tercera y última regla básica es la de auto-enlaces. Al igual que realizar enlaces de retorno puede sentirse como algo extraño en algún momento, el enlace hreflang a la página actual también podrá ser percibido por los desarrolladores como algo extraño, sin embargo no significa que su aplicación no funcionará.

Opciones de implementación técnica.

Hay tres maneras de implementar hreflang:

1. Enlaces hreflang en el <head>,
2. utilizando cabeceras HTTP o
3. utilizando un mapa del sitio XML.

Cada uno tiene sus usos, por lo que vamos a discutir y explicar por qué deberías elegir cualquiera de estos.

1. Enlaces hreflang en el <head>

El primer método para implementar hreflang que vamos a discutir es el de poner directamente los enlaces hreflang en el <head>. Para implementar hreflang utilizando elementos de enlaces de cabeceras, se agrega un código como éste a la sección <head> de cada página:

<link rel="alternate" href="http://example.com/" hreflang="en" />

<link rel="alternate" href="http://example.com/en-gb/" hreflang="en-gb" />

<link rel="alternate" href="http://example.com/en-au/" hreflang="en-au" />

Como cada variación tiene que enlazar a todas las demás variaciones, estas implementaciones pueden llegar a ser bastante grandes y conducir a problemas de rendimiento. Si tienes 20 idiomas, elegir enlaces hreflang en el <head>  significaría la adición de 20 enlaces arriba de cada página. Esto significa la adición de 1,5 kb en cada carga de página que ningún usuario va a utilizar pero tendrá que descargar . Además de eso, tu CMS tendría que hacer varias llamadas a las bases de datos para generar todos estos enlaces. Este formato está puramente destinado a los motores de búsqueda, es por eso que no se lo recomendaría a los sitios grandes, ya que impacta demasiado en el rendimiento del sitio.

2. Cabeceras HTTP hreflang.

El segundo método de implementación de hreflang es a través de cabeceras HTTP. Las cabeceras HTTP son la solución para todos tus archivos PDF y otros contenidos no-HTML que desees optimizar. Los elementos de enlace funcionan muy bien para documentos HTML, pero no para otros tipos de contenido ya que no puedes incluirlos. Ahí es donde las cabeceras HTTP entran, que se ven de esta manera:

Link: <http://es.example.com/document.pdf>;
rel="alternate"; hreflang="es",
<http://en.example.com/document.pdf>;
rel="alternate"; hreflang="en",
<http://de.example.com/document.pdf>;
rel="alternate"; hreflang="de"

El problema en tener muchas cabezeras HTTP es similar al problema con los elementos de enlace en tu <head>: esto le agrega muchos recursos a cada solicitud.

3. Una implementación hreflang en mapa de sitio XML.

La tercera opción para implementar hreflang es utilizando el formato de mapas de sitio XML, el cual utiliza el atributo XHTML:link en los mapas de sitio para agregar la anotación a cada URL. En gran parte, esto funciona de la misma manera que lo haría en una página con elementos < head> y <link>. Si tú creías que los elementos de enlace eran detallados, la implementación mapa del sitio XML es aún peor. Este es el formato necesario para una sola dirección URL con otros dos idiomas:

<url>
  <loc>http://www.example.com/uk/</loc>
  <xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/" />
  <xhtml:link rel="alternate" hreflang="en-au" href="http://www.example.com/au/" />
  <xhtml:link rel="alternate" hreflang="en-gb" href="http://www.example.com/uk/" />
</url>

Puedes ver que el código tiene una autorreferencia de URL en la tercera URL, especificando otros dos idiomas en la URL con en-gb. Ahora, las otras dos URL tendrían que estar en el mapa también, con este aspecto :

<url>
  <loc>http://www.example.com/</loc>
  <xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/" />
  <xhtml:link rel="alternate" hreflang="en-au" href="http://www.example.com/au/" />
  <xhtml:link rel="alternate" hreflang="en-gb"href="http://www.example.com/uk/" />
</url>

<url>
  <loc>http://www.example.com/au/</loc>
  <xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/" />
  <xhtml:link rel="alternate" hreflang="en-au" href="http://www.example.com/au/" />
  <xhtml:link rel="alternate" hreflang="en-gb" href="http://www.example.com/uk/" />
</url>

Como puedes ver, básicamente,  sólo estamos cambiando las URLs dentro del elemento <loc>, como todo lo demás necesita ser lo mismo. De esta manera, cada URL tiene un atributo hreflang de referencia a sí misma y enlaces de regreso adecuadas a las otras direcciones URL.

El formato mapa del sitio XML  como este es muy detallado: se necesita una gran cantidad de trabajo para hacer esto para una gran cantidad de direcciones URL. El beneficio de una implementación de mapa del sitio XML mapa es simple: tus usuarios comunes no se molestarán con este formato. Este tiene la ventaja de no añadir peso extra a la página y que no requiere una gran cantidad de llamadas a la base de datos al cargar la página para generar este formato.

Otro beneficio al agregar hreflang a través del mapa del sitio XML es que por lo general es mucho más fácil de cambiar un mapa del sitio XML que cambiar todas las páginas de un sitio. No hay necesidad de ir a través de procesos de aprobación extensos y tal vez incluso se puede obtener acceso directo al archivo de mapa del sitio XML.

Otros aspectos técnicos de una implementación hreflang.

Vamos a suponer que has decidido qué tipo de aplicación técnica utilizarás. Hay un par de otras especificidades técnicas que debe conocer antes de empezar a implementar hreflang.

x-default

Hay un valor de atributo hreflang especial que se llama x-default. El valor x-default especifica dónde un usuario debe ser enviado si ninguno de los lenguajes que tú has especificado en tus otros links hreflang concuerda con los ajustes de su navegador. En un elemento de vínculo esto luce así:

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

Cuando se introdujo el valor, éste se explicó como para las páginas de destino ” internacionales”, es decir, páginas en las que tú rediriges a los usuarios en función de su ubicación. Sin embargo, básicamente se puede describir como el  “catch-all” final de todos los estados hreflang. Si la ubicación de los usuarios y el lenguaje no coinciden, es ahí a donde será enviado. 

En el ejemplo del lenguaje alemán que mencionamos anteriormente, si un usuario busca en idioma inglés aún no tendría una URL “apropiada”. Ese es uno de los casos en los que el valor x -default entra en juego. Se podría agregar un cuarto enlace al formato y terminarlo con estos 4:

• de
• de-at
• de-ch
• x-default

En este caso, el vínculo x-default debería señalar al mismo URL que el de uno. Aún así, lo mejor es que dejes el elemento de ahí. En el largo plazo, por lo general, es mejor tener tanto como lo especifica el idioma de la que se encuentra en la página de y hace que el código sea más fácil de leer.

hreflang y rel=canonical

Si no conoces qué es rel=”canonical”, lee este artículo. 

El formato rel=”alternate” hreflang=”x” y rel=”canonical” pueden y deben ser usados juntos.  Cada lenguaje debe tener el vínculo rel=”canonical” apuntando a sí mismo. En el primer ejemplo esto luciría de la siguiente manera, asumiendo que estamos en la página de inicio de example.com. 

<link rel="canonical" href="http://example.com/">
<link rel="alternate" href="http://example.com/" hreflang="en" />
<link rel="alternate" href="http://example.com/en-gb/" hreflang="en-gb" />
<link rel="alternate" href="http://example.com/en-au/" hreflang="en-au" />

Si estuviéramos en la página de en-gb, solo cambiaría la URL canónica:

<link rel="canonical" href="http://example.com/en-gb/">
<link rel="alternate" href="http://example.com/" hreflang="en" />
<link rel="alternate" href="http://example.com/en-gb/" hreflang="en-gb" />
<link rel="alternate" href="http://example.com/en-au/" hreflang="en-au" />

No cometas el error de fijar el canónico en la página en-gb a http://example.com/, ya que esto rompe la aplicación. Es muy importante que los enlaces hreflang apunten a la versión canónica de cada URL. Estos sistemas deben trabajar de la mano!

Herramientas útiles a la hora de ejecutar hreflang.

Si has llegado hasta aquí, es probable que estés pensando “wow esto es difícil”, afortunadamente, hay un buen número de herramientas disponibles para las personas que se atreven a empezar a aplicar hreflang.

Generador de etiquetas hreflang.

Aleyda Solis, que ha escrito mucho sobre este tema, también ha creado un generador de etiquetas hreflang muy útil que te ayudará a generar elementos de enlace. Incluso cuando no estás eligiendo para la implementación de un elemento de enlace esto puede ser útil para crear un código de ejemplo.

Generador de mapa de sitio XML hreflang.

The Media Flow ha creado un generador de mapa de sitios hreflang XML . Puedes alimentar un CSV con direcciones URL por idioma y se crea un mapa del sitio XML. Un muy buen primer paso cuando decides ir por esta ruta.

El archivo CSV que alimenta a este generador de mapa de sitio XML necesita columnas para cada idioma. Si deseas agregar una dirección URL x-default a éste, basta con crear una columna llamada x-default.

Validador etiqueta hreflang.

Una vez que hayas añadido los formatos a tus páginas, tendrás que validarlo. Si se eliges seguir el elemento de enlace en la ruta <head>, estás de suerte, ya que hay algunas herramientas de validación por ahí que te pueden servir. La mejor que hemos podido encontrar es flang, por DejanSEO.

Por desgracia, aún no hemos encontrado un validador de mapas de sitio XML.

Mantener vivo hreflang: proceso.

Una vez que hayas creado una configuración de trabajo hreflang, es necesario establecer procesos.

También es una buena idea auditar regularmente su aplicación para asegurarte de que todo está configurado correctamente.

Asegúrate de que las personas en tu empresa que se ocupan de contenido en tu sitio saben sobre hreflang. Esto te dará la certeza de que no cometan errores que rompan la aplicación de este elemento. En este sentido, hay dos cosas que son muy importantes:

1. Cuando se elimina una página, comprobar si sus contrapartes se actualizan.
2. Cuando se redirige una página, cambiar las direcciones URL hreflang de sus homólogos.

Si haces esto con regularidad, no deberás tener mayores problemas.

Conclusión.

Definitivamente, la configuración hreflang es un proceso engorroso, una estándar con una gran cantidad de asuntos que debe conocer y tratar previamente. Esta guía será actualizada a medida que surjan cosas nuevas y que las prácticas evolucionen entorno al tema, así que vuelve a ella cuando estés trabajando en la implementación. 

Recomendación: ¡la página de inicio primero!

Si no estás seguro de implementar hreflang en todo tu sitio web, comienza con tu página de inicio. En este sentido, las búsquedas de la gente sobre tu marca llevarán a la página correcta. Esta es por mucho la implementación más fácil y la que captará una gran parte de tu tráfico.

Fuente: Yoast