En este post vamos a ofrecer explicaciones detalladas para todos aquellos que quieren saber qué es la etiqueta hreflang y por qué es importante en la implementación de páginas web con versiones distintas, ya sea por cuestiones de idioma o geográficas. Estos consejos te ayudarán de cara a asuntos tan importantes como el posicionamiento SEO o incluso la experiencia de usuario.
¿Qué es la etiqueta hreflang?
Se conoce como hreflang a un conjunto de etiquetas del HTML que se usan para indicar a los motores de búsqueda el idioma o la función geográfica que desempeña cada una de las versiones existentes de una misma web.
Pueden existir diversos motivos por los cuales se desarrollan diversas versiones de un mismo sitio, ya sea por:
- Atender a usuarios de diferentes idiomas (inglés, español, alemán), que es lo más común.
- Ofrecer contenidos orientados a países o regiones, por ejemplo un sitio en español orientado a usuarios de España y otro a clientes de Argentina.
- Incluso porque existan versiones diferentes de una web orientadas a comunidades distintas dentro de un mismo país, por ejemplo un sitio orientado a personas de Estados Unidos que hablan en inglés o en español.
En estos casos podemos usar la etiqueta hreflang, lo que nos permite informar a Google y otros motores de búsqueda la versión de una web a la que deben enviar a un grupo de usuarios en particular, según sea su ubicación o sus preferencias.
Beneficios de la etiqueta hreflang en SEO multilingüe
El marco de uso más frecuente de la etiqueta hreflang lo encontramos cuando tenemos sitios en varios idiomas y queremos mejorar el SEO, pero más allá del posicionamiento, existen algunos beneficios del uso de esta etiqueta.
Mejora de la Experiencia del Usuario (UX)
El hecho de dirigir a los usuarios a las versiones adecuadas mejora la experiencia de usuario porque se puede encontrar el contenido directamente en el idioma preferido de cada persona. Está claro que también podría seleccionar el idioma en una interfaz de la propia web, pero a veces caer en páginas en idiomas diferentes al propio hace que los usuarios se confundan o piensen que se han equivocado en su búsqueda.
Aumento de la relevancia en búsquedas locales
Cuando hacemos búsquedas en Google y otros motores de búsqueda, siempre juega un papel a favor de los sitios web el hecho que tengan una relación directa con la ubicación de los usuarios. La etiqueta hreflang aumenta por tanto la relevancia de un sitio web en las búsquedas locales.
Optimización de la Tasa de Conversión (CRO)
Al eliminar la barrera del idioma de una manera transparente para el usuario, mejoramos la tasa de conversión de los sitios web, ya sea el CRO de ventas o cualquier otro tipo de acción como suscribirse a un boletín o rellenar un formulario.
Mayor visibilidad en motores de búsqueda internacionales
Si necesitamos que nuestro sitio web se posicione bien en motores de búsqueda internacionales la etiqueta hreflang puede mejorar sensiblemente los resultados, ya que los motores de búsqueda entenderán qué sitio web está orientado a cada país.
Evita contenido duplicado y mejora el SEO
Otro de los factores más importantes es ayudar a los buscadores a entender que dos páginas son versiones de un mismo sitio web. Esto es especialmente importante para evitar los problemas que pueden acarrear el hecho de que estos sitios web tengan contenidos muy similares, puesto que podrían ser considerados como contenido duplicado.
Además, en términos de SEO, también podemos beneficiarnos por conseguir una menor tasa de rebote de los usuarios que nos visitan, ya que podrán entrar directamente al contenido en su idioma o para su región, lo que favorece la navegación.
Sintaxis y formato de la etiqueta hreflang
Vamos a ver ahora cómo es la sintaxis de la etiqueta hreflang, de modo que nos ayude a implementarla en nuestros proyectos.
Sintaxis básica de la etiqueta hreflang
Para incorporar la información hreflang tenemos que usar la etiqueta <link> con algunos atributos específicos:
- Atributo rel=»alternate», para indicar que hay otros sitios web con una relación de alternativa al actual
- Atributo hreflang=»x», indicando el código del idioma o la combinación de idioma y región.
Por ejemplo, vamos a ver cómo sería esta etiqueta para indicar que existe una alternativa en inglés dirigida a usuarios en Estados Unidos
<link rel="alternate" hreflang="en-US" href="http://example.com" />
Pero también podríamos tener una versión que indique que simplemente están en inglés:
<link rel="alternate" hreflang="en" href="http://www.example.com/en" />
Y otra que solamente indique que está en español.
<link rel="alternate" hreflang="es" href="http://www.example.com/es" />
Utilización de códigos de idioma y región estándar
Es muy importante utilizar los códigos de idioma y región estándar para no liar a los buscadores. Los códigos de idioma son los ISO 639-1 y los códigos de país ISO 3166-1 Alpha 2.
Por ejemplo, «es» para español, «en» para inglés, «US» para Estados Unidos, «ES» para España, etc.
Implementación en el elemento head de la página
Existen diversos mecanismos para indicar las distintas versiones de un sitio web orientadas a idiomas o regiones. Lo más fácil y común es usar la etiqueta hreflang en el elemento <head> de cada página HTML.
Por ejemplo podríamos indicar las versiones del sitio web en español para distintos países;:
<link rel="alternate" hreflang="es-ES" href="http://www.ejemplo.es" />
<link rel="alternate" hreflang="es-MX" href="http://www.ejemplo.mx" />
<link rel="alternate" hreflang="x-default" href="http://www.ejemplo.com" />
En el código anterior hemos agregado incluso una versión «x-default» que sería la predeterminada.
Múltiples etiquetas para diferentes versiones
Como has podido ver en el código anterior, si un sitio tiene múltiples versiones lingüísticas y/o geográficas, tendremos que incluir los enlaces a cada versión con su propia etiqueta hreflang.
Es importante que siempre se incluya una referencia a sí misma, y luego una referencia a todas las otras versiones que hay disponibles.
Pasos para implementar la etiqueta hreflang en diferentes páginas web
A continuación vamos a detallar el proceso para organizar correctamente los sitios de contenido multilingüe y las etiquetas hreflang.
Auditoría del contenido multilingüe
Tenemos que empezar por realizar una auditoría del contenido que tenemos en múltiples idiomas. Así nos aclararemos sobre las distintas versiones que existen y el contenido que ofrecen. Este paso es importante porque hay que enlazar todo el contenido equivalente, es decir, cada página requiere sus propias etiquetas hreflang a las alternativas para cada uno de los sitios web multilingües.
Identificación de códigos de idioma y región correctos
Luego tenemos que identificar los códigos de idioma y región que se deben utilizar. Como dijimos anteriormente existen unos códigos estándar. Tendremos que informarnos para saber cuales son los que debemos utilizar en nuestros sitios web dirigidos a cada idioma o región geográfica.
Colocación de etiquetas hreflang en el elemento head
A continuación tenemos que colocar en el head de cada página las etiquetas que correspondan con todas las versiones distintas. En cada página colocaremos la etiqueta que enlaza con la propia versión que este sitio está representando, así como todas las etiquetas que enlazan con versiones alternativas.
Uso de las herramientas de Google Search Console
Una vez tenemos definidas las correspondientes etiquetas es muy útil acudir a Google Search Console para verificar la correcta implementación en cada una de las versiones del sitio para diferentes regiones e idiomas.
Pruebas de indexación y visualización en buscadores
Además, también resulta útil acudir a las páginas de los motores de búsqueda para los determinados países y realizar consultas de modo manual. Así podremos verificar que están enlazando con las alternativas que se han creado para cada uno de los idiomas o regiones. Incluso, si es posible realizar las búsquedas desde ubicaciones distintas.
Monitoreo continuo y ajustes necesarios
No debemos olvidarnos acompañar estos resultados a lo largo del tiempo, de modo que nos aseguremos que siempre está funcionando correctamente y se está enviando a los usuarios a las páginas adecuadas.
Consistencia en la actualización de contenido
Otra de las actividades importantes que deben realizar los editores de los sitios web es asegurarse que el enlazado con las distintas versiones de las páginas es consistente. Deberemos asegurarnos por ejemplo que no se está enlazando con páginas que ya no existen o con URLs antiguas en caso que se haya movido el contenido.
Con todos estos detalles conseguirás que tus visitantes accedan al contenido orientado a su idioma o región geográfica, obteniendo un mejor posicionamiento y experiencia de usuario.