¿Qué es el atributo Hreflang?
Hreflang es un atributo HTML que comunica el idioma y la región de destino de una página. Permite a los motores de búsqueda servir la versión más adecuada de esa página en función de las preferencias de país e idioma del buscador.
Hreflang es un importante concepto de SEO internacional. Ayuda a garantizar que el público adecuado vea la página correcta.
Por ejemplo, en lugar de que la misma página compita para los usuarios de España y México, puede tener páginas alternativas optimizadas para el idioma, la moneda, etc. de ese país.
Esto es lo que parece en la práctica.
Digamos que buscas en Google "semrush blog" en Estados Unidos. Este es el primer resultado:
Mientras que si estás en España, esto es lo que verás:
¿Qué aspecto tiene una etiqueta Hreflang?
Una Hreflang sigue una estructura coherente y sencilla. Por lo general, tiene este aspecto:
<link rel="alternate" href="url_of_page" hreflang="lang_code" />Y esto es lo que significa la sintaxis (lenguaje informático):
- link rel="alternate" significa que el enlace de esta etiqueta es una versión alternativa de esta página.
- href="url_of_page" es dónde se encuentra la página alternativa.
- hreflang="lang_code" es el idioma alternativo.
Nota: la etiqueta hreflang es una señal, no una directiva. Google y Yandex utilizan atributos hreflang. Baidu y Bing no. Se basan en el atributo HTML content-language.
Cómo crear una etiqueta Hreflang
Para crear una etiqueta hreflang, primero tienes que encontrar los códigos de idioma y país que necesitas. Y luego rellenar los espacios en blanco.
Hreflang admite códigos de idioma ISO 639-1 de dos letras y códigos de país y región ISO 3166-1 alfa-2.
(No siempre necesitarás el código de país o región, pero puede resultarte útil).
Supongamos que tu blog en inglés se ha traducido al español y al portugués. El atributo hreflang de un artículo debería tener este aspecto:
<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" />El atributo hreflang de cada página debe incluir una referencia a todas las páginas que sirven como alternativas.
Incluye una referencia a sí mismo. Google recomienda la autorreferencia hreflang en sus directrices.
Si tus atributos hreflang no hacen referencia a todas las páginas alternativas relevantes, los motores de búsqueda pueden ignorar o malinterpretar tus etiquetas hreflang.
Lo que significa que:
Los enlaces de referencia en el fragmento de código para el artículo en inglés anterior deberían aparecer en tus páginas en español y portugués.
Pero, ¿y si te diriges a otro país que también habla portugués? Como Brasil, por ejemplo.
(Puede que te interese hacerlo si vendes un producto en distintas divisas).
En ese caso, también tendrías que añadir el código de país.
Así, quedaría de la siguiente manera, siendo "pt" el código de país de dos letras para Portugal y "br" para Brasil:
Portugués en Portugal:
<link rel="alternate" href="https://ejemplo.com/pt/" hreflang="pt-pt" />Portugués en Brasil:
<link rel="alternate" href="https://example.com/br/" hreflang="pt-br" />La sintaxis aquí es un poco diferente. Es hreflang="idioma-país" en vez de solo hreflang="idioma".
Eso es todo lo que tienes que hacer.
Consejo profesional: también es importante definir etiquetas x-default. Indican la página alternativa para los usuarios cuando no hay otra versión local adecuada.
Las etiquetas x-default no son obligatorias, pero sí recomendables.
Para implementar una etiqueta x-default, debes añadir una anotación y establecer el atributo "href" en la URL a la que quieres que lleguen los usuarios si tu web no admite su idioma.
Como este (en último lugar):
<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 va la etiqueta Hreflang?
Existen tres formas de implementar los atributos hreflang:
- En la cabecera HTML de la página.
- En la cabecera HTTP (para archivos no HTML como los PDF).
- En el sitemap XML.
1. En el HTML
La forma más básica de indicar tus páginas alternativas es en el código HTML de la página.
Basta con añadir todos los atributos hreflang pertinentes en la parte <head> de la página.
Recuerda: cada versión lingüística de un artículo debe referenciarse a sí misma. Así como todas las demás versiones lingüísticas.
A continuación se muestra de nuevo la sintaxis para cada elemento:
<link rel="alternate" href="url_of_page" hreflang="lang_code" />El único problema real de este método es que puede ser confuso y llevar mucho tiempo.
Por ejemplo, cada vez que traduzcas un artículo a otro idioma, tendrás que volver atrás y añadir otra etiqueta hreflang a todas las versiones del mismo.
Nota: para un gran número de entradas hreflang, es probable que quieras indicar tus páginas alternativas a través de tu sitemap. Más adelante veremos cómo.
Para crear o modificar etiquetas hreflang en HTML, puedes utilizar una herramienta hreflang.
Para este ejemplo, utilizaremos la herramienta generadora de hreflang de Aleyda Solis.
Solo tienes que introducir la URL, el idioma y el país de cada versión del artículo en el que estés trabajando.
Selecciona "Etiquetas a incluir en el área head de las páginas HTML" y haz clic en "GENERAR LAS ETIQUETAS HREFLANG PARA ESTAS URLS".
A continuación, copia el código y pégalo en la etiqueta <head> de cada página.
2. En el encabezado HTTP
Las cabeceras HTTP son ideales para implementar atributos hreflang para contenido no HTML en tu web.
Como los PDF, por ejemplo.
Los códigos de cabecera HTTP transfieren datos entre un servidor y un cliente. Este código contiene información sobre la fecha de la solicitud, el remitente, el idioma preferido, etc.
Nota: también puedes utilizar este método para el contenido HTML. Pero puedes añadir mucha carga en términos de peticiones al servidor. Por lo tanto, es mejor utilizarlo solo cuando sea estrictamente necesario.
El formato de la cabecera en HTTP es el siguiente:
Link: <url 1>; rel="alternate"; hreflang="language code 1",
<url 2>; rel="alternate"; hreflang="language code 2", …Esto es lo que significa la sintaxis:
- <url x> es la URL de la página alternativa relacionada con la configuración regional asignada al atributo hreflang. Debe incluir marcas < y > alrededor.
- El código de idioma x es el código de idioma (o región) al que se dirige esta página.
Debes indicar un conjunto de valores <url>, rel="alternate" y hreflang para cada versión de la página, incluida ella misma, separados por una coma.
Supongamos que creas un documento PDF en tres versiones: una en inglés, otra en español y otra en portugués.
Tu cabecera HTTP debería tener este aspecto (para cada archivo):
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" 3. En el sitemap XML
El tercer método de implementación de hreflang es a través de su sitemap XML.
Un sitemap XML es un archivo que proporciona a los motores de búsqueda información sobre las páginas de su web.
Por lo tanto, es una buena forma de informar a Google de todas las variantes de idioma y región de cada URL.
También tiene una gran ventaja:
El sitemap XML te permite realizar cualquier cambio en tus atributos hreflang en un solo lugar.
Con los métodos HTML y HTTP header hreflang, tienes que entrar y actualizar varios archivos cada vez que traduces un blog o documento a otro idioma. Se convierte en un lío.
Para empezar, es necesario añadir un elemento <loc> para cada URL. Con entradas <xhtml:link> para cada versión de idioma y región de la página.
Incluida ella misma.
Lo que significa:
Si tienes tres versiones de una página, tu sitemap tendrá tres entradas. Una por cada URL. Y cada una de esas entradas tendrá tres listados idénticos.
Si seguimos con nuestro ejemplo original del blog en inglés, español y portugués, este es el aspecto que tendrá la parte del sitemap correspondiente a esta entrada del blog:
<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>Puedes utilizar la misma herramienta generadora de hreflang para crear o modificar etiquetas hreflang en un sitemap XML.
Empieza por introducir la URL, el idioma y el país de cada versión.
A continuación, selecciona "Atributos en un sitemap XML" y haga clic en "GENERAR LAS ETIQUETAS HREFLANG PARA ESTAS URL".
A continuación, copia el código y añádalo al sitemap XML de tu web.
Cómo encontrar y solucionar problemas de Hreflang
Puedes encontrar y solucionar los problemas de hreflang auditando regularmente tu web.
También puedes utilizar la herramienta Auditoría del sitio de Semrush como comprobador de hreflang.
Empieza por introducir tu dominio y crear un proyecto.
Después de que la herramienta rastree tu web, ve a la pestaña "Problemas". Después, busca "hreflang" en la barra de búsqueda.
Así:
Verás una lista de todos tus conflictos de hreflang. incluyendo el tipo de problema y cómo solucionarlo.
A modo de referencia, aquí tienes los problemas más comunes de hreflang y cómo solucionarlos:
Problemas con los valores hreflang
Este tipo de advertencia se activa cuando los códigos de país o idioma no tienen el formato correcto.
Es importante solucionar este problema porque los motores de búsqueda pueden ignorar las etiquetas hreflang con códigos incorrectos.
Y si ignoran la etiqueta, pueden mostrar a los usuarios la versión incorrecta de tu página, lo que no es bueno para tu SEO.
Soluciona este problema revisando las etiquetas hreflang de cada URL afectada.
Y asegúrate de que la sintaxis de cada atributo sigue los códigos correctos. Dos letras ISO 639-1 para idiomas e ISO 3166-1 alfa-2 para países y regiones.
Siempre puedes utilizar una herramienta generadora de hreflang para verificar o crear tus etiquetas.
Hreflang sin autorreferencia
El atributo hreflang de cada página debe incluir una referencia a todas las páginas que sirven como alternativas. Incluyendo una referencia a sí misma.
Si los atributos hreflang no se autorreferencian, los motores de búsqueda pueden ignorarlos o malinterpretarlos.
Soluciona este problema revisando cada URL afectada y añadiendo una etiqueta hreflang autorreferente al conjunto de atributos hreflang.
Problemas con enlaces hreflang incorrectos
Este tipo de advertencia se activa cuando hay un problema con el enlace en el atributo hreflang.
Por ejemplo, el enlace puede apuntar a una página que no funciona o que ha sido redirigida.
Si sucede, los motores de búsqueda pueden ignorar sus atributos hreflang.
Soluciona este problema comprobando cada URL afectada y cambiando la anotación para asegurarte de que apunta a una página que funciona.
Conflicto entre hreflang y rel=canonical URL
Este tipo de advertencia se produce cuando una etiqueta hreflang hace referencia a una URL no canónica.
Una etiqueta canónica es un atributo HTML que indica la versión principal de una página cuando hay páginas duplicadas (o casi duplicadas). Indica a los motores de búsqueda qué versión de una página tiene más autoridad y debe aparecer en los resultados de búsqueda.
¿Y si los atributos hreflang hacen referencia a una versión no canónica de una página concreta?
Las dos etiquetas se contradicen:
- El atributo hreflang indica que la página no canónica debe aparecer en los resultados de búsqueda de los usuarios que hablan determinados idiomas.
- La etiqueta canónica indica que debe aparecer una versión diferente de esa página en los resultados de búsqueda.
En pocas palabras: confundirá a los motores de búsqueda. Y probablemente ignorarán el hreflang, el canonical o ambos.
Para solucionar este problema, ve a cada una de las URL afectadas y cambia las anotaciones hreflang para que apunten a URL canónicas.
Automatiza tus auditorías de etiquetas hreflang
Después de aprender a implementar las etiquetas hreflang y solucionar los problemas relacionados, da un paso más automatizando tus auditorías hreflang.
De esta manera, se te notificará cualquier problema antes de que se convierta en un problema mayor.
Para automatizar tus auditorías de hreflang, debes configurar un informe periódico en Auditoría del sitio.
En la esquina superior derecha de tu panel de control, haz clic en el símbolo del engranaje "configuración".
A continuación, ve hacia abajo y busca "Programación".
A continuación, aparecerá una ventana emergente en la que podrás elegir la frecuencia con la que deseas realizar la auditoría.
Ajústalo al día que prefieras. A continuación, marca la opción "Enviar un correo electrónico".
Y haz clic en "Guardar".
Después de cada rastreo, aparecerán nuevos problemas en el cuadro "SEO internacional" de tu panel de control. Por lo tanto, asegúrate de comprobarlo con regularidad.
Ahora estás preparado para solucionar cualquier problema de implementación de hreflang que surja y mantener tus esfuerzos de SEO funcionando sin problemas.