Hreflang
En el terreno del marketing digital y, más concretamente, en el mundo del SEO, la etiqueta hreflang adquiere una gran importancia. En páginas webs que buscan llegar a un gran número de países, esta etiqueta se erige como un elemento indispensable. Sin embargo, se debe implementar de forma correcta para no confundir a Google y acabar siendo castigados por el algoritmo, frenando el crecimiento de la web.
En Educa Open, te queremos explicar en qué consiste la etiqueta hreflang, además de acercarte las distintas formas que existen para implementarla. Por último, te hablaremos de los distintos problemas que te pueden surgir después de su implementación para que no te vuelvas loco buscando las causas de tu estancamiento.
¿Estás preparado? ¡Comenzamos!
¿Qué es la etiqueta Hreflang?
Como ya puedes entrever, la etiqueta hreflang conforma un atributo HTML que comunica el idioma y la región de destino de una página web. Esto hace que Google entienda cuál es la versión más adecuada de esa página para un determinado país e idioma. Por este motivo, se suele decir que esta etiqueta pertenece al ámbito del SEO internacional, ya que adquiere importancia en negocios globales con presencia en varios lugares del mundo.
Vamos a verlo con un ejemplo. Imagina que tienes una página, a través de la cual vendes productos tanto en España como en México. Aunque sea el mismo idioma, puedes optimizar ciertos elementos como la moneda o ciertas expresiones. Así, la etiqueta hreflang se encargaría de mostrar la versión adecuada a los usuarios de España y de México. Esto lo consigue después de comprobar tu zona geográfica a través de la dirección IP.
Así se elabora una etiqueta Hreflang
Seguimos adentrándonos en la etiqueta hreflang. Primero de todo, vamos a ver un ejemplo de la misma:
<link rel="alternate" href="url_of_page" hreflang="lang_code" />
¿Qué significa cada uno de sus elementos? Nos adelantamos a esta pregunta y te planteamos las respuestas:
- link rel="alternate" le dice a Google que el enlace de esta etiqueta es una versión alternativa.
- href="url_of_page" comunica el lugar en el que se encuentra la página alternativa.
- hreflang="lang_code" se corresponde con el idioma alternativo.
¿Cómo crear una etiqueta Hreflang?
El primer elemento que debes tener en cuenta es el código de idioma y país. La referencia que debes usar es clara: los códigos de idioma ISO 639-1 de dos letras y códigos de país y región ISO 3166-1 alfa 2.
Con esta información, tu atributo hreflang se vería así:
<link rel="alternate" href="<https://ejemplo.com>" hreflang="en" />
<link rel="alternate" href="<https://ejemplo.com/es/>" hreflang="es" />
<link rel="alternate" href="<https://ejemplo.com/pt/>" hreflang="pt" />
Un aspecto importante que debes tener en cuenta es que en cada atributo hreflang debes incluir una referencia a todas las páginas que sirven como alternativas, además de una autorreferencia. ¿Por qué? Porque si no lo haces, los motores de búsqueda como Google pueden ignorar tus etiquetas hreflang.
Otra situación que puedes encontrarte es que en varios países se habla el mismo idioma. Por ejemplo, si colocas en la etiqueta a Portugal, pero no haces mención alguna a Brasil, puede acabar apareciendo contenido en inglés a los usuarios de Brasil. Por ello, es importante que añadas todas las referencias que puedan afectar a tu negocio global.
Aquí te dejamos un ejemplo de cómo quedarían estos atributos hreflang con las indicaciones de idioma-país:
<link rel="alternate" href="<https://ejemplo.com/pt/>" hreflang="pt-pt" />
<link rel="alternate" href="<https://example.com/br/>" hreflang="pt-br" />
No te olvides de la etiqueta x-default
Un elemento que no podemos dejar pasar por alto es la etiqueta x-default. Esta se usa para señalar la página que mostrar cuando no hay otra versión local registrada. De esta manera, en la etiqueta introducimos cuál es la página principal, de manera que los usuarios que se encuentren en localizaciones no registradas, entren a esta ruta.
Aquí te dejamos un ejemplo:
<link rel="alternate" href="<https://example.com>" hreflang="en-us" />
<link rel="alternate" href="<https://example.com/es/>" hreflang="es-es" />
<link rel="alternate" href="<https://example.com/pt/>" hreflang="pt-pt" />
<link rel="alternate" href="<https://example.com/pt/>" hreflang="pt-br" />
<link rel="alternate" href="<https://example.com>" hreflang="x-default" />
¿Dónde ponemos la etiqueta Hreflang?
A continuación, vamos a profundizar en las tres formas que tenemos de implementar la etiqueta hreflang en nuestra página web.
Etiqueta Hreflang en el HTML
La primera forma de implementar el atributo hreflang es a través del HTML. ¿Cómo lo hacemos? Una vez que lo tengas formado, debes trasladarlo a la parte <head> de la página. Eso sí, debes recordar que cada versión de un artículo debe referenciarse a sí misma. De lo contrario, ya sabemos que Google y otros motores de búsqueda pueden hacer caso omiso a tu señal.
El problema es que este método puede llevar mucho tiempo. Por ejemplo, cada vez que traduzcas un artículo a otro idioma, tendrás que volver atrás y añadir la nueva etiqueta hreflang a todas las versiones anteriores. Como decimos, esto puede ser muy tedioso, dando lugares a errores que pueden tener consecuencias en nuestro posicionamiento.
Etiqueta Hreflang en el encabezado HTTP
¿Por qué implementar la etiqueta hreflang en el encabezado HTTP? Porque es el lugar ideal para el contenido no HTML como los PDF, por ejemplo. Y es que este encabezado HTTP se encarga de transferir datos entre un servidor y un cliente. Por ejemplo, se intercambian información como la fecha de solicitud, remitente o el idioma preferido.
El problema de este método es que puedes cargar en exceso al servidor. Por este motivo, se recomienda usarlo solo cuando sea estrictamente necesario, dejando a un lado el contenido HTML, que puede ser etiquetado de otras formas.
Aun así, te mostramos cómo debería quedar tu código para implementar la cabecera HTTP:
Link: <https://example.com/doc.pdf>; rel="alternate"; hreflang="en", <https://example.com/es/doc.pdf>; rel="alternate"; hreflang="es", <https://example.com/pt/doc.pdf>; rel="alternate"; hreflang="pt"
Lee también sobre cómo crear un blog con WordPress.
Etiqueta Hreflang en el sitemap XML
Por último, te presentamos la mejor opción para implementar la etiqueta hreflang en tu página web: el sitemap XML. Básicamente, este archivo se encarga de aportar información a motores de búsqueda como Google. Se conforma de un único archivo que mandamos a dichos motores de búsqueda tantas veces como queramos.
La gran ventaja que nos aporta el sitemap XML es que no tenemos que entrar a varios archivos cada vez que completemos un cambio. Con esto, todos los cambios se realizan desde un mismo archivo y lugar, lo que agiliza mucho el procedimiento.
En este punto, debes saber que el elemento <loc> se usa para añadir cada una de las URLs, mientras que el elemento xhtml:link se emplea para cada versión de idioma y región de la página. Así es cómo quedaría el atributo hreflang en nuestro sitemap XML:
<url>
<loc><https://https>://example.com</loc>
<xhtml:link rel="alternate" hreflang="en-us"
href="<https://https>://example.com" />
<xhtml:link rel="alternate" hreflang="es-es"
href="<https://example.com/es/>" />
<xhtml:link rel="alternate" hreflang="pt-br"
href="<https://example.com/pt/>" />
</url>
<url>
<loc><https://example.com/es/></loc>
<xhtml:link rel="alternate" hreflang="en-us"
href="<https://https>://example.com" />
<xhtml:link rel="alternate" hreflang="es-es"
href="<https://example.com/es/>" />
<xhtml:link rel="alternate" hreflang="pt-br"
href="<https://example.com/pt/>" />
</url>
<url>
<loc><https://example.com/pt/></loc>
<xhtml:link rel="alternate" hreflang="en-us"
href="<https://https>://example.com" />
<xhtml:link rel="alternate" hreflang="es-es"
href="<https://example.com/es/>" />
<xhtml:link rel="alternate" hreflang="pt-br"
href="<https://example.com/pt/>" />
</url>
</urlset>
Problemas con la etiqueta Hreflang
En la actualidad, existen herramientas que monitorizan tu página web y te devuelven los errores técnicos en minutos. Por ejemplo, Semrush cuenta con espacios en los que puedes indagar y conocer tus errores, además de las causas y soluciones. Por ello, a continuación te vamos a aportar un listado con los problemas más frecuentes.
El objetivo es que seas consciente de ellos y sepas por dónde indagar una vez compruebes que algo raro está pasando.
- Problemas con los valores hreflang: uno de los principales errores es que los códigos de país o idioma no están bien puestos.
- Hrelang sin autorreferencia: como decimos, debes incluir una autorreferencia en cada página para no confundir a Google.
- Enlaces incorrectos en hreflang: puede darse el caso de que enlaces una página que no funciona o que ha sido redirigida.
- Conflicto entre hreflang y rel=canonical URL: la canonical siempre indica por HTML cuál es la versión principal de la página cuando existen duplicidades. Si en el atributo hreflang se hace referencia a URL no canonical, Google entiende que tienes un conflicto que solucionar.