Consejos y curiosidades sobre hreflang
¿Tienes una web en varios idiomas y te interesa que Google muestre el mejor contenido para cada usuario? Entonces necesitas aprender a implementar etiquetas hreflang. Las etiquetas hreflang son una solución técnica para sitios que tienen contenido similar en diferentes idiomas.
El ejemplo más utilizado para explicar en qué consiste es el de la página web con dos versiones: una en inglés y otra en holandés. Al webmaster de este sitio web le interesa que para este usuario aparezca la versión en holandés, que es su propio idioma. Hreflang fue diseñado para resolver este problema, para optimizar una web en múltiples idiomas y conseguir que Google presente el contenido a cada usuario en su propio idioma.
Sin embargo, manejar estas etiquetas con eficacia puede ser bastante complicado para manos no expertas o poco experimentadas. Aviso: dominarlo bien hreflang para poder implementarlo en tu proyecto SEO internacional te va a llevar más tiempo del necesario para leer este artículo.
¿Para qué sirven las etiquetas hreflang?
Las etiquetas hreflang sirven para marcar páginas que tienen un contenido similar pero que están dirigidas a diferentes idiomas y regiones. Las formas comunes de implementar hreflang son las siguientes:
- Para contenido con variaciones regionales como inglés británico o inglés americano.
- Para contenido en diferentes idiomas como español, catalán e inglés.
- Para una combinación de diferentes idiomas y variaciones regionales.
Al usar este código, se especifica a los motores de búsqueda que estas URL pueden tener el mismo contenido en un idioma diferente o en el mismo idioma pero dirigidas a una región diferente.
¿Qué importancia tiene para el SEO?
Dirigir la versión adecuada al idioma de cada usuario mejora la experiencia del usuario y, por lo tanto, permite que menos personas vuelvan a los resultados de búsqueda. La tasa de rebote es menor, se registran más páginas visitadas y el porcentaje de conversiones también es mayor. Todo ello se traduce en clasificaciones más altas y en menos clientes potenciales en la página de nuestra competencia.
A nivel SEO, hreflang también evita el problema del contenido duplicado. Si se tiene el mismo contenido en inglés en diferentes URL dirigidas al Reino Unido, Estados Unidos y Australia, la diferencia en estas páginas puede ser tan pequeña como simplemente el cambio de moneda. Sin hreflang, es posible que Google no comprenda lo que se intenta hacer y lo vea como contenido duplicado. Con hreflang, se deja claro al motor de búsqueda que es el mismo contenido, simplemente optimizado para diferentes personas.
¿Cómo funciona hreflang?
En una implementación completa de hreflang, cada URL indica qué otras variaciones están disponibles. Cuando un usuario busca, Google realiza el siguiente proceso:
- Determina que quiere mostrar una URL.
- Comprueba si esa URL tiene etiquetas hreflang.
- Presenta los resultados con la URL más adecuada para ese usuario.
“La ubicación actual del usuario y su configuración de idioma
determinan la URL más adecuada”.
Y para los casos en los que un usuario tiene varios idiomas predeterminados en su navegador, el orden de prioridad en el que estén configurados determinará el idioma de los resultados de búsqueda.
Opciones de implementación arquitectónica
A pesar del detalle con el que se pueden configurar las etiquetas hreflang, es mejor no ser demasiado específico, en según qué casos. ¡Vemos un ejemplo!
Supongamos que tienes tres tipos de páginas, con los siguientes atributos hreflang:
- De-de dirigida a hablantes de alemán de Alemania.
- De-at dirigida a hablantes de alemán en Austria.
- De-ch dirigida a hablantes de alemán en Suiza.
Sin embargo, ¿cuál de estos tres resultados debería mostrar Google a un usuario que busca en alemán en Bélgica? La primera opción parece la más lógica. Para estos casos, lo adecuado sería sustituir el atributo de-de por simplemente de.
Igualmente, también podemos recurrir al atributo x-default para especificar dónde debe enviarse un usuario si ninguno de los idiomas que ha especificado en sus otros enlaces hreflang coincide con la configuración de su navegador. En un elemento de enlace se ve así:
<link rel="alternate" href="http://example.com/" hreflang="x-default" />
Opciones de implementación técnica
Hay tres formas de implementar hreflang:
- Usando elementos de enlace en <head>.
- Usando encabezados HTTP.
- Usando un mapa del sitio XML.
Cada uno tiene sus usos.
1.- Elementos de enlace HTML hreflang en su <head>
Es suficiente con agregar un código como este 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 necesita estar vinculada con otra variación, estas implementaciones pueden ralentizar el tiempo de carga de un sitio web. Si tiene 20 idiomas, elegir elementos de enlace HTML significaría agregar 20 elementos de enlace a cada página. Además, el CMS tendrá que hacer varias llamadas a la base de datos para generar todos estos enlaces. Por tanto, este sistema de etiquetado no es recomendable para sitios grandes.
2.- Encabezados HTTP hreflang
Los encabezados HTTP son para archivos PDF y otros contenidos no HTML a optimizar. Se muestran así:
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"
Al igual que ocurre con los elementos de enlace en el <head>, los encabezados HTTP agregan mucha sobrecarga a cada solicitud.
3.- Una implementación de mapa de sitio XML hreflang
También se pueden implementar las etiquetas hreflang utilizando el formato de mapas del sitio XML, con el atributo xhtml: link para agregar la anotación a cada URL.
Este es el marcado necesario para una sola 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>
Con este método, cada URL tiene un atributo de hreflang que se refiere a sí mismo y devuelve enlaces a las otras URL adecuadas. Su implementación es más complicada y detallada que las otras dos opciones, pero no agrega peso de página adicional y no requiere muchas llamadas de base de datos.
Verificar que hreflang funciona adecuadamente
Para asegurarnos de que nada interrumpe la implementación y el mantenimiento de las etiquetas hrefland, es muy importante tener en cuenta:
- Cuando se elimina una página, verificar si sus contrapartes están actualizadas.
- Cuando se redirige una página, cambiar las URL de hreflang en sus contrapartes.
Esto, junto a una auditoría periódica, debería garantizar el buen funcionamiento de estas etiquetas.
Y para aquellos proyectos en los que aún no está decidido si es conveniente implementar hreflang sobre todo el sitio, se recomienda comenzar únicamente por la página de inicio, así los usuarios que busquen por marca siempre llegarán a la landing page más adecuada.
Configurar hreflang es un proceso bastante técnico, donde son muchos los factores que entran en juego Sin embargo, tanto Google como tu tráfico orgánico te recompensarán.
