ETIQUETA HREFLANG: ¿Qué es y cómo utilizarla?

En el artículo de hoy queremos hablar de la etiqueta Hreflang desde un punto de vista experto o técnico pero trataremos de explicado para que, hasta los usuarios más novatos, entiendan su significado e importancia.

¿Qué es la etiqueta Hreflang o Hreflang Tag?

Lo que se conoce como Hreflang es un atributo del lenguaje HTML que se utiliza para especificar el idioma en el que debe mostrarse una página Web dependiendo de la localización geográfica o idioma que utiliza el usuario. Digamos que si tienes varias versiones de la misma página en distintos idiomas, esta etiqueta es tu manera de decirle a Google (u otros motores de búsqueda) cuál de todas las versiones quieres que muestre al usuario.

Por ejemplo, si buscamos en Google “nike official website” en España, el primer resultado es en Español, por que mi IP es española, pero los siguientes son resultados en inglés debido a que es el idioma en el que he realizado mi búsqueda. Muestra ambas versiones porque encuentra discordancia entre idioma utilizado y localización por IP:

búsqueda en idioma diferente a IP

Sin embargo, si lo buscamos en español con IP española todos los resultados son en español porque coincide el idioma en el que he realizado la búsqueda con la geolocalización de mi IP:

búsqueda mismo idioma que IP

¿Qué función tiene esta etiqueta en SEO?

Principalmente la función del hreflang es mejorar la experiencia de usuario. Además, esta mejora de la UX repercutirá directamente en la conversión, puesto que facilita la comprensión al lector, disminuye la tasa de rebote, aumenta el tiempo en la página y acaba impactando indirectamente como un factor de ranking para Google. Para que nos entendamos, la etiqueta Hreflang acaba siendo un factor de conversión y de posicionamiento. Es muy importante trabajar estas estrategias con una empresa de SEO si no tienes los conocimientos para desarrollarlo por tu cuenta.

Además, es muy interesante cómo “traspasa autoridad” de una versión en un idioma X a un idioma Y. Gary Illyes de Google explicó en una conferencia que si tienes una página que está rankeando y funcionando muy bien en el “Google inglés”, y tienes correctamente implementada la hreflang tag, tu página en español funcionará y rankeará igualmente bien en el “Google español”.

Aunque el buscador más utilizado a nivel mundial es Google, tenemos que tener en cuenta que existen decenas de buscadores distintos y que no para todos se usa la misma etiqueta. Google y Yandex (el buscador ruso) sí que utilizan Hreflang. Bing y Baidu no utilizan estas etiquetas. En su lugar usan el atributo HTML content-language.

Además, este atributo evita problemas de contenido duplicado que tanto odia Google.

¿Para qué sirve este tag?

Google recomienda utilizar hreflang en estos distintos supuestos:

  1. Cuando el contenido principal de la página Web está en un único idioma y se hace una traducción de la plantilla, del área de navegación y del pie de la web.
  2. Cuando el contenido solo está en un idioma pero existen variaciones regionales con contenidos muy parecidos. Por ejemplo, páginas con contenido en inglés dirigido a Reino Unido, Estados Unidos y Australia o en español dirigidas a México, España o Colombia.
  3. Cuando el contenido está traducido al 100 % a distintos idiomas. Este sería el caso de la web de Nike o Apple con versiones de muchísimas lenguas diferentes.
  4. Cuando hay una página de inicio para todos los usuarios a excepción de los visitantes con un idioma específico y/o una afiliación de país. La página web está parcialmente traducida y/o sólo proporciona contenido específico a ciertos usuarios en determinados idiomas y/o regiones. Los demás usuarios serán dirigidos a la página de inicio por defecto.

¿Cómo implementarla en tu sitio web?

Ya hemos visto la parte sencilla, ahora nos toca lo realmente complicado: ¿cómo usar la etiqueta hreflang sin errores? Bueno, empecemos viendo qué pinta tiene.


¿Cómo es su código?

Las etiquetas hreflang usan una estructura simple:

<link rel=”alternate” hreflang=”x” href=”https://holabuenosdias.com/pagina-alternativa” />

Y esto traducido al español significa:

  • link rel=“alternate”: El enlace que aparece en esta etiqueta es una versión alternativa de esta página.
  • hreflang=“x”: Es alternativa porque está en otro idioma y ese idioma es x.
  • href=“https://holabuenosdías.com/pagina-alternativa”: La página alternativa está en esta dirección.

¿Qué debes tener en cuenta sobre este marcado?

Uno de los puntos más importantes y que provoca la mayoría de los errores al utilizar el marcado hreflang es el enlazado bidireccional. Esto quiere decir que si enlazamos la página A a la B con una etiqueta Hreflang, debemos ir a la página B y establecer ese mismo marcado a la página A. Si no lo hacemos, Google no va a entender la arquitectura web y nos va a penalizar para SEO.

Te muestro un ejemplo más claro:

Tenemos una página web que muestra un contenido dirigido únicamente a los usuarios que hablan francés, independiente de su región (fr); otra parte del contenido está dirigido exclusivamente a los usuarios de Canadá que hablan francés (fr-CA); y otra parte del contenido es exclusivo para los usuarios que hablan español (es). Estas partes tienen que estar vinculadas entre sí:

Esquema del marcado hreflang para el contenido fr-es-fr-CA

Todo el contenido debe hacer referencia al contenido que corresponda en las otras páginas (enlaces bidireccionales). En la cabecera (<head>) del documento HTML, el etiquetado hreflang debería tener la siguiente forma:

<link rel=”alternate” href=”http://www.domain.com/” hreflang=”fr” />

<link rel=”alternate” href=”http://www.domain.com/fe-CA/” hreflang=”fr-CA” />

<link rel=”alternate” href=”http://www.domain.com/es/” hreflang=”es” />

El idioma tiene que escribirse en el formato ISO 639-1. El código opcional del país debe estar en el formato ISO 3166-1 Alpha 2. Mucha gente se pregunta si los  ISO-codes deben ir en mayúscula o minúscula. La verdad es que no importa, Google acepta las dos versiones. Sin embargo, es recomendable escribir el ISO-code del idioma en minúsculas y el código de la región en mayúsculas.

¿Qué es X=default o “hreflang x‑default”? ¿Cuándo lo debo usar?

Como comentábamos anteriormente, la etiqueta “x-default” se utiliza cuando no tenemos ninguna versión para el idioma ni región desde la que accede el usuario. Por ejemplo, tenemos una página con versiones en español, italiano, francés e inglés y hay un usuario que accede desde Rusia. O por ejemplo si solo tenemos versiones en inglés y en español y queremos que para el resto de idiomas se muestre en inglés. Si tenemos una etiqueta x-default que indica que cuando entre un usuario que busque en un idioma, y desde una región diferente se le muestre la página en inglés, vamos a conseguir una experiencia de usuario más satisfactoria que si, por ejemplo, se mostrase en español.

Este valor es opcional, pero Google recomienda incluirlo para controlar qué versión se muestra a los usuarios de idiomas que no has especificado. No es necesario especificar un código de idioma en el valor x-default. Por ejemplo:

<link rel=”alternate” href=”http://hellogoodmorning.com/es/” hreflang=”es-US” />

<link rel=”alternate” href=”http://hellogoodmorning.com” hreflang=”en-US” />

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

¿Dónde se coloca?

Y la pregunta del millón… ¿Dónde pongo él código con la etiqueta hreflang? Hay tres lugares distintos en los que puedes configurarlo:

1. Como etiquetas HTML en la cabecera <head> de la página web

Esta es la opción más utilizada en la mayoría de los casos. Para implementar las etiquetas correctamente en esta configuración, tenemos que añadir un código con esta pinta a la sección de cada una de nuestras páginas:

<link rel=”alternate” hreflang=”en” href=”https://hellogoodmorning.com/blog/today-is-the-day/” /> 

<link rel=”alternate” hreflang=”it” href=”https://hellogoodmorning.com/blog/it/oggi-e-il-giorno/” /> 

<link rel=”alternate” hreflang=”es” href=”https://hellogoodmorning.com/blog/es/hoy-es-el-día/” /> 

<link rel=”alternate” hreflang=”x-default” href=”https://hellogoodmorning/blog//today-is-the-day/” />

2. En el sitemap XML

Si la opción que más te gusta es la de utilizar el sitemap de XML debo decirte que estás de suerte si con lo que estás trabajando es web internacional de gran envergadura. Si tu Web tiene contenido en varios idiomas a gran escala, la implementación en HTML conllevaría demasiado esfuerzo y tiempo. Es importante que tengas en cuenta que todas las versiones de diferentes idiomas deben incluirse individualmente en el sitemap especificando las URL correspondientes. Además, cada URL se especifica a través de un elemento xhtml:link que referencia a las otras opciones disponibles:

<?xml version=”1.0″ encoding=”UTF-8″?>

<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″

  xmlns:xhtml=”http://www.w3.org/1999/xhtml”>

  <url>

    <loc>http://holabuenosdias.es/</loc>

    <xhtml:link 

      rel=”alternate”

      hreflang=”es”

      href=”http://holabuenosdias.es/”

    />

    <xhtml:link 

      rel=”alternate”

      hreflang=”it”

      href=”http://holabuenosdias.es/it/”

    />

    <xhtml:link 

      rel=”alternate”

      hreflang=”de”

      href=”http://holabuenosdias.es/de/”

    />

    <xhtml:link 

      rel=”alternate”

      hreflang=”en”

      href=”http://holabuenosdias.es/en/”

    />

  </url>

  <url>

    <loc>http://holabuenosdias.es/it/</loc>

    <xhtml:link 

      rel=”alternate”

      hreflang=”it”

      href=”http://holabuenosdias.es/it/”

    />

    <xhtml:link 

      rel=”alternate”

      hreflang=”es”

      href=”http://holabuenosdias.es/”

    />

    <xhtml:link 

      rel=”alternate”

      hreflang=”de”

      href=”http://holabuenosdias.es/de/”

    />

    <xhtml:link 

      rel=”alternate”

      hreflang=”en”

      href=”http://holabuenosdias.es/en/”

    />

  </url>

  <url>

    <loc>http://holabuenosdias.es/de/</loc>

    <xhtml:link 

      rel=”alternate”

      hreflang=”es”

      href=”http://holabuenosdias.es/de/”

    />

    <xhtml:link 

      rel=”alternate”

      hreflang=”es”

      href=”http://holabuenosdias.es/”

    />

    <xhtml:link 

      rel=”alternate”

      hreflang=”it”

      href=”http://holabuenosdias.es/it/”

    />

    <xhtml:link 

      rel=”alternate”

      hreflang=”en”

      href=”http://holabuenosdias.es/en/”

    />

  </url>

  <url>

    <loc>http://holabuenosdias.es/en/</loc>

    <xhtml:link 

      rel=”alternate”

      hreflang=”en”

      href=”http://holabuenosdias.es/en/”

    />

    <xhtml:link 

      rel=”alternate”

      hreflang=”es”

      href=”http://holabuenosdias.es/”

    />

    <xhtml:link 

      rel=”alternate”

      hreflang=”de”

      href=”://holabuenosdias.es/de/”

    />

    <xhtml:link 

      rel=”alternate”

      hreflang=”it”

      href=”http://holabuenosdias.es/it/”

    />

  </url>

</urlset>

3. En la cabecera HTTP

Si decides introducir el tag en el encabezado HTTP debes hacer referencia a todos los idiomas existentes. Sólo cambian algunas pequeñas cosas en la sintaxis. En el caso de que, por ejemplo, tengas unas guías PDF el código se vería de la siguiente manera:

Link: <http://holabuenosdias.es/downloads/manuals.pdf/>; rel=”alternate”; hreflang=”es”

Link: <http://holabuenosdias.es/it/downloads/manuals.pdf/>; rel=”alternate”; hreflang=”it”

Link: <http://holabuenosdias.es/de/downloads/manuals.pdf/>; rel=”alternate”; hreflang=”fr”

Link: <http://holabuenosdias.es/en/downloads/manuals.pdf/>; rel=”alternate”; hreflang=”en”

¿Cómo puedo saber si he cometido errores?

Independientemente de si es la primera vez que lo haces o ya eres todo un experto, cometerás algún error casi siempre. Es muy importante que revises el trabajo una vez acabado con algún checker plugin para WordPress o alguna web o plataforma que ofrezca este tipo de servicio. Algunos de los problemas más habituales son los siguientes:

  1. No introdujiste la return-tag. No podemos olvidar que las etiquetas hreflang son bidireccionales y deben introducirse en ambas páginas.
  2. Anotación hreflang incorrecta. Esto ocurre cuando tienes URLs con etiquetas con idioma o códigos locales inválidos. Los buscadores ignoran cualquier etiqueta hreflang incorrecta, lo que quiere decir que pueden ignorar versiones alternativas de tu web. Revisa siempre los códigos ISO. Un ejemplo frecuente es la equivocación de “UK” en vez de “GB” para indicar un país en específico de habla inglesa (en). La abreviación de “United Kingdom” podría parecer la correcta pero, sin embargo, el código ISO asignado es la abreviación de “Great Britain”.
  3. No existe anotación de autorreferencia de hreflang. Es importante que cuando estés redactando todos los idiomas en los que está una página recuerdes incluir el propio idioma de esa página también.
  4. Etiqueta hreflang a una URL a no-canónica. Esto es un problema porque la parte del código Rel=“alternate” hreflang=“x” le está indicando a Google que muestre la versión traducida de una página mientras que el atributo rel=canonical le dice de que esa no es la versión que debe mostrar (canónica). Digamos que son atributos contradictorios que confunden al buscador.
  5. La página en la que has introducido la etiqueta está rota. Digamos que Google no va a mostrar a sus usuarios una página que no funciona o que tiene un contenido que no existe.
  6. Página referenciada para más de un idioma en hreflang. Esta advertencia se activa cuando hay URLs que se referencian para más de un idioma. Por ejemplo:
    <link rel=”alternate” hreflang=”en” href=”http://hellogoodmorning.com/page.html” />
    <link rel=”alternate” hreflang=”es” href=”http://hellogoodmorning.com/page.html” />
  7. Inconsistencias entre hreflang y HTML lang. Este problema aparece cuando hay una inconsistencia entre el hreflang declarado y el atributo de idioma HTML que utiliza el buscador que estás utilizando en una o más URLs.
  8. Utilizamos el mismo idioma para más de una página. Esto ocurre cuando tenemos una o más URLs que referencian más de una página para la misma lengua o lengua-localización. Si lo piensas es una acción que no tiene mucho sentido y solo conseguirás confundir a los buscadores.
  9. No tenemos “hreflang x‑default”. No es realmente un problema porque se trata de un atributo opcional. Sin embargo, Google ha recomendado en más de una vez que lo utilicemos y siempre es mejor hacer caso a Don Google.
  10.  Poner URLs incompletas. Este problema ocurre cuando, en vez de poner una URL completa: https//:www.hellogoodmorning.com/contact” ponemos solo la uri “/contact/

 

Ahora ya sabes de la importancia del Hreflang Tag cuando dispones de una web en varios idiomas o estás pensando en construirla. Si no tenías claro cómo se llevaba a cabo, esperamos que este artículo te haya resultado de utilidad.

Aunque hemos intentado explicarlo de una forma sencilla, es un atributo que tiene sus dificultades y parte técnica. Por lo que es normal que, si no eres un experto, te haya resultado algo compleja la parte final, aunque puedes volver aquí a consultarla cuando quieras 😉

*