¿Qué es hreflang?

Hreflang es una importante etiqueta HTML para sitios web con contenido en varios idiomas. Las etiquetas hreflang permiten a los buscadores mostrar el contenido de tu web en el idioma preferido del usuario, por lo que implementar hreflang es esencial para la experiencia de usuario y la visibilidad de tu página web.

¿Por qué son importantes las etiquetas hreflang para el SEO?

Las etiquetas hreflang son esenciales para el posicionamiento en buscadores (SEO), si quieres llegar a usuarios de varios países. Esto se debe a que la etiqueta hreflang garantiza que los buscadores muestren el contenido en el idioma correcto, y también te ayuda a evitar el contenido duplicado.

Muestra tu contenido en varios idiomas

Si estás pensando en crear una tienda online multilingüe en la que vendas a clientes de varios países, tendrás que añadir etiquetas hreflang, ya que los buscadores las utilizan para determinar en qué idioma mostrarán el contenido.

Supongamos que quieres acceder a la web de Netflix desde Alemania. Aunque introduzcas Netflix.com en el campo de búsqueda, lo más probable es que el contenido de la página web esté en alemán. Así es como deben funcionar las etiquetas hreflang cuando se insertan debidamente.

Lo mismo sucede con el contenido de tu página web o de tu tienda online. Si tu página no tiene etiquetas hreflang, te arriesgas a que tu contenido no se muestre en el idioma correcto.

Evita el contenido duplicado 

Hreflang también te ayuda a evitar que los buscadores registren el contenido de tus páginas traducidas como contenido duplicado. El contenido duplicado es contenido idéntico al que ya existe en otras páginas. Esto es así, tanto para el contenido idéntico al de tu propia página web, como para el contenido de otras páginas web. El contenido duplicado es un problema porque las páginas web con contenido que no es único podrían tener una posición más baja en los resultados de búsqueda.

Las etiquetas hreflang son importantes para el contenido duplicado porque indican a los buscadores que las versiones del contenido en distintos idiomas están destinadas a usuarios de diferentes países o regiones. Si, por ejemplo, has escrito una descripción de producto para un jarrón de cerámica hecho a mano que vendes en tu tienda online, y has traducido la descripción al sueco, noruego y finlandés, la etiqueta hreflang impide que el contenido casi idéntico se registre como contenido duplicado.

¿Qué aspecto tienen las etiquetas hreflang?

Las etiquetas hreflang tienen una sintaxis sencilla y uniforme. Entender la estructura de hreflang es esencial para poder implementar las etiquetas correctas en tu página web. A continuación, veremos tres ejemplos de etiquetas hreflang que se pueden utilizar en diferentes contextos.

Hreflang – 3 ejemplos

1. Imagina que tienes un blog de viajes en el que escribes posts fascinantes sobre todos tus viajes en inglés, español y danés. Has dedicado mucho tiempo a escribir y traducir, por lo que quieres que tus posts se muestren como es debido en los buscadores. En este caso, utiliza estas etiquetas hreflang para distinguir entre los tres idiomas:
   
   <link rel=”alternate” href=”https://ejemplo.com/en/pagina” hreflang=”en”> 
   <link rel=”alternate” href=”https://ejemplo.com/es/pagina” hreflang=”es”> 
   <link rel=”alternate” href=”https://ejemplo.com/da/pagina” hreflang=”da”> 
   
2. Otro ejemplo podría ser una clínica dental en España, que ha traducido recientemente el contenido de su página web al portugués, con la esperanza de atraer a clientes portugueses. Si la clínica dental también tiene páginas en inglés, sus etiquetas hreflang deberían ser algo así:
   
   <link rel=”alternate” href=”https://ejemplo.com/en/pagina” hreflang=”en”> 
   <link rel=”alternate” href=”https://ejemplo.com/es/pagina” hreflang=”es”> 
   <link rel=”alternate” href=”https://ejemplo.com/pt/pagina” hreflang=”pt”> 
   
3. Por último, veamos un ejemplo en el que se necesitan etiquetas diferentes para varias variantes de un mismo idioma. Imagina una gran plataforma de noticias online que escribe artículos en inglés británico, inglés americano e inglés de la India. Estas variantes del inglés tienen los siguientes códigos lingüísticos regionales: en-gb, en-us y en-in.
   
   Las etiquetas hreflang de esta plataforma de noticias deberían ser de este estilo:
    
   <link rel=”alternate” href=”https://ejemplo.com/en-gb/pagina” hreflang=”en-gb”> 
   <link rel=”alternate” href=”https://ejemplo.com/en-in/pagina” hreflang=”en-in”> 
   <link rel=”alternate” href=”https://ejemplo.com/en-us/pagina” hreflang=”en-us”>

¿Cuál es la estructura de las etiquetas hreflang?

Acabamos de ver tres ejemplos de etiquetas hreflang. Ahora vamos a dividir una en partes más pequeñas para ver qué significan cada una de ellas.

Veamos una etiqueta del blog de viajes del ejemplo de la sección anterior:

<link rel=”alternate” href=”https://ejemplo.com/es/pagina” hreflang=”es”>

link rel=“alternate”: El enlace de esta etiqueta es una versión alternativa de esta página.

hreflang=“es”: Es alternativa porque el contenido está escrito en otro idioma, y ese idioma es el español.

href=“https://ejemplo.com/es/pagina”: La página alternativa está en esta URL.

Códigos de idioma hreflang

Cuando escribas etiquetas hreflang para tu página web o tienda online, puedes utilizar la misma sintaxis de estos ejemplos. Lo único que tienes que cambiar es el código de idioma, es decir, las dos letras que indican los idiomas en los que está disponible el contenido. Los códigos de idioma siguen la norma ISO 639-1, que se utiliza en todo el mundo.

Aquí tienes una lista de algunos de ellos:

• Español: es
• Danés: da
• Sueco: se
• Noruego: no
• Árabe: ar
• Inglés: en
• Inglés británico: en-gb
• Inglés americano: en-us
• Japonés: ja

Puedes encontrar fácilmente códigos de idioma para todos los idiomas en Internet.

Generador de etiquetas hreflang  

El proceso de crear etiquetas hreflang es bastante sencillo, pero puede llevar mucho tiempo crear estas etiquetas para muchos idiomas y páginas. Puedes ahorrar tiempo si utilizas un generador de etiquetas hreflang como este. 

3 sugerencias antes de implementar las etiquetas hreflang 

Antes de profundizar en cómo insertar las etiquetas hreflang en tu web, veamos tres recomendaciones que minimizan el riesgo de error. Aunque las etiquetas en sí son bastante sencillas, es fácil que se produzcan errores si las insertas de forma incorrecta.

1. Las etiquetas Hreflang son bidireccionales: Esto quiere decir que siempre deberán apuntar en ambos sentidos. Es decir, si la etiqueta de tu página danesa apunta a la francesa, la etiqueta de la página francesa debe apuntar a la danesa. De este modo, indicas a los buscadores que administras ambas páginas y que las dos están vinculadas entre sí.

2. Las etiquetas hreflang autorreferenciadas son una buena idea: Esto significa que las etiquetas hreflang no solo deben apuntar a otros idiomas, sino también a sí mismas. Supongamos que tienes la misma página de categoría en tu sitio web en español (https://ejemplo.com/comida-para-gatos) y en inglés (https://ejemplo.com/cat-food). En este caso, cada una de estas páginas debe tener estas etiquetas hreflang:
    
   <link rel=”alternate” hreflang=”es” href=”https://ejemplo.com/comida-para-gatos” /> 
   
   <link rel=”alternate” hreflang=”en” href=”https://ejemplo.com/cat-food”/> 
    

3. Utiliza etiquetas x-default para mejorar la experiencia de usuario: Esta etiqueta es muy útil si tienes una web con contenidos en varios idiomas, como español, sueco e inglés, pero recibes un buen número de visitas de, por ejemplo, Alemania.
   
   En este caso, puedes utilizar las etiquetas hreflang x-default para dirigir a tus visitas de habla alemana a la página en inglés, que probablemente entenderán mejor que la que está en sueco.
   
   Así, las etiquetas Hreflang x-default proporcionan a los usuarios una mejor experiencia en tu sitio web, porque no acceden a una página con un contenido que no pueden entender.
   
   Esta es la sintaxis de esta etiqueta:
   
   <link rel=”alternate” hreflang=”x-default” href=”https://ejemplo.com/” />  

¿Cómo implementar las etiquetas hreflang?

Ahora que hemos visto qué aspecto tienen las etiquetas hreflang, veamos cómo se implementan. Esto se puede hacer utilizando tres métodos, según el contexto y el tipo de contenido.

Utilizando HTML

La forma más básica de indicar a los buscadores que tu página web existe en varios idiomas es insertar la etiqueta hreflang en el código HTML de la página web. La etiqueta se inserta en la parte superior del código, en el elemento <head>.

<head>-es un contenedor de metadatos y se coloca entre la etiqueta <html> y la etiqueta <body>.

Aquí tienes un ejemplo de una página que está disponible en inglés, español y danés.

<!DOCTYPE html> 
< > 
<head> 
  <title>El impresionante título de tu página</title> 

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

<link rel=”alternate” href=”https://ejemplo.com/es/pagina” hreflang=”es”> 

<link rel=”alternate” href=”https://ejemplo.com/da/pagina” hreflang=”da”>  
</head> 
<body> 

El contenido mágico de tu página
 
</body> 
</html> 

Cada vez que traduzcas una página, tendrás que añadir una nueva etiqueta hreflang a todas las versiones de la página. Por ejemplo, si ya tienes la página en danés, inglés y español, y la traduces al alemán, debes insertar la etiqueta hreflang alemán en el código HTML de todas las páginas. Esto significa que ahora tienes cuatro etiquetas en total en cada página, porque todas las versiones deben ser bidireccionales y apuntar unas a otras, además de a sí mismas.

Este método puede consumir mucho tiempo, sobre todo si tienes muchas páginas y muchos idiomas en tu web. En este caso, utilizar el generador de hreflang del que hemos hablado antes, puede ser útil.

Usando el encabezado HTTP (header HTTP) 

Si tienes páginas con contenido que no está en formato HTML, puedes insertar la etiqueta hreflang en el encabezado http de la página. Un ejemplo de este tipo de contenido son los archivos PDF.

Los códigos de los encabezados HTTP contienen información sobre los datos que se envían desde un servidor a un cliente, como la fecha y el idioma preferido.

Supongamos que tienes el mismo PDF en tres idiomas diferentes: inglés, español y sueco. Entonces, la cabecera HTTP de cada uno de los archivos debería ser así:

HTTP/1.1 200 OK

Content-Type: application/pdf

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

<https://ejemplo.com/es/doc.pdf>; rel=”alternate”; hreflang=”es”

<https://ejemplo.com/se/doc.pdf>; rel=”alternate”; hreflang=”se” 

A través del mapa de sitio XML  

El tercer método que puedes utilizar para implementar tus etiquetas hreflang es insertarlas en el mapa de sitio XML de tu página. Puedes leer más sobre los mapas de sitio web o sitemaps aquí.

En pocas palabras, un mapa de sitio XML es un archivo que proporciona a los buscadores información sobre cada una de las páginas de tu web.

La principal ventaja de este método es que puedes editar todas tus etiquetas hreflang en un solo lugar. Si utilizas el método HTML y el método de encabezado http, debes añadir una nueva etiqueta a cada página cada vez que traduzcas el contenido a un nuevo idioma, y esto puede llevar bastante tiempo.

Si eliges este método, añade un elemento <loc> para cada URL, e inserta <xhtml:link> para cada uno de los idiomas en los que esté disponible la página web.

Aquí encontrarás las instrucciones de Google, así como un ejemplo.

HTML-lang y Hreflang 

HTML-lang también es una etiqueta que se puede implementar para optimizar las páginas web con contenido en varios idiomas. Sin embargo, hay una diferencia entre ambas etiquetas.

La principal diferencia es que HTML-lang es una etiqueta insertada en HTML para indicar a los buscadores y a los usuarios el idioma de todo el sitio web.

Hreflang envía indicaciones más detalladas, ya que especifica los idiomas en cada una de las páginas web de tu sitio web. Esto hace que sea más fácil adaptar el contenido a distintos países e idiomas.

Google no utiliza HTML-lang. Por ello, recomiendan que las páginas web con contenido en varios idiomas utilicen la etiqueta hreflang. Sin embargo, Microsoft Bing y algunos lectores de pantalla sí utilizan el lenguaje HTML. Por tanto, puede ser una buena idea utilizar ambos si quieres optimizar tu sitio web para varios buscadores y lectores de pantalla.

Etiquetas hreflang: imprescindibles para los sitios web multilingües

Si quieres mejorar la experiencia de usuario y aumentar el tráfico de tu página web con contenidos en varios idiomas, es importante que sepas cómo crear e implementar las etiquetas hreflang. Un sitio web multilingüe ofrece nuevas oportunidades, nuevos usuarios, nuevos lectores y más conversiones. ¡Esperamos que esta guía te ayude a empezar!