Cómo usar Hreflang para SEO

Cómo usar Hreflang para SEO

Si tu sitio web está dirigido a usuarios de todo el mundo (lo que significa que estás involucrado en el aspecto internacional del SEO), es posible que desees traducirlo a diferentes idiomas para atender a diferentes países o regiones. Si bien esto es bueno para tus usuarios, puede que no sea así para los motores de búsqueda.

Simplemente publicar versiones traducidas de tu contenido en diferentes URL no ayudará a Google a comprender la relación entre las URL y cómo está configurado tu sitio. Esto no es óptimo y puede hacer que tus páginas no posicionen tan bien como podrían.

Afortunadamente, hay una solución relativamente simple para esto: hreflang.

¿Qué es hreflang y qué hace?

La etiqueta hreflang es una metaetiqueta HTML que especifica el idioma y (opcionalmente) la región geográfica relevante para una página. Hreflang le dice a los motores de búsqueda dónde encontrar el contenido en otros idiomas.

Cuando aplicada correctamente, cada etiqueta hreflang le dice a los bots que leen la página dónde encontrar el contenido apropiado para los usuarios que no hablan el idioma de la página principal. Cuando alguien realiza una búsqueda, Google (Bing no usa la etiqueta hreflang) sigue los siguientes pasos:

  1. Decide dónde clasificar una URL en función de su algoritmo
  2. Comprueba el código de una página, buscando etiquetas hreflang
  3. Analiza la ubicación actual del usuario (según la dirección IP) y la configuración de idioma
  4. Muestra la URL más relevante en el SERP y envía al usuario (si hace clic) a esa URL

La razón por la que el motor de búsqueda busca etiquetas hreflang es para que pueda servir la versión correcta de una página en función de la configuración de idioma del usuario. En resumen, así es como Google sabe qué URL mostrar para un hispanohablante y cuál usar para un angloparlante. También es la forma en que sabe qué versión de español mostrarle a alguien en España y a alguien en Latinoamérica.

¿Cuándo debo usar hreflang?

Hay 3 situaciones en las que debes usar hreflang.

  • Cuando traduces solo la plantilla de la página a idiomas alternativos, pero no el contenido principal de la página. Un ejemplo de esto sería una página que presenta contenido generado por el usuario, como foros y tableros de mensajes.

  • Cuando tienes páginas en el mismo idioma utilizando variaciones regionales. Por ejemplo, tienes versiones diferentes en inglés de una página para EE. UU., Canadá, Reino Unido e Irlanda.

  • Cuando hayas traducido completamente el contenido de tu sitio web a varios idiomas. Por ejemplo, WooRank está disponible en seis idiomas: inglés, español, francés, portugués, neerlandés y alemán. Cuando nuestro contenido esté disponible en dos o más de esos idiomas, agregaremos etiquetas hreflang a las páginas correspondientes.

Para ver cómo WooRank usa hreflang, simplemente visita nuestra página de inicio. Haz clic derecho en la página y luego clic en "Ver código fuente". Luego, puedes hacer una simple búsqueda de "hreflang" y verlo en acción:

WooRank hreflang tags in action

Cómo agregar etiquetas Hreflang

Agregar etiquetas hreflang a una página

Si tienes una página HTML, la etiqueta hreflang va en el <head> así:

<link rel="alternate” hreflang=”en” href=”https://www.ejemplo.com”>

Para páginas que no son HTML, como las versiones en PDF, agrega la anotación hreflang en el encabezado HTTP:

Link: <https://www.ejemplo.com/>; rel="alternate”; hreflang=”en”

En los ejemplos anteriores, la parte hreflang="en” de esas etiquetas le dice a Google que la URL que figura en la lista es la versión en inglés de la página. Por lo tanto, mostraría esa URL a los usuarios que tienen inglés establecido como idioma en su navegador y aquellos en países de habla inglesa. Si tuvieran hreflang="es", Google mostraría esa URL para los hispanohablantes.

Al agregar etiquetas hreflang a tus páginas, debes incluir un enlace a cada versión de la página, incluida una referencia propia. Por lo tanto, si tienes una página en inglés, español y francés, cada página tendrá las tres etiquetas:

<link rel="alternate” hreflang=”en” href=”https://www.ejemplo.com”>
<link rel="alternate” hreflang=”es” href=”https://www.ejemplo.com/es”>
<link rel="alternate” hreflang=”fr” href=”https://www.ejemplo.com/fr”>

Puedes agregar geografías a sus etiquetas hreflang agregando un código de país después del código de idioma en el atributo hreflang. Entonces, si el sitio web anterior está dirigido a diferentes países con cada idioma, se verían así:

<link rel="alternate” hreflang=”en-us” href=”https://www.ejemplo.com”>
<link rel="alternate” hreflang=”es-mx” href=”https://www.ejemplo.com/es”>
<link rel="alternate” hreflang=”fr-fr” href=”https://www.ejemplo.com/fr”>

Cuando Google vea estas etiquetas, podrá mostrar la versión en inglés a usuarios en los EE. UU., Español a usuarios en México y francés a francófonos en Francia.

Cuando agregues etiquetas hreflang a tus páginas, usa siempre el formato ISO 639-1 para los idiomas y el formato ISO 3166-1 Alpha 2 para países. El valor hreflang siempre debe escribirse en el formato idioma-país, y la orientación geográfica se limita a los países. Google no es compatible con ciudades, regiones o continentes.

Agregar hreflang a un mapa del sitio XML

También puedes agregar la etiqueta hreflang a tu sitemap XML. Agregar tus anotaciones hreflang aquí puede ser doloroso ya que deberás agregar todas las opciones de idioma a cada URL en tu sitemap. Así quedaría el marcado de una sola URL disponible en dos idiomas:

<url>
    <loc>https://www.ejemplo.com</loc>
    <xhtml:link rel=”alternate” hreflang=”en” href=”https://www.ejemplo.com” />
    <xhtml:link rel=”alternate” hreflang=”es” href=”https://www.ejemplo.com/es” />
</url>
<url>
    <loc>https://www.ejemplo.com/es</loc>
    <xhtml:link rel=”alternate” hreflang=”es” href=”https://www.ejemplo.com/es” />
    <xhtml:link rel=”alternate” hreflang=”en” href=”https://www.ejemplo.com” />
</url>

No es un gran problema cuando tienes una página con solo una alternativa, pero puede volverse arduo rápidamente a medida que el sitio crece, agregando más páginas e idiomas. Sin embargo, hay algunas buenas razones para agregar anotaciones hreflang a tu mapa del sitio XML:

  • Los sitemaps ayudan a los motores de búsqueda a encontrar y rastrear sitios. Agregar URLs alternativas a tu sitemap los ayudará a ser hallados más eficientemente.

  • Evita agregar código extra a la página, reduciendo el tamaño de página. Puede no parecer mucho, pero incluso un segundo de tiempo de carga podría costarte ventas. Cada instante cuenta.

  • Mantener todos tus enlaces hreflang en un solo lugar puede ayudar a facilitar la gestión. Actualizar un montón de páginas diferentes es más difícil que cambiar un sitemap.

Un sitemap XML es un archivo de texto utilizado para enlistar todas las URLs de un sitio. Puede incluir información extra (metadata) sobre cada URL, con detalles de cuándo fueron actualizados por última vez, qué tan importantes son y si hay otras versiones de la URL creada en otros idiomas. Todo esto se hace para ayudar a los motores de búsqueda a rastrear tu sitio más eficientemente, brindándoles cualquier cambio que hagas directamente, incluyendo cuando una nueva página es agregada o una antigua página es eliminada.

Usar etiquetas hreflang y canonical en conjunto

Las etiquetas hreflang no son sustitutas de las etiquetas canonical. De hecho, pueden y deben ser usadas en conjunto. Simplemente agrega la etiqueta canonical a cada versión de la página, apuntándose a sí misma. Entonces, para un sitio en tres idiomas, el marcado en inglés debería verse así:

<link rel=”canonical” href=https://www.ejemplo.com/”>
<link rel=”alternate” hreflang=”en-us” href=”https://www.ejemplo.com”>
<link rel=”alternate” hreflang=”es-mx" href=”https://www.ejemplo.com/es”>
<link rel=”alternate” hreflang=”fr-fr” href=”https://www.ejemplo.com/fr”>

Luego, deberías hacer lo mismo para la página en español:

<link rel=”canonical” href=https://www.ejemplo.com/es”>
<link rel=”alternate” hreflang=”en-us” href=”https://www.ejemplo.com”>
<link rel=”alternate” hreflang=”es-mx” href=”https://www.ejemplo.com/es”>
<link rel=”alternate” hreflang=”fr-fr” href=”https://www.ejemplo.com/fr”>

Y nuevamente para la página en francés:

<link rel=”canonical” href=https://www.ejemplo.com/fr”>
<link rel=”alternate” hreflang=”en-us” href=”https://www.ejemplo.com”>
<link rel=”alternate” hreflang=”es-mx” href=”https://www.ejemplo.com/es”>
<link rel=”alternate” hreflang=”fr-fr” href=”https://www.ejemplo.com/fr”>

Bastante simple, pero puede resultar fácil equivocarse.

Pretty simple, but it can be easy to get wrong.Hay dos errores principales que la gente comete aquí:

  • Uso incorrecto del código de país, generalmente usando "uk" para el Reino Unido. El código correcto en el formato ISO 639-1 es "gb". Tampoco es inusual que las personas cambien accidentalmente el idioma y los valores del país.

  • Uso de URLs no canónicas en la etiqueta hreflang. Hreflang y la etiqueta canonical trabajan juntas para explicar cómo funciona tu sitio a los motores de búsqueda. El uso de URL no canónicas en cualquiera de las etiquetas confundirá a Google e interrumpirá su implementación.

¿Cómo impacta el SEO?

Hreflang tiene dos usos principales cuando se trata de SEO. Lo primero que hreflang hará por tu SEO es ayudar a reducir el impacto del contenido duplicado. Hreflang le dice a Google que existe una relación entre las dos páginas y ayuda a sus robots a interpretar la relación entre las dos, en lugar de ver dos copias del mismo contenido.

Lo segundo es que te ayudará a asegurarte que los usuarios reciben el contenido más adecuado. Si tienes un sitio en varios idiomas, o que apunta a varias geografías, probablemente hayas invertido mucho tiempo y esfuerzo en adaptar tu contenido y estrategia de marketing a estas audiencias. Sin una etiqueta hreflang, Google terminará mostrando una página en inglés a un usuario que solo habla en español, o mostrará contenido americano a un usuario en Australia.

Esto no es el fin del mundo, pero causará que la tasa de rebote de tu sitio aumente, lo cual afectará tu porcentaje de conversiones. La mayoría de las personas no empleará tiempo para buscar la versión de idioma correcta de una página, no importa qué tan prominentemente lo muestres.

Páginas internacionales genéricas

Hay una forma más de usar hreflang para moldear tu SEO: x-default. Este es un valor especial de hreflang que le dice a los motores de búsqueda qué página servir a un usuario que no coincida con ninguno de los idiomas especificados en los otros enlaces hreflang. Básicamente, x-default especifica una landing page internacional. Por lo cual, en nuestro ejemplo original de una página en tres idiomas:

<link rel=”alternate” hreflang=”en-us” href=”https://www.ejemplo.com”>
<link rel=”alternate” hreflang=”es-mx” href=”https://www.ejemplo.com/es”>
<link rel=”alternate” hreflang=”fr-fr” href=”https://www.ejemplo.com/fr”>

Ninguna de las URLs especificadas son realmente relevantes a un usuario que no habla inglés, español o francés. Agregar el atributo x-default de la siguiente manera: <link rel="alternate” href=”https://www.ejemplo.com” hreflang=”x-default” /> le dirá a Google que muestre www.ejemplo.com a todo el resto de los usuarios. En el caso del ejemplo de más arriba, esa página debería ser mostrada para todos aquellos que no hablen inglés, español o francés en el mundo.

X-default es realmente útil para los sitios que usan páginas internacionales que solicitan a los usuarios que indiquen su locación o idioma preferido, páginas que detectan la locación de los usuarios a través del encabezado Accept-Language o que solo quieren segmentar de acuerdo a idiomas o países específicos.

Errores comunes de hreflang

Hreflang es, en última instancia, bastante sencillo. Sin embargo, dado que necesitas agregar una etiqueta hreflang a cada página traducida, incluidos los enlaces a cada versión, existen muchas oportunidades para cometer errores con hreflang.

Tener errores de hreflang en tus páginas o en tu mapa de sitio puede hacer que Google se confunda al rastrear tu sitio, lo que hace que el contenido se muestre a la audiencia incorrecta.

Estos son algunos de los errores más comunes de hreflang y cómo solucionarlos.

Usar el código de idioma o país erróneos

Uno de los errores más comunes que la gente comete al usar hreflang es usar valores erróneos de país o idioma. Como mencionamos anteriormente, Google utiliza el formato ISO 639-1 para los idiomas y el formato ISO 3166-1 Alpha 2 para los países.

Posiblemente el error más común es cuando se intenta segmentar a usuarios en el Reino Unido. El código ISO para el RU es gb, pero muchas personas usan uk, sigla de "United Kingdom" en inglés.

En las abreviaciones de los códigos de idioma, un error común es usar eng en vez de en para inglés, ch en vez de zh para chino, o algo diferente a es para el contenido en español.

Los errores tipográficos en los códigos ISO pueden también resultar en Google mostrando contenido erróneo basado en el idioma. Accidentalmente escribir fi en vez de fr puede resultar en que usuarios de Finlandia reciban contenido en francés.

Referencias incorrectas o faltantes

Hreflang consiste en referenciar las URLs correctas. Como hemos visto antes, cada versión de tu contenido tiene que referenciar a todas las otras versiones, incluyéndose a sí misma.

Las referencias incorrectas o faltantes (también llamadas etiquetas de retorno), son unos de los errores más comunes que hacen las personas al implementar hreflang.

Olvidar la etiqueta hreflang autorreferente es probablemente el más común de los errores. Sin embargo, también es común que los administradores de sitios web descarten las etiquetas de retorno de una página y no de otra.

A veces las personas incluirán referencias inconsistentes, por ejemplo, si una página referencia de la siguiente manera:

<link rel="alternate” hreflang=”en-us” href=”https://www.ejemplo.com”>
<link rel="alternate” hreflang=”es-mx” href=”https://www.ejemplo.com/es”>
<link rel="alternate” hreflang=”fr-fr” href=”https://www.ejemplo.com/fr”>

Pero el código para https://www.ejemplo.com/es incluye este marcado:

<link rel="alternate” hreflang=”en-us” href=”https://www.ejemplo.com/page3”>
<link rel="alternate” hreflang=”es-mx” href=”https://www.ejemplo.com/es/page3”>
<link rel="alternate” hreflang=”fr-fr” href=”https://www.ejemplo.com/fr/page3”>

Estas referencias incorrectas evitan que Google comprenda cómo se relaciona el contenido y que indexe las páginas correctamente.

No usar guiones

Los códigos de idioma y país deben estar separados por un guión para que se puedan leer correctamente. Las personas a veces usan guiones bajos, comas, punto y coma u otros signos de puntuación entre ellos.

Esto es algo que deberás verificar tú mismo, ya que no puedes confiar en que Google Search Console te avise de estos errores.

Vincular a páginas redirigidas, rotas o inexistentes

Vincular a páginas que devuelven 4xx, 5xx o códigos de estado HTTP que no sean 2xx es casi siempre un problema. Y los enlaces hreflang no son diferentes.

Si Google no puede acceder a la página vinculada en la etiqueta hreflang, no podrá rastrear, indexar y servir ese contenido a la audiencia correcta.

Y aunque los enlaces relativos técnicamente no cuentan como rotos, siguen siendo errores en las etiquetas hreflang. Todos los enlaces hreflang deben ser absolutos (es decir, incluyen el dominio de tu sitio web en la URL).

Intercambiar códigos de idioma y país

Para ser válidos, los códigos hreflang deben ser "idioma-país". Poner el país antes que el idioma, como en us-en en lugar de en-us hará que su etiqueta hreflang sea inválida y probablemente ignorada por Google.

Cómo rastrear errores de hreflang

La mejor manera de arreglar errores de hreflang es chequear el reporte de segmentación internacional en Google Search Console.

Google Search Console international targeting report to track hreflang errors

Este reporte aún no ha sido incluido en la nueva Search Console, pero todavía puedes verlo en la versión antigua.

Guías recientes