Etiqueta hreflang: ¿Qué es y cómo implementarla? GUÍA COMPLETA
Conseguir una excelente optimización de SEO en tu web es una de las cosas que pueden marcar la diferencia a la hora de conseguir llegar a tu público objetivo. El SEO es un elemento que cuenta con numerosas técnicas y herramientas que convertirán tu estrategia en la mejor.
Un ejemplo de ellas son las etiquetas hreflang.
Con ellas, vas a poder llegar a un público más allá de tus fronteras y expandir tu negocio con múltiples idiomas y localizaciones.
En palabras de John Mueller, Senior Webmaster Trends Analyst en Google, las hreflangs, son “uno de los elementos más complejos del SEO”.
Pero no te desanimes. Hoy en el blog de Coco, te vamos a contar qué son realmente este tipo de etiquetas y cómo puedes utilizarla en tu sitio web.
¿Qué son las hreflang?
Las rheflang son un atributo HTML que indica el idioma y la región objetivos de una página web concreta. Básicamente, se usan para proporcionar cierta información a los motores de búsqueda sobre las diferentes versiones lingüísticas o regionales de una página.
De esta manera, se puede mostrar la versión más relevante para cada usuario según la ubicación en la que se encuentre y su idioma.
Para que puedas entenderlo mejor: Con estas etiquetas, no se muestra el mismo contenido en España que en Inglaterra, sino que se va a poder mostrar otras páginas optimizadas 100% para el idioma principal de ese país.
Pero, ¿No se considera contenido duplicado? En absoluto. Empleando esta etiqueta, Google no penalizará por contenido duplicado ni le restará visibilidad a ese contenido que quieres ofrecer para posicionar a cada uno de los países objetivo.
¿Cómo implementarlas?
Entramos en elementos que tienen que ver mucho con el SEO técnico. Desde Developers Google, nos dicen que para implementar correctamente las hreflangs, debemos hacerlo desde tres formas diferentes:
- Etiquetas HTML
- Cabeceras HTTP
- Sitemaps
1. Etiquetas HTML
Si estás comenzando a utilizar este tipo de etiquetas, quizás sea una de las más básicas, rápidas y fáciles de implementar.
Para ello, debes añadir elementos <link rel="alternate" hreflang="lang_code"... > al principio de la página para informar de todas las variantes de idioma y región hay en la web.
Del mismo modo, resulta ser un método muy útil si no tienes ningún sitemap ni tampoco especificar los encabezados de respuesta de HTTP en la web.
Además, por cada variante que quieras introducir en tu página, debes incluir un conjunto de elementos <link> en el elemento <head> y un enlace, siempre incluyendo el de tu web. Este conjunto de enlaces debe ser el mismo en prácticamente todas las variantes de una página.
Consulta aquí todas las directrices adicionales.
2. Encabezados HTTP
Ideal para aquellas páginas que no contenga HTML, como pueden ser los PDFs no es posible añadir las hreflang con etiquetas.
El encabezado que debes utilizar es el siguiente:
Link: <url1>; rel="alternate"; hreflang="lang_code_1", <url2>; rel="alternate"; hreflang="lang_code_2", …
A continuación, debes especificar de forma correcta el conjunto de valores (<url>, rel="alternate") y hreflang, tantas veces como versiones tenga la página, incluyendo la versión que se solicita.
Este tipo de conjunto tiene que separarse con comas como en este ejemplo:
Link: <https://example.com/file.pdf>; rel="alternate"; hreflang="en",
<https://de-ch.example.com/file.pdf>; rel="alternate"; hreflang="de-ch",
<https://de.example.com/file.pdf>; rel="alternate"; hreflang="de"
3. Sitemap
También puedes informar a Google de las variantes de idiomas de tu web con los sitemap XML.
En los sitemaps se pueden incluir marcados relevantes para especificar las hreflang de las páginas. Lo puedes hacer añadiendo <loc>, incluyendo la URL y las entradas secundarias, <xhtml:link> para poder mostrar todas las variantes, tanto de idioma como de región, incluyendo el propio elemento.
Ejemplo: si tienes tres versiones de una página, el sitemap incluirá las entradas de las URLs de cada versión y, a su vez, cada entrada tendrá tres entradas secundarias parecidas.
Veamos ahora un ejemplo donde se muestran todas las URLs de una página presente en al web:
- www.example.com/english/page.html está dirigida a aquellas personas que hablan en inglés.
- www.example.de/deutsch/page.html para aquellas que hablan alemán.
- www.example.de/schweiz-deutsch/page.html para todas aquellas personas que habla alemana, situadas específicamente en Suiza.
De esta forma, se vería en el sitemap:
<?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>https://www.example.com/english/page.html</loc>
<xhtml:link
rel="alternate"
hreflang="de"
href="https://www.example.de/deutsch/page.html"/>
<xhtml:link
rel="alternate"
hreflang="de-ch"
href="https://www.example.de/schweiz-deutsch/page.html"/>
<xhtml:link
rel="alternate"
hreflang="en"
href="https://www.example.com/english/page.html"/>
</url>
<url>
<loc>https://www.example.de/deutsch/page.html</loc>
<xhtml:link
rel="alternate"
hreflang="de"
href="https://www.example.de/deutsch/page.html"/>
<xhtml:link
rel="alternate"
hreflang="de-ch"
href="https://www.example.de/schweiz-deutsch/page.html"/>
<xhtml:link
rel="alternate"
hreflang="en"
href="https://www.example.com/english/page.html"/>
</url>
<url>
<loc>https://www.example.de/schweiz-deutsch/page.html</loc>
<xhtml:link
rel="alternate"
hreflang="de"
href="https://www.example.de/deutsch/page.html"/>
<xhtml:link
rel="alternate"
hreflang="de-ch"
href="https://www.example.de/schweiz-deutsch/page.html"/>
<xhtml:link
rel="alternate"
hreflang="en"
href="https://www.example.com/english/page.html"/>
</url>
</urlset>
Errores habituales de implementar hreflang
Lo normal es que, al principio, cuando comienzas a añadir este tipo de etiquetas, te encuentres con algunos problemas.
Déjanos decirte que no pasa nada, no te preocupes, son errores bastante habituales y que, como todo en esta vida, tienen solución.
Uno de los más comunes son la falta de enlaces recíprocos.
Vamos a intentar ser lo más claros posible para que entiendas bien por qué se dan este tipo de errores.
Pongamos que una página A alberga enlaces a una página B, en esta página B debe de haber un enlace hacia la página A. Si esto no se cumple en todas y cada una de las páginas que contengan hreflang, probablemente estas anotaciones sean ignoradas o no se puedan interpretar de forma correcta.
Veamos un ejemplo gráfico:
Si en este enlace:
https://de.example.com/index.html incluimos este otro enlace:
<link rel="alternate" hreflang="en-gb" href="https://en-gb.example.com/index.html" />
Debemos añadir este otro enlace: https://en-gb.example.com/index.html con el que vamos a devolver la siguiente versión del contenido:
<link rel="alternate" hreflang="de" href="https://de.example.com/index.html" />
Cuando debemos indicar las páginas alternativas
A continuación, vamos a mostrarte las diferentes situaciones en las que se recomienda utilizar las etiquetas hreflang:
- Cuando el contenido principal este solo en un idioma y se traduzca la plantilla, como por ejemplo el pie de página. Esta situación suele darse en páginas donde el contenido ha sido creado por los usuarios, como los foros.
- Donde el contenido esté en un solo idioma, pero, contiene alguna que otra variedad regional con un contenido parecido. El ejemplo más claro son las páginas en castellano dirigidas al público latinoamericano.
- En las páginas en las que el contenido esté completamente traducido a varios idiomas, como por ejemplo las páginas en español traducidas al inglés.
Conclusiones finales
Como has podido comprobar, hreflang no es tan complicado como advertía John Mueller en su publicación.
La única manera de garantizar el éxito es asegurarte de tener una buena organización, estar atento ante eventuales contratiempos que, inevitablemente, los tendrás en mayor o menor medida y, sobre todo, arreglarlo lo antes posible.
Si quieres implementar este tipo de técnicas en tu sitio web, debes realizar una buena estrategia de SEO. En Coco Solution, contamos con un equipo de expertos en posicionamiento web capaz de llevar a las cotas más altas a tu sitio web gracias a la implementación correcta y efectiva de las hreflangs.
