Etiquetas Hreflang: La guía definitiva

¿Qué son las etiquetas Hreflang?

Hreflang es un código, específicamente, un atributo HTML, que especifica todas las URL en un sitio que utilizan el mismo contenido. El atributo hreflang fue introducido por Google hace más de una década y permite a los usuarios mostrar a los motores de búsqueda la relación entre varias páginas web en varios idiomas. Esto resulta útil cuando se crea contenido para una audiencia específica. Para empresas con múltiples versiones de la misma página web en diferentes idiomas, la etiqueta hreflang comunica estas variaciones a los motores de búsqueda y ayuda a entregar la versión correcta a los usuarios.

Por ejemplo, si alguien busca "Ikea" en Google en los EE. UU., verá este resultado:

Mientras que la misma consulta realizada por un buscador en Canadá arrojaría este resultado:

¿Por qué todo el alboroto? La etiqueta hreflang permite que los motores de búsqueda brinden resultados a los usuarios en función de su preferencia de país e idioma, lo que hace que el significado de la etiqueta hreflang sea invaluable: optimiza la experiencia del usuario y conduce a mejores clasificaciones de búsqueda. ¿Cómo es eso de ganar-ganar?

¿Por qué Hreflang es importante para el SEO?

Todo se reduce a resultados personalizados. Todo el arduo trabajo de traducir una página web a varios idiomas se pierde si no se dirige al usuario a los resultados personalizados para él. En resumen, hreflang SEO permite que los motores de búsqueda proporcionen a los usuarios la versión más adecuada de la página web de una empresa en función de su idioma y ubicación. ¿Tiene una página que está optimizada para las preferencias particulares de un usuario? No solo quieres que aterricen allí, sino que también quieres que se queden, por varias razones, y las etiquetas hreflang SEO son la forma de hacerlo.

La implementación de esta práctica mejora la experiencia del usuario, minimiza el rebote a los resultados de búsqueda y genera clasificaciones más altas. (Si al principio no tiene éxito, inténtelo, inténtelo de nuevo no es necesariamente un proverbio útil cuando navega por búsquedas basadas en la web). El objetivo aquí no es aumentar el tráfico, sino ofrecer el contenido correcto a los usuarios correctos, que desean retornos rápidos y confiables. Las etiquetas Hreflang son la clave para lograr estos resultados matizados.

¿Necesitas otra razón? El uso de un hreflang erradica el problema del contenido duplicado. Imagine que su empresa ofrece el mismo contenido en inglés en diferentes URL dirigidas a EE. UU. y Canadá; las diferencias probablemente sean mínimas y se reflejen en los detalles de la moneda (USD versus CAD) y la jerga (sistema imperial versus métrico).

Una etiqueta hreflang ayuda a los motores de búsqueda a reconocer y comprender la relación entre estas páginas y la audiencia específica para la que se creó cada una. Sin hreflang, Google podría verse inclinado a ver estas páginas como contenido duplicado y devolver solo uno de los resultados; con hreflang, se comunica muy claramente al motor de búsqueda que, aunque el contenido es (en gran medida) el mismo, está optimizado para diferentes poblaciones. ¿Qué tal eso para una pluma en tu gorra (o touque, para nuestros amigos canadienses)?

Estos detalles son importantes, así que sigue leyendo para obtener más información.

¿Qué aspecto tienen las etiquetas Hreflang?

Las etiquetas Hreflang son simples, consistentes y usan la siguiente sintaxis:

 <enlace rel=“alternativo” hreflang=“x” href=“https://www.example.com/nueva-página” />

Este formato comunica que la página vinculada es una versión alternativa de la página actual, que aparece en el idioma "x". Las etiquetas Hreflang sirven como señales para los motores de búsqueda, no como directivas. En otras palabras, el atributo hreflang indica al motor de búsqueda que un usuario que realiza una consulta en el idioma "x" preferirá este resultado a una página con contenido muy similar en el idioma "y". ¿Otra diferencia entre señales y directivas? Es posible que Google no reconozca los atributos hreflang si se considera incorrecto, lo que da como resultado que otros factores de SEO anulen el atributo hreflang, lo que hace que una versión alternativa de la página de su empresa tenga una clasificación más alta que la mejor versión.

Uso de Hreflang HTML

Para sitios web que han sido traducidos a varios idiomas, construir una etiqueta hreflang es tan simple como 1-2-3. Cada uno de estos pasos utiliza la sintaxis mencionada anteriormente (<link rel=“alternate” hreflang=“x” href=“https://www.example.com/new-page” />) como base.

1. El atributo hreflang debe contener un valor válido que consiste en el idioma; esta información se comunica en un código de dos letras llamado formato ISO 639-1. Si quisiera traducir la página de ejemplo al portugués, por ejemplo, se vería así:

    <link rel=“alternate” hreflang=“pt” href=“https://example.com/portugese-version” />

   La región es opcional y, si se utiliza, debe estar en formato ISO 3166-1 Alpha 2. Aquí hay dos etiquetas diferentes que podría utilizar para dirigirse a hablantes de portugués en Portugal y Brasil, respectivamente:

    PT-PT: <enlace rel=“alternativo” hreflang=“pt-pt” href=“https://example.com/pt/nuestra-página” />
   PT-BR: <enlace rel=“alternativo” hreflang=“pt-br” href=“https://example.com/br/nuestra-página” />

   Los códigos regionales no son necesariamente intuitivos (el código para el Reino Unido es "gb" y no "uk"), ¡así que verifíquelo dos veces! Utilice esta lista para verificar los códigos de idioma y región precisos antes de incrustar información incorrecta en su sitio.

2. Cada URL necesita enlaces de retorno a todas las demás URL, todas las cuales deben apuntar a la versión canónica o preferida de un sitio web determinado. Cuantos más idiomas tenga, más enlaces hreflang necesitará; aunque puede ser tentador limitarlos, es imposible evitar este paso. Además, rel=”alternate” hreflang=”x”markup y rel=”canonical” pueden y deben usarse juntos. Cada idioma debe tener un enlace rel=”canonical” que apunte a sí mismo. A partir de la página de inicio de example.com, se vería así:

    <enlace rel="canonical" href="http://ejemplo.com/">
   <enlace rel="alternativo" href="http://ejemplo.com/" hreflang="pt" />
   <enlace rel="alternativo" href="http://ejemplo.com/pt-pt/" hreflang="pt-pt" />
   <enlace rel="alternativo" href="http://ejemplo.com/pt-br/" hreflang="pt-br" />

   Para obtener más información sobre canonicals, lea Etiquetas canónicas y URL: una guía simple para principiantes.

3. El paso final para la construcción exitosa de hreflang se basa en los autoenlaces. Un atributo hreflang en cada página requiere una referencia a sí mismo y a cualquier página que sirva como alternativa. Google recomienda encarecidamente establecer una página "x-default" que establezca una sola URL como la versión predeterminada que no se dirija a un idioma o región en particular para los visitantes que se encuentren fuera de lo especificado. Si uno visitó la página pt-pt, solo la cambiaría:

    <enlace rel="canonical" href="http://ejemplo.com/pt-pt/">
   <enlace rel="alternativo" href="http://ejemplo.com/"hreflang="pt" />
   <enlace rel="alternativo" href="http://ejemplo.com/pt-pt/"hreflang="pt-pt" />
   <enlace rel="alternativo" href="http://example.com/pt-br/"hreflang="pt-br" />

¡Es mucho para digerir! Pero llegaste hasta aquí, lo que significa que estás listo para el siguiente paso: aprender a implementar etiquetas hreflang.

Implementación de etiquetas Hreflang

Hay tres formas de implementar etiquetas hreflang, y todo se reduce a la ubicación:

1 – Implementación de etiquetas Hreflang usando HTML:

Para aquellos que son nuevos en hreflang, utilizar etiquetas HTML básicas es la forma más fácil y rápida de comenzar. Simplemente agregue las etiquetas hreflang apropiadas (ver arriba) en la etiqueta <head> de su página web.

Ejemplo: el webmaster de example.com quiere que su página de inicio sea accesible para los usuarios de habla inglesa y española en los Estados Unidos; el uso de las siguientes anotaciones en el <head> del HTML de su sitio logra esto:

 <enlace rel="alternate" href="https://www.example.com" hreflang="en-us" />
<enlace rel="alternate" href="https://www.example.com/es" hreflang="es-us" />

Si quisieran mostrar la página de inicio a los usuarios de habla hispana en Venezuela y México, la anotación hreflang se vería así:

 <enlace rel="alternativo" href="https://www.ejemplo.com/ve" hreflang="es-ve" />
<enlace rel="alternativo" href="https://www.ejemplo.com/mx" hreflang="es-mx" />

¿El mayor inconveniente de este método? Hreflang HTML puede volverse desordenado y lento con bastante rapidez. Además, recuerda que hay una diferencia entre los elementos <head> y <header>; el <head> contiene elementos que no aparecerán en la página, en este caso, el atributo hreflang.

2 – Implementación de encabezados HTTP Hreflang:

Para archivos PDF y contenido que no sea HTML en su sitio web, use encabezados HTTP para implementar hreflang. El nombre es un poco engañoso: la implementación no se realiza en la página a través de <head> o <header>. En cambio, todo se hace en el backend de un sitio. El uso de encabezados HTTP no solo especifica el idioma relativo de las variantes del documento, sino que también optimiza este contenido.

Ejemplo: para identificar un documento PDF en su sitio en las versiones en inglés y francés, el enlace que aparece en el encabezado HTTP se verá así:

 Enlace: <http://en.example.com/document.pdf>; rel="alternativo"; hreflang="es", 
<http://fr.ejemplo.com/documento.pdf>; rel="alternativo"; hreflang="en"

¿El mayor inconveniente de este método de implementación? El uso de encabezados HTTP agrega sobrecarga a cada solicitud realizada en su sitio, lo que puede ralentizar la experiencia de navegación del usuario.

3 – Implementando Hreflang en su mapa del sitio XML

La opción final para implementar hreflang es usar el marcado de mapa de sitio XML; esto usa el atributo xhtml:link en XML para agregar la anotación a cada URL.

Si bien hay más de una forma de implementar hreflang en su mapa del sitio XML, recomendamos algo como esto:

Alternativamente, puede usar algunos de los ejemplos a continuación.

Una palabra de precaución: ¡el marcado necesario para una sola URL con un par de variables de idioma/ubicación parecerá largo! Dicho esto, sigue leyendo para conocer los beneficios. (¡Hay muchos!)

Ejemplo:

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

Observe que la tercera URL hace referencia a sí misma; esto especifica que la URL en particular está destinada a en-gb, y especifica otras dos combinaciones de idioma/ubicación. Ahora, implementar ambas URL en el mapa del sitio se vería así:

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

Suponiendo que pueda mirar más allá del mar de texto, notará que solo se cambian las URL dentro del elemento <loc>, ¡todo lo demás permanece igual! Uf. Este método se basa en que cada URL tiene un atributo hreflang autorreferenciado y devuelve enlaces a otras URL.

Parece mucho trabajo, ¿verdad? Por un lado, sí, este método es largo y requiere bastante salida cuando se hace esto para muchas URL. Dicho esto, el beneficio es simple: a los usuarios normales no les molestará este marcado; no se agrega peso de página adicional, y generar este tipo de marcado no requiere muchas llamadas a la base de datos en la carga de la página.

Finalmente, implementar hreflang a través del mapa del sitio XML tiene un gran beneficio: todo se define en un solo archivo. Esto elimina la necesidad de editar varios documentos HTML cada vez que se cambia o elimina una página. Además, cero ralentización del sitio. En otras palabras, ¡hay mucho que gustar!

¿Todavía no está seguro de qué modo de implementación elegir? Para obtener más consejos sobre la arquitectura y la estructura del sitio web, visite las mejores prácticas técnicas de SEO.

Encontrar y solucionar problemas de Hreflang

Ahora que ha implementado con éxito hreflang en su sitio web (¡inserte los cinco virtuales aquí!), el mantenimiento es imprescindible. Ejecutar una auditoría periódica de la implementación elegida garantizará que esté configurada correctamente. La comunicación con las personas de su empresa que se ocupan del contenido del sitio será de gran ayuda: ¡desea que sepan sobre hreflang, para que no interrumpan involuntariamente su implementación!

Vale la pena mencionar aquí dos puntos críticos: si se elimina una página, verifique si sus contrapartes se han actualizado; cuando se redirige una página, cambie las URL de hreflang en sus contrapartes. Suponiendo que usted y su equipo hagan estas cosas de manera consistente y auditen regularmente, debería ser un viaje tranquilo.

Mientras tanto, aquí hay un resumen rápido de los errores de hreflang más comunes y cómo solucionarlos:

1 – Falta la anotación hreflang de autorreferencia

¿Cual es el problema? Es importante usar una etiqueta hreflang autorreferenciada cada vez que agregue una etiqueta hreflang a una página web. Recuerde que Google afirma que "cada versión de idioma debe enumerarse a sí misma, así como a todas las demás versiones de idioma".

Cómo solucionarlo: revise las páginas afectadas y agregue una etiqueta hreflang autorreferenciada a cada una utilizando el método de implementación elegido.

2 – Anotación Hreflang inválida

¿Cual es el problema? Los motores de búsqueda ignoran las etiquetas hreflang no válidas, lo que lleva a que se pasen por alto versiones alternativas de su página web.

Cómo solucionarlo: revise las páginas afectadas y elimine las etiquetas hreflang no válidas y reemplácelas con aquellas que usan formatos de código de ubicación/idioma válidos.

3 – Página referenciada para más de un idioma en hreflang

¿Cual es el problema? Cada pieza de contenido está diseñada para servir a un solo idioma/ubicación de idioma. Dos o más referencias en conflicto confundirán a los motores de búsqueda y harán que se ignoren los atributos hreflang.

Cómo solucionarlo: revise las páginas afectadas e inspeccione las URL que hacen referencia a una página en particular en sus atributos hreflang en busca de errores. Elimine cualquier atributo hreflang incorrecto y deje solo un atributo correcto por idioma.

4 – Falta hreflang recíproco (sin etiqueta de retorno)

¿Cual es el problema? Las etiquetas hreflang son bidireccionales (si la página A se vincula a la página B en las anotaciones hreflang, la página B debe vincular a la página A a cambio).

Cómo solucionarlo: revise las páginas afectadas y agregue etiquetas hreflang bidireccionales donde sea necesario. Nota: el informe de orientación internacional en Google Search Console (que se encuentra en la pestaña "idioma") marcará todas las instancias de etiquetas de devolución faltantes.

Por ejemplo:

5 – Hreflang a no canónico

¿Cual es el problema? Rel=“alternate” hreflang=“x” indica a los motores de búsqueda que muestren la versión traducida (localizada) de una página; El atributo rel=canonical indicará que esta no es la versión autorizada (canónica). Estos atributos contradictorios confundirán a los motores de búsqueda.

Cómo solucionarlo: revise las páginas afectadas y modifique las anotaciones hreflang, para que apunten solo a URL canónicas. Si encuentra una página con una etiqueta canónica no válida, elimínela. Esto garantiza que el motor de búsqueda comprenda y siga correctamente el atributo hreflang.

6 – Discrepancia de lenguaje Hreflang y HTML

¿Cual es el problema? Los motores de búsqueda (aparte de Google) se confunden cuando hay una inconsistencia entre el hreflang declarado y el atributo de idioma HTML para una o más URL; es importante mantener estos dos atributos consistentes entre sí.

Cómo solucionarlo: revise las páginas afectadas y cambie el atributo de idioma HTML para asegurarse de que sigue siendo coherente con el atributo hreflang declarado.

7 -Hreflang a una página rota

¿Cual es el problema? ¡Un motor de búsqueda no puede devolver contenido que no existe! Por lo tanto, los atributos hreflang que apuntan a páginas muertas se pasarán por alto.

Cómo solucionarlo: revise las páginas afectadas y cambie las anotaciones hreflang para asegurarse de que se vinculen a las páginas de trabajo.

8 – Más de una página para el mismo idioma en hreflang

¿Cual es el problema? Cuando una o más URL hacen referencia a dos o más páginas para el mismo idioma (o ubicación de idioma) en anotaciones hreflang, el motor de búsqueda se confunde.

Cómo solucionarlo: revise las páginas afectadas y elimine una de las anotaciones hreflang, de modo que se haga referencia a una sola página para cada idioma.

9 – Falta la anotación hreflang predeterminada de X

¿Cual es el problema? Si bien los atributos x-default hreflang son opcionales, se recomiendan como una mejor práctica de SEO para todas las anotaciones hreflang.

Cómo solucionarlo: revise las páginas afectadas y asegúrese de que cada una tenga un conjunto de atributos hreflang "x-default" que apunte a una página que NO sea específica de un idioma o ubicación en particular.

¿Todavía tienes preguntas? Echa un vistazo a la actualización del algoritmo Core Web Vitals, que describe prácticas de SEO tecnológicas adicionales sobre las que querrás estar al día este año.

Problemas que Google puede ignorar

Ha hecho su parte siguiendo las mejores prácticas; aún así, habrá momentos en que los motores de búsqueda ignoren ciertos problemas. Esto sucede principalmente cuando un motor de búsqueda ve el mismo problema repetidamente y cree que puede tenerse en cuenta por su parte. ¡No te preocupes! Esto es realmente muy útil. Aquí hay un puñado de problemas de etiquetas hreflang que Google realmente "soluciona" por usted:

1. Guión bajo en lugar de un guión: este es un error común y Google lo explica. Cada. Único. Hora.
2. Usar en-UK en lugar de en-GB: Hablamos de esto antes... el hecho de que los códigos regionales no son necesariamente intuitivos. Tenga la seguridad de que Google lo tiene cubierto: el Reino Unido es un código reservado, lo que significa que Google corrige este problema común.
3. Hreflang no tiene una autorreferencia: Google ha declarado recientemente que el hreflang autorreferencial es opcional; dicho esto, sigue siendo una buena práctica.
4. URL relativas versus absolutas: si bien tanto canónicas como hreflang pueden usar rutas relativas, ¡las absolutas son más absolutas! De ahí la recomendación de usarlo cuando sea posible.

Redirección de usuarios: una palabra de precaución

En muchos casos, los sitios web redirigirán a los usuarios en función de una combinación de cookies, dirección IP y/o idioma del navegador; cuidado con la redirección! Para los usuarios, esto puede traducirse en una experiencia frustrante (léase insatisfactoria); para los motores de búsqueda, tratar de indexar su contenido se vuelve problemático. Además, redirigir a los usuarios puede romper las conexiones establecidas necesarias para sus etiquetas hreflang.

Esto es lo que Google tiene que decir sobre la práctica:

No utilice el análisis de IP para adaptar su contenido. El análisis de ubicación de IP es difícil y generalmente no confiable. Además, es posible que Google no pueda rastrear correctamente las variaciones de su sitio. La mayoría de los rastreos de Google, pero no todos, se originan en los EE. UU. y no intentamos variar la ubicación para detectar variaciones del sitio. Utilice uno de los métodos explícitos que se muestran aquí (hreflang, URL alternativas y enlaces explícitos).

Trate a los rastreadores de los motores de búsqueda como lo haría con un usuario de cualquier ubicación. Tratar al bot del motor de búsqueda de manera diferente a como lo haría con un usuario se considera encubrimiento (la práctica de presentar diferentes contenidos o URL a usuarios humanos y motores de búsqueda) es una violación de las Directrices para webmasters de Google.

¿Quiere una solución aprobada que proporcione a los usuarios los resultados que esperaban? Utilice la misma lógica de detección para sugerir una mejor versión de la página para el usuario en un pequeño banner. La única advertencia es que, si es demasiado grande, podría verse como un intersticial (lo que hace que el contenido se oculte total o parcialmente para el usuario).

Consejo profesional de Hreflang

Hay una extensión de Google Chrome que automatiza el proceso de verificar la implementación de hreflang de un sitio. Obtenga información privilegiada sobre este y otros complementos de SEO para Chrome que pueden ayudarlo a administrar el mantenimiento diario de SEO.

Conclusión

Comprender, utilizar y solucionar problemas de hreflang es un requisito para el SEO actual. ¿Quiere estar seguro de que está haciendo todo lo posible para aumentar la visibilidad de su sitio en todos los rincones del mundo? Victorious profundiza para descubrir tendencias culturales locales y patrones de compra que influyen en la búsqueda para determinar la mejor estrategia para su campaña de SEO internacional.

¿Listo para comenzar con una agencia de SEO? Regístrese para su consulta gratuita de SEO hoy y deje que Victorious lo guíe a través del proceso.