Temas del artículo
¿Qué es el atributo Hreflang y por qué debería importarte?
El Hreflang es un atributo que le dice a los motores de búsqueda qué versión de tu página deben mostrar a los usuarios según su idioma y región. Parece simple pero es realmente importante y crucial para la correcta implementación de contenido multilingüe y la orientación geográfica de la web.
Equivocarse al implementarlo puede acabar en falta de tráfico, tasa de rebote o bajada de ventas… es la forma de encauzar a tu público geográfico a tu estrategia digital. Además, es importante para cumplir con normativas locales o requisitos internacionales técnicos o legales en la web.
Por supuesto y en contexto SEO, al especificar las versiones regionales del contenido evitas que Google y otros motores confundan las páginas con contenido duplicado.
¿Cómo se implementa el atributo Hreflang?
Implementar el atributo Hreflang es muy sencillo, la complicación real está en redactar sus caracteres sin descuidos y tener bien planificada todas las versiones de la página que tienes en diferentes idiomas y regiones. ( Por ejemplo, una versión en inglés para EE. UU. (en-us), otra en inglés para el Reino Unido (en-gb), y una en español para España (es-es)…)
Sigue éstos pasos:
- Añade una etiqueta <link> en la sección <head> de cada página, especificando el idioma y la región siguiendo ésta estructura:
<link rel=”alternate” href=”https://ejemplo.com/” hreflang=”CODIGO IDIOMA” />
Aquí tienes un ejemplo de cómo implementar Hreflang para diferentes versiones de una página:
<head>
<link rel=”alternate” href=” https://ejemplo.com/” hreflang=”en-us” />
<link rel=”alternate” href=” https://ejemplo.com/uk/” hreflang=”en-gb” />
<link rel=”alternate” href=” https://ejemplo.com/es/” hreflang=”es-es” />
<link rel=”alternate” href=” https://ejemplo.com/fr/” hreflang=”fr-fr” />
</head>
- Que cada página incluya etiquetas Hreflang para todas las versiones de la página. Da más seguridad para que los motores de búsqueda puedan entender la relación entre versiones de la página. (Por ejemplo, la versión en inglés para EE. UU. (en-us) que incluya etiquetas para las versiones del Reino Unido (en-gb), España (es-es), Francia (fr-fr), y viceversa…)
- Especifica una versión predeterminada cuando no se cumplan las condiciones de idioma o región usando el atributo x-default.
El valor x-default se usa para especificar a dónde debería ser dirigido el usuario cuando el contenido del sitio sea relevante para su intención de búsqueda pero ninguno de los idiomas definidos en el hreflang coincida con sus preferencias o términos de búsqueda.
<link rel=”alternate” href=” https://ejemplo.com/” hreflang=”x-default” />
Es una opción para dirigir el tráfico de usuarios que no tienen configurado, ni se les puede deducir, ninguno de los idiomas establecidos en el hreflang
- Además de las etiquetas en el HTML es más que recomendable incluir los atributos Hreflang en los sitemaps, sobretodo si tienes una web grande con muchas versiones regionales. Sigue éste formato:
<url>
<loc>https://www.ejemplo.com/</loc>
<xhtml:link rel=”alternate” hreflang=”en-us” href=”https://www.ejemplo.com/” />
<xhtml:link rel=”alternate” hreflang=”en-gb” href=”https://www.ejemplo.com/uk/” />
<xhtml:link rel=”alternate” hreflang=”es-es” href=”https://www.ejemplo.com/es/” />
<xhtml:link rel=”alternate” hreflang=”fr-fr” href=”https://www.ejemplo.com/fr/” />
<xhtml:link rel=”alternate” hreflang=”x-default” href=”https://www.ejemplo.com/” />
</url>
Recuerda utilizar Google Search Console para verificar que las etiquetas están correctamente implementadas y que los motores de búsqueda las hayan interpretado sin errores.
¿Qué riesgos tiene implementar con errores el atributo Hreflang?
El atributo Hreflang en siempre un detalle importante; si lo implementas con fallos o mal redactado podrás generar una serie de problemas que afectan negativamente tanto al SEO como a la experiencia del usuario.
Si se configura incorrectamente, los motores de búsqueda pueden mostrar la versión equivocada del contenido afectando en la relevancia de los resultados de búsqueda y perdiendo tu principal tráfico orgánico.
Puede generar indexación incorrecta de las páginas. Por ejemplo, si tu empresa tiene versiones en inglés y español de la web Google podría mostrar la versión en español a usuarios que buscan en inglés y viceversa… Además de posibilidad de contenido duplicado que puede perjudicar el pagerank.
Y, por supuesto; problemas de localización y usabilidad. Los usuarios que son redirigidos a una versión incorrecta pueden encontrar tanto el contenido como tu localización y la de tus productos.
Aquí tienes una lista de los 10 errores más comunes y menos conocidos:
- Falta de enlaces recíprocos: Cada URL debe referenciar a todas las versiones alternativas, incluida a sí misma.
Si la página A indica que la página B es la versión alternativa en otro idioma mediante el atributo hreflang pero la página B no lo hace hacia la página A puede causar confusión a los buscadores.
Sin enlaces recíprocos los motores de búsqueda pueden no entender correctamente la relación entre páginas. Además, con enlaces recíprocos pueden indexar y mostrar con prioridad la versión más relevante de una página para el usuario según su idioma y zona geográfica.
Y dentro de la relación de enlazado; cada URL también debe referenciar a sí misma y que cada página de un conjunto de páginas alternativas incluya enlaces hreflang que apunten a la vigente.
- Errores en valores de lenguaje y región: Los valores de hreflang deben seguir el formato correcto (por ejemplo, es-ES para español de España).
Errores como es-es (en minúsculas) o valores incorrectos (es-UK que no existe) generarán fallos.
- No definir la etiqueta x-default: No incluir una etiqueta x-default puede provocar que los motores de búsqueda no sepan qué versión mostrar a usuarios sin coincidencia específica de idioma o región.
La etiqueta x-default indica a los motores de búsqueda cuál es la página que se debe mostrar a los usuarios cuya configuración de idioma o región no coincide con ninguna de las versiones específicas indicadas en los atributos hreflang.
La etiqueta x-default actúa como una señal para los motores de búsqueda de qué página es la que deben dirigir a los usuarios cuando ninguna de las versiones específicas está concretada.
Un ejemplo; si tienes versiones de tu página en inglés (en) y español (es) y quieres implementar la etiqueta x-default para la versión en inglés tan sólo deberías mostrar:
Para la versión en español:
<link rel=”alternate” hreflang=”en” href=”https://www.ejemplo.com/en” />
<link rel=”alternate” hreflang=”es” href=”https://www. ejemplo.com/es” />
<link rel=”alternate” hreflang=”fr” href=”https://www. ejemplo.com/fr” />
<link rel=”alternate” hreflang=”x-default” href=”https://www. ejemplo.com/en” />
Para la versión en inglés:
<link rel=”alternate” hreflang=”en” href=”https://www. ejemplo.com/en” />
<link rel=”alternate” hreflang=”es” href=”https://www. ejemplo.com/es” />
<link rel=”alternate” hreflang=”fr” href=”https://www. ejemplo.com/fr” />
<link rel=”alternate” hreflang=”x-default” href=”https://www. ejemplo.com/en” />
- Implementación solo en el sitemap: Aunque es correcto, también se recomienda incluir las etiquetas hreflang en las páginas HTML para mejor lógica y cobertura.
- URLs no válidas o rotas: Las URL mostradas en los atributos hreflang deben ser válidas y accesibles. URLs rotas o redirigidas generarán confusión para los motores de búsqueda.
- Falta de coherencia entre las páginas canónicas y hreflang: Asegurarse de que las URLs en las etiquetas hreflang correspondan a las versiones canónicas correctas de las páginas.
Los buscadores utilizan las etiquetas hreflang para entender la relación entre las versiones en diferentes idiomas o regiones de la página pero también la canonical para identificar la versión principal de la página.
Cuando las URLs en las etiquetas hreflang coinciden con las versiones canónicas, los motores de búsqueda indexarán y mostrarán la versión adecuada de la página con más precisión y relevancia.
La falta de coherencia puede confundir a los motores de búsqueda, llevando a problemas de indexación mostrando versiones incorrectas de la página.
Un ejemplo; si estás implementando el hreflang sobre una ficha de producto en versión de página en inglés:
<link rel=”canonical” href=”https://www.ejemplo.com/us/product” />
<link rel=”alternate” hreflang=”en-us” href=”https://www.ejemplo.com/us/product” />
<link rel=”alternate” hreflang=”es-es” href=”https://www.ejemplo.com/es/product” />
<link rel=”alternate” hreflang=”x-default” href=”https://www.ejemplo.com/us/product” />
- No actualización de hreflang tras cambios de URL: Si se cambian las URL de las páginas (por ejemplo, debido a una reestructuración del sitio) recuerda actualizar todas las referencias hreflang para evitar enlaces rotos.
- Demasiadas etiquetas hreflang en una página: Aunque es posible tener muchas etiquetas hreflang… demasiadas pueden complicar el proceso de rastreo e indexación. Nunca más de 100 por página.
- Configuraciones regionales duplicadas: Usar hreflang para apuntar a varias páginas que contienen el mismo contenido puede confundir a los buscadores (Por ejemplo, apuntar tanto es como es-ES a la misma página).
En concreto, pueden generar dificultades para determinar cuál es la versión más relevante de la página a indexar y visualizar versiones incorrectas de la página a usuarios de diferentes regiones o idiomas.
Como consecuencia.. indicadores como la tasa de clics (CTR), el tiempo en la página y la tasa de rebote pueden diluirse si el tráfico se distribuye entre múltiples versiones duplicadas de la página.
Tan sólo asegúrate de que cada versión regional o de idioma de una página tenga contenido único y relevante para su público concreto.
- Incompatibilidad con AMP: Para sitios que usan AMP (Accelerated Mobile Pages) sería importante asegurarse de que las versiones AMP también incluyan las etiquetas hreflang correctas y que las versiones canónicas y AMP se refieran entre sí sin errores.
Es importante que las versiones canónicas y AMP se refieran entre sí por etiquetas <link rel=”amphtml”> y <link rel=”canonical”>. Es una forma segura para que los motores de búsqueda y los usuarios puedan navegar sin problemas entre las versiones.
Si buscas priorizar tu página en inglés y con versiones AMP:
<link rel=”alternate” hreflang=”en” href=”https://www.ejemplo.com/en” />
<link rel=”alternate” hreflang=”es” href=”https://www.ejemplo.com/es” />
<link rel=”alternate” hreflang=”fr” href=”https://www.ejemplo.com/fr” />
<link rel=”alternate” hreflang=”x-default” href=”https://www.ejemplo.com/en” />
<link rel=”canonical” href=”https://www.ejemplo.com/en” />
En conclusión...
Implementar correctamente el atributo hreflang mejorará la visibilidad dela web en sus diferentes idiomas… pero sobretodo evitará la competencia entre versiones duplicadas ayudando, también, a indexar y mostrar las versiones adecuadas.
También desde una perspectiva de experiencia del usuario, el atributo hreflang facilita la comprensión y la navegación… aumenta la probabilidad de que los usuarios permanezcan en la web interactuando y generando conversiones como compras o suscripciones.
El objetivo es cuidar la comunicación desde cero y qué mayor pilar de base para hacerlo que el idioma y las condiciones de context de cada region…