La etiqueta hreflang es fundamental para los sitios de Internet globales o que operan en varios países. Permite a los motores de búsqueda identificar el idioma y la región de las páginas web, mejorando su visibilidad. En este artículo, explicaremos cómo implementar correctamente este atributo HTML.
¿Qué es una etiqueta hreflang y para qué sirve?
Una etiqueta hreflang es un atributo HTML que se utiliza para indicar a los motores de búsqueda el idioma y la ubicación geográfica de una página web.
¿Y para qué sirve? Este atributo ayuda a los motores de búsqueda a mostrar la versión correcta de una página a los usuarios que hablan diferentes idiomas o que se encuentran en diferentes regiones del mundo.
Hablamos de un elemento que fue introducido por Google en el año 2011. Es especialmente útil para sitios web que tienen contenido en varios idiomas o que han sido creados para una audiencia ubicada en una región específica.
La etiqueta hreflang y el SEO
No hay que olvidar que el mismo contenido en varios idiomas podría ser identificado como contenido duplicado. Por eso, se hace imprescindible incluir las etiquetas hreflang correspondientes. Así, se evitan las penalizaciones de los motores de búsqueda por contenido duplicado.
Este hecho tiene un profundo impacto en el SEO de una web. Cuando se utilizan correctamente, las etiquetas hreflang ayudan a los robots rastreadores a entender la relación entre las diferentes versiones de una página web y a clasificarlas correctamente en los resultados de búsqueda.
¿Cómo aplicar una etiqueta hreflang correctamente?
La implementación de la etiqueta hreflang no es un proceso demasiado complejo. No obstante, merece la pena atender las siguientes instrucciones para hacerlo de la manera más conveniente.
Identificar las páginas que necesitan este atributo HTML
Lo primero de todo es hacer un listado de las páginas que, dentro del sitio web, se presentan en varios idiomas o van dirigidas a diversas regiones.
Seleccionar el formato adecuado
Determina dónde vas a incluir la etiqueta. Es posible crearlas en la cabecera HTML o en los enlaces, en función de si deben aplicarse en toda la página o en contenidos específicos. Y también de otros modos, que te explicaremos más adelante.
Seleccionar el idioma y la ubicación geográfica para la etiqueta
Antes de implementar nada, debes conocer el código adecuado para los idiomas o las regiones a las que va dirigida tu página web. Si son muchos, trata de generar un listado.
Implementa las etiquetas hreflang
Teniendo en cuenta lo anterior, es momento de originar las etiquetas hreflang para cada versión de la página web. Luego, tendrás que implementar las etiquetas hreflang en las páginas correspondientes del sitio web y verificar que están funcionando bien.
Crear un plan para mantener las etiquetas hreflang actualizadas
El último paso es diseñar un plan para mantener las etiquetas hreflang actualizadas a medida que se agreguen nuevas versiones del sitio web o se realicen cambios en las ubicaciones geográficas. Es posible que debas trabajar con otros departamentos de la empresa para coordinar las acciones pertinentes.
Etiqueta hreflang: ejemplos prácticos de implementación
Seguidamente, te mostramos varias maneras de implementar la etiqueta hreflang, evitar el contenido duplicado y favorecer la indexación por parte de los motores de búsqueda.
Utilizar la etiqueta hreflang en enlaces
Se puede agregar la etiqueta hreflang en un enlace para indicar al rastreador que el contenido al que lo estás llevando está pensado para otra región o redactado en otro idioma.
Código de ejemplo:
<a href="https://example.com/en/" hreflang="en-us">English</a>
<a href="https://example.com/es/" hreflang="es-es">Español</a>
<a href="https://example.com/fr/" hreflang="fr-fr">Français</a>
Emplear este atributo HTML en la cabecera de tu sitio
Situarlo en la cabecera es otra forma habitual de incluir este atributo HTML en una web completa. Lo mejor es que este código se aplica en todos los rincones del sitio, así que es interesante para portales que han sido traducidos de manera completa.
Código de ejemplo:
<head>
<link rel="stylesheet" href="style.css">
<link rel="alternate" hreflang="en-us" href="https://example.com/en/" />
<link rel="alternate" hreflang="es-es" href="https://example.com/es/" />
<link rel="alternate" hreflang="fr-fr" href="https://example.com/fr/" />
</head>
Añadir varias regiones al sitemap
El sitemap, o mapa del sitio, es un archivo XML que ayuda a los buscadores a tener clara la estructura de un sitio web y a mantenerlos al día de los nuevos contenidos que se publican. También es un buen lugar para indicar las distintas versiones de un mismo sitio web.
Código de ejemplo:
<url>
<loc>https://example.com/en/</loc>
<xhtml:link rel="alternate" hreflang="en-us" href="https://example.com/en/" />
<xhtml:link rel="alternate" hreflang="es-mx" href="https://example.com/es/" />
<xhtml:link rel="alternate" hreflang="fr-fr" href="https://example.com/fr/" />
</url>
<url>
<loc>https://example.com/es/</loc>
<xhtml:link rel="alternate" hreflang="es-mx" href="https://example.com/es/" />
<xhtml:link rel="alternate" hreflang="en-us" href="https://example.com/en/" />
<xhtml:link rel="alternate" hreflang="fr-fr" href="https://example.com/fr/" />
</url>
<url>
<loc>https://example.com/fr/</loc>
<xhtml:link rel="alternate" hreflang="fr-fr" href="https://example.com/fr/" />
<xhtml:link rel="alternate" hreflang="en-us" href="https://example.com/en/" />
<xhtml:link rel="alternate" hreflang="es-mx" href="https://example.com/es/" />
</url>
Principales códigos regionales y de idiomas para la etiqueta hreflang
Finalmente, te proporcionamos un listado con los principales códigos regionales y de idiomas más frecuentes:
- Inglés de EE. UU.: en-us
- Inglés británico: en-gb
- Español de España: es-es
- Español de México: es-mx
- Español de Argentina: es-ar
- Francés de Francia: fr-fr
- Francés de Canadá: fr-ca
- Alemán de Alemania: de-de
- Italiano de Italia: it-it
- Portugués de Portugal: pt-pt
- Portugués de Brasil: pt-br
- Japonés: ja
- Coreano: ko
- Chino simplificado: zh-hans
- Chino tradicional: zh-hant
- Ruso: ru
- Árabe: ar
- Hebreo: he
Recuerda que una web puede estar en el mismo idioma, pero ir destinada a diferentes regiones. Por ejemplo, puedes utilizar la etiqueta hreflang con el código es-es y es-mx, si orientas los contenidos tanto a España como a México.
¿No te aclaras? Nosotros nos encargamos de la etiqueta hreflang de tu sitio
Esperamos que estas explicaciones te ayuden a mejorar el SEO de tu web aplicando las políticas regionales e idiomáticas más convenientes. Ahora bien, si no sabes muy bien por dónde empezar y quieres llegar a un público global, deja la gestión de tu sitio en manos expertas. Contacta ahora con nosotros para que te asesoramos sobre cómo mejorar el posicionamiento SEO de tu web. ¡Y olvídate de la etiqueta hreflang!