Hreflang: Que es exactamente y como utilizarlo en SEO

¿Tu web tiene contenido en diferentes idiomas? Entonces resulta fundamental que entiendas y empieces a aplicar el atributo Hreflang. Ya que a pesar de ser un atributo HTML sencillo, si no es usado de la forma adecuada puede representar algunos desafíos.

¡Así es! Algunos expertos lo han descrito como uno de los aspectos más complicados que tiene el SEO; la razón “se vuelve difícil muy rápido” pero que esto no sea motivo para desanimarse; el concepto de hreflang no es tan complejo de comprender y, en gran medida, puede ser automatizado.

Por esta razón, en el siguiente post cubriremos todo al respecto sobre él, y definiremos su concepto básico, su implementación y todo eso que debes saber para utilizarlo correctamente dentro de tu página web ¿Listo? Empecemos.

¿Qué es Hreflang?

El código o etiqueta hreflang es un atributo HTML que es utilizado para seleccionar el idioma y el objetivo geográfico al cual apunta un sitio web.

Por lo que si posees múltiples versiones de una misma página en diferentes idiomas, la etiqueta hreflang te permite informar a los motores de búsqueda como Google, acerca de estas variantes.

Lo que hace que esta práctica resulte fundamental para garantizar que los usuarios reciban la versión adecuada según su idioma preferido.

Imaginemos que quieres buscar el sitio oficial de Apple en Google.

Si lo haces desde los estados unidos el resultado en pantalla será: www.apple.com

Mientras que si lo buscas desde Latinoamérica el resultado será: www.apple.com/la/

Y es solo es posible gracias al atributo hreflang.

Hreflang en SEO: ¿Cuál es su importancia?

Todo aquel que ha dedicado el tiempo para traducir el contenido de su web en varios idiomas, sin duda quieren que los motores de búsqueda enseñan a sus visitantes la versión más adecuada a cada uno de ellos.

Y si hablamos de Google; las etiquetas hreflang son el medio para conseguirlo.

Nota: Otros motores de búsqueda como Bing o Baidu NO SE FIJAN EN LA ETIQUETA HREFLANG. Por lo que en su lugar emplean un atributo llamado HTML content-language.

Ahora bien, su importancia radica en que mostrar el contenido en el idioma nativo de un usuario contribuye significativamente a mejorar su experiencia.

¿Y esto que beneficios trae? Simple, conlleva a que menos personas abandonen tu página para volver a los resultados de búsqueda (es decir, aumenta el “dwell time” o tiempo de permanencia o parada), reduce la tasa de rebote y aumenta el tiempo en la página, entre otros aspectos positivos que consideramos beneficiosos para el SEO y la posición en los resultados de búsqueda.

Sin duda algo fantástico, y que como propietario de una web seguramente desees conseguir ¿No es cierto? Pero esto no es todo, ya que el Hreflang también es importante cuando se trata del contenido duplicado.

Hreflang y el contenido duplicado

Imaginemos ahora que cuentas con dos versiones de tu página: una destinada a lectores del Reino Unido con inglés británico y otra dirigida a lectores de los Estados Unidos con ortografía estadounidense, es posible que estas dos páginas, al ser casi iguales, sean consideradas por Google como contenido duplicado.

Y es en estos casos donde Google podría seleccionar una versión para indexar. Lo que puede terminar afectando la visibilidad de tu contenido en los resultados de búsqueda.

Es aquí donde la etiqueta hreflang facilita a Google comprender la conexión entre distintas páginas; permitiendo que intente mostrar la versión que se quiere en los resultados de búsqueda.

No obstante, no existe una garantía absoluta de que esto suceda. Por lo que es esencial comprender que las etiquetas hreflang representan una señal para los motores de búsqueda y no una directiva.

Pero ¡No te preocupes! Puedes ayudar a estos motores adaptando el precio por ejemplo (Dólares vs libras). Y solo con estas pequeñas diferencias entre ambos idiomas, Google dejará de considerar esto como un contenido duplicado.

Códigos de idioma hreflang: ¿Cómo luce y que significa cada una de sus partes?

Muy bien, las etiquetas o códigos HTML Hreflang tienen una sintaxis sólida y  sencilla, y es la siguiente:

<link rel=”versionalternativa” hreflang=”idioma” href=”https://webejemplo.com/pagina-alternativa” />

Ahora definamos sus partes:

• Link real=”versionalternativa”: Las letras negritas indican el enlace de la versión alternativa de la página principal.
• Hreflang=”idioma”: En este caso la negrita indica justamente el idioma alternativo de la página.
• Href=“https://webejemplo.com/pagina-alternativa“: En esta parte la negrita nos muestra donde debe ir en enlace de la web en otro idioma o web alternativa.

Es importante mencionar que todas y cada una de las negritas simbolizan elementos que deben ser editados con las partes acordes, y no deben utilizarse como en el ejemplo. Sin embargo, para que lo entiendas mejor te mostraremos como construir una Hreflang.

Hreflang en sitios web: Como construirlos

Crear una etiqueta hreflang es fácil: solo necesitas buscar el código de idioma que prefieras y completar la etiqueta con él.

Nota: El atributo hreflang es compatible con cualquier código de idioma de dos letras de la norma ISO 639-1. Si no los conoces aquí te dejamos la lista completa para cualquier parte del mundo.

Dicho esto, imaginemos que queremos agregar una Hreflang del Reino Unido a nuestra página de ejemplo en español. Este sería el resultado final:

<link rel=”alternate” hreflang=”uk” href=”https://paginadeejemploenespañol” />

Lo único que debemos hacer es completar el código de idioma, en este caso Reino unido (uk) + la URL de nuestra web principal.

Caso 2: Apuntar Hreflang a lo local

¿Recuerdas el contenido duplicado del que hablamos anteriormente? Muy bien, porque aunque baste con especificar un idioma concreto, debes recordar que una Etiqueta meta hreflang también soporta añadir tanto regiones como países.

Nota: En estos casos también se emplea un código de 2 letras, la diferencia es que esta vez será el formato ISO 3166-1 alpha-2. Nuevamente puedes ver la lista completa para guiarte.

En este caso tomaremos como ejemplo nuevamente a Estados Unidos y Reino Unido. Por lo que el resultado final sería:

Estados Unidos:

<link rel=”alternate” hreflang=”en-us” href=”https://pagínawebejemplo.com/us/hello” />

Reino Unido:

<link rel=”alternate” hreflang=”en-uk” href=”https:// pagínawebejemplo.com /uk/hello” />

Como lo vez en el código la sintaxis correcta es modificar: hreflang=”lenguaje-país”

¿Por qué es importante esto?

Digamos que estás a cargo de una tienda en línea que ofrece un único producto. Tu negocio realiza envíos tanto a Estados Unidos como al Reino Unido (dos países donde se habla inglés).

Sin embargo, los clientes estadounidenses prefieren comprar en dólares, mientras que los del Reino Unido desean hacerlo en libras esterlinas.

Para solucionar este inconveniente, generas dos variantes de la página del producto: una presenta el precio en dólares y la otra en libras.

Aunque ambas páginas son idénticas excepto por el precio, es crucial emplear etiquetas hreflang para indicar a los motores de búsqueda la razón detrás de estas dos versiones.

Además, puede que existan casos en los que necesites apuntar a varios idiomas dentro de un mismo país. Y aquí las etiquetas hreflang son nuevamente las que salvan el día, te damos un ejemplo.

Imagina ahora que llevas un blog sobre trámites en Canadá. Un ejemplo perfecto; ya que Canadá es un país que maneja 2 idiomas: El inglés y el francés. Por lo que es sumamente acertado que manejes dos variantes de tu artículo en cada uno de estos idiomas, dejándote así muchos más beneficios.

3 reglas de oro en la implementación de Hreflang

Como verás este tipo de etiquetas son en teoría fáciles de implementar. Por ello, queremos enseñarte 3 métodos de oro que no puedes ignorar ¡Así es! Estas son 3 reglas doradas que debes tener siempre presentes:

Todas las etiquetas Hreflang son de tipo bidireccional

Esta es la primera regla, y es que una etiqueta hreflang funciona en pareja. En otras palabras, al agregar una etiqueta hreflang a una página en inglés que enlace a una variante en italiano, se espera que dicha variante italiana haga lo mismo, colocando una etiqueta hreflang que enlace a la página en inglés.

¿Cómo funciona esto en el SEO? Simple, sirve para probar a los motores de búsqueda que se tiene un control de ambas versiones de la página. Sin mencionar que ambas webs están de acuerdo las unas con las otras.

Piensa en esto como establecer un estado sentimental en Facebook. Ya que podrías fácilmente declararte en una relación con una persona famosa; sin embargo, a menos que esta siga el mismo camino, será difícil que alguien pueda tomarte enserio.

Es así como cuando las etiquetas están dañadas o la conexión no se ha establecido correctamente, es posible que encuentres la página equivocada, múltiples páginas o un título incorrecto asociado a la URL en los resultados de búsqueda.

Los atributos hreflang deben hacer auto referencia

Según lo indicado por Google, en cada variante de idioma de una página se deben incorporar todas las variantes de idioma de la web, incluyendo la versión original. En términos simples, esto implica que cada página debería poseer una etiqueta hreflang que haga referencia a sí misma.

Por ello, si se quieren añadir etiquetas hreflang entre una página cuyo idioma es el español (https://webejemplo.com/hola) con una en alemán (https://webejemplo.com/hallo) cada una de ellas deberá tener una etiqueta hreflang como estas:

<link rel=”alternate” hreflang=”de” href=”https://webejemplo.com/hallo” />

<link rel=”alternate” hreflang=”es” href=”https://webejemplo.com/hola” />

La primera indica la dirección URL de la variante alemana alternativa de la página, mientras que la segunda es una etiqueta autorreferente que dirige nuevamente a la página principal.

Del mismo modo, la página alemana también necesitará de ambas etiquetas hreflang.

Las etiquetas  X-default no son obligatorias pero deberías usarlas

La etiqueta hreflang x-default señala la página predeterminada o de respaldo que se presenta a los usuarios cuando ninguna de las variantes en otro idioma son apropiadas. Aunque su uso no es obligatorio, Google sugiere que se utilicen.

Y lucen de la siguiente manera:

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

En otras palabras; imagina que Google muestra un resultado para un usuario ubicado en España.

Google prioriza la coincidencia del código idioma-país (por ejemplo, en-es) y muestra esa página si es que está disponible.

De no existir, busca una coincidencia de idioma (por ejemplo, en-us). Ahora bien, en este segundo caso el código del país no va importar mucho, ya que Google buscará exclusivamente un código de idioma compatible.

Si no encuentra ninguna de estas variantes, Google presentará la versión x-default o la versión predeterminada de la página. Y esto solo se logra implementando la etiqueta x-default.

Implementación Hreflang: Formas para hacerlo

Existen 3 maneras para poder implementar los atributos hreflang; estas son:

• A través de etiquetas HTML.
• Por medio de Cabeceras HTTP.
• Con Sitemaps.

Ahora bien, si eres nuevo en el mundo de la optimización hreflang es recomendable utilizar las etiquetas HTML. Pues sin duda son la forma más fácil y rápida de implementación entre las 3 mencionadas.

Lamentablemente, en webs no HTML como es el caso de los PDFS no será posible implementar el método de la etiquetas HTML. Y tendremos que valernos de los otros implementados para conseguirlo.

Optimización Hreflang: ¿Qué debes saber?

Como comentábamos al principio del artículo, muchos consideran la correcta aplicación hreflang como uno de los aspectos más complicados del SEO. Y en webs multinacionales con miles de clientes y muchos idiomas puede que esto sea cierto.

Sin embargo, considerando que esto es una guía para principiantes ¡No debes preocuparte! Pues implementar y generar hreflang se puede automatizar en gran medida.

Uno de los métodos más simples es con Google Sheets o Microsoft Excel. Y los pasos son:

• Elegir los idiomas y la localidad: Crea la pestaña “Setup” de la hoja de cálculo, selecciona el idioma principal de tu sitio web y elige 4 variaciones. Por ejemplo: si estás configurando la hoja para el blog SEO de Ahrefs, el idioma por defecto sería inglés, seguido de español, y las cuatro variantes alternas.
• Copia todas tus URLs: Crea la pestaña URLs y haz hasta 5 columnas para cada idioma y para el x-default; y pega cada URL en donde corresponda.
• Genera un código XML: Utiliza un generador de códigos para sistema XML con tus URL. Luego pégalos en un documento XML, súbelo a tu página y envíaselo a Google a través de la Search Console.

Recuerda, que esta guía solo trata superficialmente los hreflang. Pues la intención es que conozcas en que consisten y muchos de los conceptos básicos detrás de estos.

Por ultimo recomendamos que no temas a incursionar en esta área, ya que solo debes organizarte, automatizar su implementación lo máximo posible, prestar atención a los problemas que seguro los habrá y seguir adelante en este interesante mundo.