hreflang en Webflow paso a paso: guía para no perder tráfico
Cómo añadir hreflang en Webflow paso a paso para que Google muestre el idioma correcto en cada país. Guía práctica con ejemplos y errores a evitar.
Tienes tu web de Webflow traducida a varios idiomas y todo se ve perfecto. Pero abres Google desde Francia y sigue apareciendo la versión en español. O peor: Google mezcla tus páginas y muestra la francesa a alguien que busca en español. El problema casi siempre es el mismo: falta el hreflang.
El hreflang es la etiqueta que le dice a Google qué versión de tu página enseñar según el idioma y el país de cada persona. Sin ella, tu esfuerzo de traducción se queda a medias, porque el buscador no sabe conectar las versiones entre sí. En esta guía te explico, paso a paso, cómo añadir hreflang en una web de Webflow, qué opciones tienes y cómo evitar los fallos que arruinan el posicionamiento.
Resumen rápido
- El hreflang le indica a Google qué idioma y país corresponde a cada URL, para que muestre la versión correcta en cada búsqueda.
- En Webflow puedes ponerlo a mano (con Localization o código en el
<head>) o automático con una herramienta externa como Lantis. - Cada página debe apuntar a todas sus versiones, incluida ella misma, y las etiquetas deben ser recíprocas (si A enlaza a B, B enlaza a A).
- Un hreflang mal montado (códigos inventados, URLs rotas, sin autorreferencia) es peor que no tenerlo: confunde a Google.
- Con Lantis el hreflang se genera solo para cada idioma, sin tocar código ni revisar etiquetas una por una.
Qué es el hreflang y por qué tu web lo necesita
El hreflang es un atributo HTML que marca la relación entre las distintas versiones idiomáticas de una misma página. En la práctica es una línea de código que vive en el <head> de cada página y dice algo como: "esta URL es la versión en francés, y aquí tienes la versión en español, en inglés y en alemán".
La respuesta corta a "por qué lo necesito": sin hreflang, Google puede indexar tus idiomas como páginas duplicadas o mostrar el idioma equivocado a tus visitantes. Y eso te cuesta tráfico y ventas.
Piensa en el recorrido de una persona que busca en francés desde París. Google tiene tu página en francés y tu página en español, con contenido equivalente. Si no hay ninguna señal que las conecte, el buscador puede:
- Mostrar la versión en español a esa persona francesa (que se irá enseguida).
- Considerar que las dos páginas compiten entre sí y repartir la fuerza de posicionamiento.
- Elegir por su cuenta qué versión indexar, sin tener en cuenta el idioma del usuario.
Con el hreflang, en cambio, le das a Google un mapa claro. Cada versión sabe cuáles son sus "hermanas" y el buscador puede enseñar la correcta a cada persona. Según Google, el hreflang es una señal, no una orden, pero es la señal más importante que tienes para el SEO internacional.
El hreflang no mejora el ranking por sí solo. Lo que hace es asegurarse de que la persona correcta ve la página correcta. Y una persona que aterriza en su idioma se queda, lee y convierte mucho más.
Cómo se ve un hreflang bien hecho
Antes de tocar Webflow, conviene entender el resultado que buscamos. Para una web en español, inglés y francés, cada página debe incluir en su <head> un bloque parecido a este:
<link rel="alternate" hreflang="es" href="https://tuweb.com/" />
<link rel="alternate" hreflang="en" href="https://tuweb.com/en/" />
<link rel="alternate" hreflang="fr" href="https://tuweb.com/fr/" />
<link rel="alternate" hreflang="x-default" href="https://tuweb.com/" />
Fíjate en tres detalles que marcan la diferencia entre un hreflang que funciona y uno que rompe cosas:
- Autorreferencia: la página en español también se incluye a sí misma en la lista. No es opcional.
- URLs absolutas: siempre con
https://y el dominio completo, nunca rutas relativas. - El
x-default: marca la versión que se muestra cuando no hay coincidencia de idioma. Suele apuntar a tu idioma principal o a un selector.
Los códigos de idioma siguen el estándar ISO 639-1 (es, en, fr, de…). Puedes añadir país con un guion: es-MX para México o en-GB para Reino Unido. Pero solo usa el código de país si de verdad tienes contenido distinto por país. Si no, quédate con el idioma a secas.
Opción A: hreflang manual en Webflow
Webflow tiene su función nativa, Webflow Localization, que en sus planes superiores genera hreflang de forma automática cuando creas versiones traducidas de tus páginas. Si ya usas Localization, buena parte del trabajo está hecho: revisa que las etiquetas aparezcan en el código publicado y que cada URL sea correcta.
El problema es que Localization es un añadido de pago con un coste que sube rápido, como cuento en la guía sobre precios y límites de Webflow Localization. Si no lo usas, tienes que montar el multilingüe y el hreflang tú mismo.
Poniendo el código a mano
Si gestionas los idiomas con páginas o carpetas separadas dentro de Webflow (por ejemplo, una carpeta /en/ y otra /fr/), puedes inyectar el hreflang manualmente:
- Ve a Page Settings de cada página.
- Abre el apartado Custom Code y localiza el campo Inside
<head>tag. - Pega el bloque de
<link rel="alternate" hreflang=...>con las URLs de todas las versiones de esa página. - Repite para cada página y cada idioma, ajustando las URLs.
- Publica y comprueba el resultado.
Aquí está la pega: en una web pequeña de 5 páginas y 3 idiomas, hablamos de 15 páginas y 15 bloques de código, cada uno distinto. En una web mediana, se convierte en un trabajo interminable y muy fácil de romper. Cada vez que añadas una página, tendrás que actualizar el hreflang de todas las demás. Es viable, pero pesado y frágil.
Opción B: hreflang automático con Lantis
La alternativa es dejar que una herramienta externa gestione idiomas y hreflang por ti, sin depender del plan de Webflow ni de pegar código página por página. Es lo que hace Lantis: pegas un pequeño snippet en la configuración de tu web, eliges los idiomas y Lantis se encarga del resto.
En lo que toca al hreflang, Lantis:
- Crea una URL propia por idioma (
/es/,/fr/,/en/…), que es justo lo que Google necesita para indexar cada versión por separado. - Genera las etiquetas hreflang automáticamente en todas las páginas, con autorreferencia y
x-defaultincluidos. - Mantiene un sitemap por idioma, para que el buscador descubra todas las versiones.
- Se actualiza solo cuando añades páginas o idiomas: no tienes que volver a tocar el código.
Aquí tienes las dos opciones cara a cara:
| Aspecto | hreflang manual en Webflow | hreflang con Lantis |
|---|---|---|
| Configuración inicial | Código en cada página | Un snippet, una vez |
| Nuevas páginas | Actualizas el hreflang a mano | Automático |
| Riesgo de error | Alto (códigos, URLs) | Bajo |
| URL por idioma | La montas tú | /es/, /fr/… automáticas |
| Sitemaps por idioma | Manuales | Automáticos |
| Precio | Según plan de Webflow | Desde 2 €/mes por idioma |
Además, Lantis no solo pone el hreflang: traduce el contenido con IA (puedes elegir entre Claude, DeepL o Gemini según el idioma) y sirve más del 70% de las traducciones al instante desde su propia caché, así que la web no se ralentiza. Puedes empezar gratis y ver el hreflang funcionando antes de pagar nada.
Errores de hreflang que arruinan el SEO
Un hreflang mal puesto confunde a Google más que la ausencia total de etiquetas. Estos son los fallos más habituales que veo en webs de Webflow:
- Falta la autorreferencia. Si la página en francés no se incluye a sí misma, Google puede ignorar todo el grupo de etiquetas.
- Etiquetas no recíprocas. Si la página en español apunta a la francesa, pero la francesa no apunta de vuelta a la española, la conexión se rompe.
- Códigos de idioma inventados.
es-ESestá bien;spa,spocastellanono existen para hreflang. - URLs relativas o con errores. El hreflang exige la URL completa con dominio. Un enlace roto invalida la etiqueta.
- Mezclar idioma y país sin necesidad. Usar
es-MXcuando en realidad tienes un solo español para todos crea segmentaciones que no aportan nada.
Si quieres profundizar, tengo una guía dedicada a los errores de SEO internacional que se cargan tus idiomas. La ventaja de automatizar el hreflang es precisamente esta: eliminas de un plumazo casi todos estos errores, porque las etiquetas se generan siempre bien.
Cómo comprobar que tu hreflang funciona
No te fíes de que "debería estar bien". Verifícalo:
- Inspecciona el código. Mira el código fuente de tu página publicada (clic derecho → Ver código fuente) y busca
hreflang: deben aparecer todas las versiones. - Usa Search Console. El informe de Segmentación internacional de Google Search Console te avisa de etiquetas sin retorno o mal formadas.
- Prueba desde otro país. Cambiando el idioma del navegador, comprueba que Google te muestra la versión correcta.
Si usas Lantis, este paso se simplifica: como las etiquetas se generan automáticamente y de forma recíproca, lo normal es que Search Console no reporte errores.
Preguntas frecuentes
¿Webflow pone el hreflang automáticamente?
Solo si usas Webflow Localization, la función multilingüe nativa de Webflow disponible en sus planes de pago superiores: en ese caso genera las etiquetas hreflang por ti. Si gestionas los idiomas con páginas o carpetas separadas, o con una herramienta externa, tendrás que añadir el hreflang tú mismo o dejar que esa herramienta lo haga. Alternativas como Lantis generan el hreflang automáticamente sin depender del plan de Webflow.
¿Qué pasa si mi web no tiene hreflang?
Sin hreflang, Google puede mostrar el idioma equivocado a tus visitantes o tratar tus versiones traducidas como contenido duplicado, repartiendo la fuerza de posicionamiento entre ellas. El contenido sigue existiendo, pero pierdes tráfico porque el buscador no sabe qué versión enseñar en cada país. Es una de las razones más comunes por las que una web traducida no recibe visitas internacionales.
¿El hreflang mejora el posicionamiento?
El hreflang no sube tu ranking directamente: es una señal para que Google muestre la versión correcta a cada usuario, no un factor de posicionamiento como los enlaces o el contenido. Su efecto real es indirecto pero potente: al mostrar a cada persona la página en su idioma, mejoran las métricas de permanencia y conversión, y eso sí refuerza tu posición a medio plazo.
Conclusión
El hreflang es la pieza invisible que hace que tu web multilingüe de Webflow funcione de verdad en Google. Puedes montarlo a mano —viable en webs pequeñas, tedioso en grandes— o dejar que se genere solo.
Si prefieres no pelearte con código en cada página ni revisar etiquetas una por una, Lantis traduce tu web de Webflow con IA, le da una URL propia a cada idioma y genera el hreflang y los sitemaps automáticamente, desde 2 €/mes por idioma. Pega el snippet, elige idiomas y deja que Google muestre a cada persona su versión. Puedes probarlo gratis hoy mismo.
Pon tu web en varios idiomas hoy.
Una línea de código. SEO real por idioma. Traducción con IA. Sin tarjeta para empezar.