Si trabajas con webs multidioma o multipaís, tarde o temprano te toca lidiar con las etiquetas hreflang.
Si la etiqueta hreflang falla, da igual lo bien que hayas traducido la web o todo lo bien hecha que esté: perderás tráfico cualificado y tu web nunca posicionará bien.
Pero tranquilo, no estás solo. La mayoría de webs con varias versiones de idiomas cometen los mismos fallos. Y lo bueno es que siempre tienen solución. En este artículo te cuento qué es el hreflang, los errores más comunes y cómo arreglarlos de una vez por todas.
Mockup de Envato
Índice
¿Qué es hreflang?
La etiqueta hreflang es un atributo HTML que sirve para decirle a Google (y a otros motores de búsqueda) en qué idioma y para qué región está pensada cada página de tu web.
Imagina que tu negocio tiene una versión en español para España, otra en inglés para Reino Unido y otra también en inglés pero para Estados Unidos. Si no usas hreflang, Google puede confundirse y mostrar la versión de UK a usuarios de EE. UU. o viceversa.
Con la etiqueta hreflang indicas:
- «es-ES» → esta URL es para usuarios de España en español.
- «en-GB» → esta es para Reino Unido en inglés británico.
- «en-US» → esta para Estados Unidos en inglés americano.
De esa forma Google sabe qué versión mostrar a cada usuario en función de su idioma y ubicación, evitando que alguien en España acabe viendo la web en inglés de Reino Unido o que te indexe varias páginas como si fueran contenido duplicado (un error garrafal que pone a temblar a cualquier consultor SEO).
También se puede usar el hreflang solo con el idioma, sin especificar ningún país. Esto se aplica cuando tu contenido no cambia según la región y te da igual que lo lea un usuario de España, de México o de Argentina. En esos casos, con indicar el idioma basta para que Google entienda que esa versión sirve para cualquier hablante del idioma, sin necesidad de diferenciar por regiones.
Los errores de etiquetas hreflang más comunes
Idiomas o regiones mal indicados
Un clásico. Mucha gente se inventa combinaciones que no existen, como es-UK para español en Reino Unido, en-ES para inglés en España o cosas raras. Google directamente las pasa por alto. También pasa que se confunden y usan solo el país sin poner el idioma.
El formato correcto es siempre idioma (en minúsculas) o idioma (minúsculas) + país (en mayúsculas).
Solo idioma: es, en, fr…
Idioma + país: es-ES, en-GB, fr-CA…
La solución es muy sencilla: usa siempre la nomenclatura oficial. Si tienes dudas, revisa la lista oficial de códigos ISO de idiomas y países, ya que Google solo entiende esos.
- Lista de códigos de idiomas: https://es.wikipedia.org/wiki/ISO_639-1
- Lista de códigos de país: https://sede.agenciatributaria.gob.es/static_files/Codigo_paises.pdf
En WordPress con WPML o Polylang, los plugins ya generan hreflang automáticamente, pero debes asegurarte de configurar bien los idiomas/regiones en los ajustes. En Shopify, se gestiona con apps de traducción como Langify o Weglot, que crean los hreflang automáticamente. En desarrollos a medida, hay que añadir el atributo correcto en el <head> y en el sitemap.
Falta de reciprocidad
Imagínate que tu página en español enlaza a la versión en inglés con su etiqueta hreflang bien puesta, pero en la versión en inglés te olvidas de devolver el enlace a la española. En ese caso, Google lo interpreta como una implementación incompleta y puede ignorarlo por completo.
El hreflang siempre es un sistema de ida y vuelta. Cada URL debe enlazar todas sus versiones alternativas, y viceversa.
¿Y esto cómo se aplica? Pues los plugins y apps multilingües ya suelen encargarse de esto automáticamente (siempre que las traducciones estén correctamente enlazadas). En un desarrollo propio, toca programar la lógica para que cada página genere su set completo de hreflangs y añadirlas en el sitemap. Además, es necesario contar con un servicio de mantenimiento web que revise que estos datos estén actualizados en todo momento.
Imagen de Unsplash
URLs rotas, redirigidas o con noindex
Muchos hreflang apuntan a páginas que no funcionan: una URL con redirección (ej. de HTTP a HTTPS), en noindex, un error 404… En todos estos casos, Google no se fía: no puede validar que esa relación sea correcta y acaba ignorando la etiqueta. Al final, es como si no hubieras configurado nada.
Las etiquetas hreflang deben apuntar siempre a la URL final, accesible, indexable y con contenido.
Para comprobar esto, revisa con un crawler (Screaming Frog, por ejemplo) que todas las URLs respondan bien y no haya problemas de indexación o rastreo.
En WordPress, revisa que las traducciones no estén en borrador o con plugins que las bloqueen. Detectar estos errores a tiempo es clave, porque aunque parezcan pequeños detalles técnicos, son los que marcan la diferencia entre un hreflang funcional y uno que Google decide ignorar.
Olvidar el x-default
El x-default es el gran olvidado en la mayoría de implementaciones de hreflang. Mucha gente piensa que con tener las etiquetas por idioma y región ya está todo hecho, pero lo cierto es que el x-default cumple una función clave: indicar a Google qué url y versión debe mostrar cuando no hay una coincidencia clara con el idioma o la ubicación del usuario.
Imagina que tienes un diseño web hecho a medida en español para España (es-ES) y otro en inglés para Reino Unido (en-GB) y Estados Unidos (en-US). Ahora llega un usuario de Canadá con el navegador configurado en francés. ¿Qué versión debería ver? Si no tienes un x-default, Google puede decidir por su cuenta, y lo mismo le enseña la de Reino Unido aunque no tenga sentido.
El x-default actúa como una especie de “comodín”. Normalmente se pone la home principal con un selector de idioma, para que el usuario decida la versión que mejor le encaje.
De esa forma, Google entiende que esa página es la opción por defecto cuando no hay otra más adecuada.
Si usas algún plugin, módulo, aplicación o lo que sea de tu CMS (WordPress, Magento Prestashop o Shopify), seguramente ya haya una opción para indicar el x-default. Si no, es suficiente con indicarla en el sitemap de la siguiente manera:
<url>
<loc>https://ejemplo.com/es/</loc>
<xhtml:link rel="alternate" hreflang="es" href="https://ejemplo.com/es/" />
<xhtml:link rel="alternate" hreflang="en" href="https://ejemplo.com/en/" />
<xhtml:link rel="alternate" hreflang="x-default" href="https://ejemplo.com/" />
</url>
- <loc> → indica la URL principal de la página en cuestión (en este caso, la versión en español).
- <xhtml:link … /> → son todas las variantes alternativas (idiomas, regiones y la versión x-default).
Lo que hace Google es leer: “Vale, esta es la página base (loc) y aquí están sus versiones alternativas (xhtml:link)”.
¡PERO OJO! Si configuras la etiqueta hreflang desde varios métodos (plugin, sitemap, desarrollo personalizado…) es fundamental que esté implementado de manera coherente entre todos los métodos. Que en todos se indique de la misma manera, vamos. Si hay discrepancias y en el sitemap indicas una versión diferente que la del módulo, los motores de búsqueda no saben a cuál hacer caso y seguramente acaben ignorando todo.
¿Tu web trabaja para ti o contra ti?
Si no te genera clientes, algo falla. Lo arreglamos por ti.
La importancia de tener bien configurado el hreflang
El hreflang parece un detalle técnico sin importancia, pero marca la diferencia en proyectos internacionales. Si lo haces mal, no vas a recibir una penalización, pero sí vas a perder tráfico de calidad, visibilidad y, lo peor, vas a confundir a tus usuarios. Imagina que inviertes en traducir tu web a tres idiomas y luego Google muestra siempre la misma versión porque tus etiquetas están mal configuradas.
Recuerda las claves:
- Usa los códigos ISO correctos.
- Asegúrate de la reciprocidad entre idiomas.
- Comprueba que las URLs sean válidas, con código de respuesta 200.
- Añade siempre el x-default.
- Mantén la coherencia entre métodos de configuración de hreflang (o usa uno solo).
Hazlo bien y Google entenderá tu web como toca, mostrando a cada usuario la versión adecuada y dándote visibilidad en cada región. Y si ves que algo sigue fallando o no tienes ni idea por donde empezar, en nuestra agencia de marketing en A Coruña somos especialistas en solucionar marrones.
DESARROLLO Y MANTENIMIENTO WEB