En este artículo te voy a proporcionar una información útil sobre la etiqueta hreflang, cómo puedes implementarla en tu sitio web y cuáles son algunos casos de uso de la etiqueta.

La etiqueta hreflang es un elemento HTML que ayuda a los motores de búsqueda a comprender en qué idioma está escrito un sitio web y hacia que idiomas va dirigido su contenido, en caso de que sea así y que se quiera llegar a otros idiomas o países. Las etiquetas generalmente se colocan dentro del código en los sitios web para que sean fáciles de identificar por los buscadores.

Para las empresas que abarcan varios países y culturas, proporcionar contenido en el idioma deseado de su audiencia no es opcional. 

La implementación de la designación de idioma correcta puede ser la diferencia entre una estrategia de contenido exitosa y una fallida. Integrar el atributo HTML correcto para el idioma, conocido como hreflang, ayuda a Google a comprender qué contenido entregar a un usuario.

Es un concepto fácil de entender, pero si no se sabe como etiquetarlo correctamente, podemos encontrarnos con que nuestro sitio web no llega a los paises o idiomas que deseamos. 

Vamos a cubrir los conceptos básicos sobre qué es hreflang, cómo implementarlo correctamente y cómo evitar algunos errores comunes con este atributo.

¿Qué es hreflang?

Hreflang es un atributo HTML utilizado por Google para especificar el idioma y la orientación geográfica de una página web. Esto permite a los sitios web ayudar a los motores de búsqueda a ofrecer la versión correcta de una página en diferentes idiomas. 

Por ejemplo, si tienes una versión de una página tanto en inglés como en español, debes designar qué página debe mostrar Google según la ubicación geográfica del usuario y el idioma preferido

La etiqueta hreflang es indispinsable para los negocios internacionales, y ahora vas a entender por qué es importante para el Seo de tu sitio web.

¿Por qué hreflang es importante para el SEO?

El atributo hreflang le dice a Google a qué idioma y país se dirige para una página específica, creando una mejor experiencia de usuario para los usuarios que buscan en ese idioma y país específicos. 

Para los SEO, la etiqueta hreflang garantiza que el resultado de la búsqueda se entregue en el idioma nativo o preferido en lugar de en uno diferente. Ayudándo al buscador a entender nuestro sitio web y con un contenido de calidad, el buscador nos recompensará a nosotros en el posicionamiento online.

¿Cómo son los atributos hreflang? 

Aquí te voy a mostrar un ejemplo de cómo se ve una etiqueta hreflang correcta de las 3 maneras posibles que tenemos de implementarla:

<link rel="alternate" hreflang="pt" href="https://example.com/blog/pt/article-name/" />

link rel=“alternate”: le estaremos diciendo a Google que en el enlace con esta etiqueta se encuentra una versión alternativa.

hreflang=“x”: Especifica el idioma en qué se diferencia de la versión del sitio web o url original.

href=“https://example.com/alternate-page”: le decimos a Google que la página alternativa se puede encontrar en esta URL.

Además, esta la opción de que en el mismo país se hablen dos idiomas o un dialecto del idioma principal por lo que es posible que quieras especificar una ubicación geográfica particular en el atributo html si hay una diferencia en el dialecto regional

En Estados Unidos, por ejemplo, podríamos ofrecer el idioma tanto en español como en inglés. Debido a la cantidad de población hispana que se encuentra allí puede interesarnos mostrar el contenido en los dos idiomas.

En este caso, el etiquetado quedaría de la siguiente manera:

<link rel="alternate" hreflang="en-us" href="https://example.com/blog/en/article-name/" />

<link rel="alternate" hreflang="es-us" href="https://example.com/blog/es/article-name/" />

Para saber los códigos a utilizar para cada ubicación e idioma puedes consultar estos enlaces: https://es.wikipedia.org/wiki/ISO_639-1 y https://es.wikipedia.org/wiki/ISO_3166-1#Tabla_de_c.C3.B3digos_alfa-2_asignados_o_reservados.

Cómo implementar atributos hreflang

Ahora pasemos a ver las formas recomendadas para implementar el atributo hreflang en cualquier sitio web:

  1. Etiquetas HTML
  2. Etiquetas en el encabezamiento
  3. Archivo sitemap del sitio

Cualquiera nos va a servir, aunque todos no tienen la misma sencillez. ¿Quieres ver qué implementación es adecuada para ti y tu sitio web?.

Implementación de etiqueta Hreflang usando HTML

La primera estrategia para implementar hreflang es poner elementos de enlace HTML hreflang en la sección <head> de cada página o de todo el sitio web que deberás crear como subdominio o directorio en el idioma deseado.

Implementación de etiqueta Hreflang usando encabezados HTTP

Para cualquier contenido que no sea HTML en su sitio, puede usar encabezados HTTP para especificar idiomas.

Implementación de la etiqueta Hreflang en el mapa del sitio XML

La tercera opción y, en mi opinión, la mejor para implementar la etiqueta hreflang, es usar el marcado de mapa de sitio XML. Podría decirse, según las directrices de Google que esta es la mejor manera de asegurarse de que todo el etiquetado sea correcto y se tenga en cuenta.

En esta estrategia, utiliza el atributo xhtml:link para especificar el hreflang de una página y sus variantes, haciendo que su mapa del sitio se vea así:

<?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://seopatia.com/página versión original.html</loc>
    <xhtml:link
               rel="alternate"
               hreflang="en"
               href="https://seopatia.com/página versión inglesa.html"/>

- Si hubieramos creado un subdominio o directorio de la página web en idioma alemán quedaría así:
    <xhtml:link
               rel="alternate"
               hreflang="de"
               href="https://seopatia.com/de/página versión alemana.html"/>

- Si fuera para la versión española dirigida a los usuarios que viven en Estados Unidos nos quedaría de esta manera:

  <loc>https://seopatia.com/página versión original.html</loc>
    <xhtml:link
               rel="alternate"
               hreflang="es-us"
               href="https://seopatia.com/us/versión española de la página.html"/>

Esta es la mejor manera para implementarlo puesto que tenemos todas las etiquetas en un mismo archivo y no afecta al peso y velocidad de carga de la web.

¿Cuántos atributos Hreflang necesita una página?

Tantos como los idiomas en los que ofrecemos nuestro contenido, así de simple.

Errores comunes de hreflang

Hay algunos errores técnicos en los que puedes incurrir . Presta atención a los más comunes, son estos:

  1. Asegúrate de que todas las variaciones de las páginas están incluidas en su hreflang para asegurarse de que no se pierda ninguna variación y para asegurarse de que sean bidireccionales (cada punto se apunta entre sí)
  2. Usa etiquetas hreflang «x-default» para decirle a Google en qué idioma está una página cuando ninguna otra variante de idioma es relevante. Puedes consultar esta práctica aquí.
  3. Añade un canónical a la página así misma para no incurrir en contenido duplicado.

No dejes de repasar estas prácticas para no caer en errores que pueden arruinar tu posicionameinto seo internacional.

Por último y no por ello menos importante, recuerda añadir a Search Console por separado cada subdominio o directorio creado dentro del dominio de la versión original de la página web.

Espero que esta guía te haya resultado útil para comprender la importancia de esta etiqueta y que si necesitas que te echemos una mano en este ámbito para expandir tu negocio online y tu visibilidad online internacional no dudes en contactar para ponernos manos a la obra

¡No te pierdas nuestros consejos de marketing digital!

Lea nuestra política de privacidad para obtener más información.