Etiqueta Hreflang: ¿Qué es y cómo implementarla correctamente?
El atributo hreflang se trata de uno de los aspectos más difíciles de implementar dentro del SEO. No son palabras mías, sino de John Mueller, Webmaster Trends Analyst de Google y una de las caras visibles dentro de la comunidad SEO.
Y es que no es para menos ya que, aunque parezcan unas simples líneas de código, una mala implementación de la etiqueta hreflang podría suponer varios dolores de cabeza para ti y tu negocio digital.
¡Pero no te preocupes! Desde WindUp vamos a enseñarte con este post a implementar el atributo hreflang de manera fácil y sencilla.
Tabla de contenidos
¿Qué es la etiqueta Hreflang?
La etiqueta hreflang se trata de un atributo HTML que se utiliza en los sitios webs para diferenciar las páginas que están disponibles en varios idiomas y así ofrecer a los visitantes de diferentes regiones el contenido de manera correcta.
Gracias a este marcador los motores de búsqueda, como Google o Yandex, pueden diferenciar cada página según la localización de los usuarios.
Un ejemplo, si buscamos “zara” en España, veremos este primer resultado:
Mientras que, si lo hacemos en Estados Unidos, veríamos algo así:
¿Para qué sirve la etiqueta Hreflang?
Si tienes un negocio digital y estás abarcando varias regiones dentro de tu estrategia de marketing, debes implementar si o si la etiqueta hreflang dentro de tu página web.
Ya que te has esforzado en realizar un keyword research por cada región, has optimizado tu arquitectura a nivel SEO y traducido a cada idioma cada una de tus páginas, no querrás que el esfuerzo realizado no haya servido para nada.
Además, hay muchos factores que influyen en la importancia de la etiqueta hreflang: si estás buscando en Google, entras en una web que no te ofrece el contenido en tu idioma, ¿Qué harías?
Seguramente vayas hacia atrás y vuelvas a la página de resultados de Google, lo cual implica varias cosas:
- Aumentaría el dwell time (tiempo de parada)
- Aumenta tu tasa de rebote
- Menos tiempo en página
Existe también otro motivo muy importante que debes tener en cuenta: el contenido duplicado.
Aunque Google pueda detectar las páginas en distintos idiomas, si el contenido principal de las versiones localizadas no está traducido, Google las considera como duplicadas.
Supongamos que tienes una web con contenido en inglés británico y en inglés estadounidense. Las diferencias son mínimas, por lo que Google podría detectar tu contenido como duplicado y penalizarte por ello.
Por ende, si quieres ofrecer la mejor experiencia de usuario, mejorar el posicionamiento SEO y conseguir conversiones para tu negocio, debes implementar la etiqueta hreflang.
Cómo identificar una etiqueta hreflang
El atributo hreflang posee una sintaxis sencilla, por lo que te serán muy fáciles de crear:
<link rel=“alternate” href=“https://paginadeejemplo.com/pagina-idioma-español” hreflang=“es-ES”>
Vamos a desgranarlo por partes:
- link rel=“alternate”: indica que la página es una versión alternativa.
- href=“https://paginadeejemplo.com/pagina-idioma-español”: indica la dirección URL de la página alternativa.
- hreflang=“es-ES”: marca el idioma en el que se presenta la página.
Para este último apartado, podéis consultar la guía de códigos hreflang para cada región e idioma.
¿Cómo implementar rel=“alternate” hreflang=“x”?
Ya conocemos la etiqueta y sabes su estructura, así ahora toca implementar hreflang de manera correcta para que los motores de búsqueda puedan ofrecer la mejor versión de tus páginas a tus usuarios según el idioma o localización
Implementación del hreflang mediante HTML
Para poder implementar hreflang mediante código HTML, debemos insertar la etiqueta <link> que hemos visto en el anterior punto dentro del elemento <head> de tu página.
Es importante que estén introducidas todas las versiones de los idiomas una tras otras, como si fuera una lista.
Este sería el aspecto que posee una etiqueta hreflang dentro del código HTML si le damos a inspeccionar dentro de nuestro navegador desde la web de Apple:
Implementación del hreflang en la cabecera HTTP
Si quieres mostrar archivos que no posean HTML como, por ejemplo, un archivo en formato PDF, puedes usar la cabecera HTTP para indicar a los motores de búsqueda las distintas versiones de tus páginas.
Vamos a usar de ejemplo un archivo PDF que se va a mostrar a los usuarios en España y otro de manera internacional. El encabezado HTTP debe tener la siguiente sintaxis:
Link: <http://es-es.ejemplo.com/archivo.pdf>; rel=“alternate”; hreflang=“es-ES <http://es.ejemplo.com/archivo.pdf >; rel=“alternate”; hreflang=“es”
Implementación del hreflang mediante Sitemap
Por último, podremos implementar hreflang a través de un sitemap. Para ello, necesitarás incluir el elemento <loc> para cada URL única y la etiqueta <xhtml:link> para especificar los idiomas y regiones de la página.
Para el ejemplo, vamos a utilizar dos páginas: una para los usuarios de España y otra para los usuarios de México.
El sitemap debería ser parecido al código de a continuación:
Ya conoces las 3 opciones para implementar hreflang en tu página web. Sin embargo, es importante saber si el código posee la sintaxis correcta. Para ello, puedes utilizar el validador hreflang de TechnicalSEO para testearlo antes de implementarlo en tu web.
Cómo configurar hreflang en los distintos CMS
A la hora de implementar el atributo hreflang en un sistema de gestión de contenidos (más conocidos como CMS), no suele resultar una tarea sencilla, ya que puede que no tengamos acceso al código fuente o sea muy tedioso de localizar.
Pero no te preocupes, existen diferentes maneras para configurar la etiqueta hreflang dentro de tus páginas web creadas en WordPress o en Prestashop.
Hreflang para WordPress
En WordPress, la manera sencilla de implementar hreflang es mediante los famosos plugins: fragmentos de códigos que se instalan dentro de nuestro CMS sin necesidad de programar. Pueden ser gratuitos con opciones limitadas o de pago.
Un plugin gratuito sería Polylang, el cual ofrece una interfaz muy fácil e intuitiva para poder crear contenido en distintos idiomas. Para una optima configuración, os recomendamos leer su guía de instalación.
Si por el contrario deseas un plugin más completo y que te ofrezca un buen servicio, recomendamos el plugin WPML, ya que es el plugin que utilizamos para los proyectos internacionales de nuestros clientes.
Hreflang para Prestashop
En Prestashop la cosa cambia con respecto a WordPress. Si no tenemos acceso al archivo header.tpl de la página, vas a tener que recurrir a los módulos, el equivalente a los plugins de WordPress, solo que aquí son de pago.
Entre los más recomendados, se encuentran el Módulo Canonical SEO URLs + Google Hreflang Pro y el Módulo Hreflang y etiquetas canónicas en todas las páginas.
Ambos cuentan con una demo para que puedas ver las características de cada uno de ellos antes de decidirte.
Conclusión
Ya conoces todo lo que necesitas saber sobre la etiqueta hreflang y su configuración. Esperamos que esta guía te haya sido de gran utilidad y te ayude a la hora de implementarlo.
Comparte este artículo
Más artículos en
Categorías — Marketing Digital — Estrategia Digital — Posicionamiento Web (SEO) — Smart Business — Smart Training
