Cómo crear un sitio web corporativo multilingüe con Weglot y Webflow

Un sitio corporativo que ya tiene buen posicionamiento en su mercado local pierde a todos los visitantes que buscan en otro idioma, y la solución obvia, reconstruirlo todo en un segundo idioma, suena tan costosa que puede paralizar el proyecto. Rara vez tiene que ser así.

Weglot lee el contenido que Webflow ya renderiza, lo traduce y sirve versiones específicas para cada idioma sin tocar tu lienzo de diseño ni la estructura de tu CMS. Esa separación es el gran atractivo para un equipo de marketing: el sitio en el que pasaste meses trabajando se mantiene exactamente igual, y la traducción se convierte en una capa adicional en lugar de un proyecto paralelo.

Pero antes de empezar, quiero ser honesto sobre el alcance. Weglot no es el único camino para tener un sitio multilingüe en Webflow y, para algunas estructuras corporativas, la función de localización propia de Webflow es una mejor opción. Te explicaré cuándo encaja cada una.

Sin embargo, si necesitas varios idiomas activos rápidamente, con traducción automática, etiquetas hreflang y URLs localizadas gestionadas por ti, es difícil superar a Weglot, y la configuración se hace realmente en un mismo día. Las siguientes secciones te guiarán desde la integración más rápida hasta un patrón de automatización en el lado del servidor para equipos que buscan control programático.

¿Qué necesitas para conectar Weglot a un sitio corporativo de Webflow?

Necesitas tres cosas antes de continuar:

• Un sitio de Webflow publicado en un plan de pago para que el código personalizado funcione
• Un proyecto de Weglot con una clave API y un plan adaptado a tu volumen de contenido
• Una decisión sobre la estructura de tus URLs antes de tocar el DNS

Nada de esto lleva mucho tiempo, pero saltarse el paso de elegir el plan adecuado es la razón más común por la que un lanzamiento se queda a medias.

Reúne los tres elementos antes de escribir una sola línea de código, porque cada uno condiciona al siguiente. El plan del sitio determina si tu fragmento de código se ejecuta, el plan de Weglot controla cuántas palabras e idiomas obtienes, y la decisión sobre las URLs define el trabajo en el DNS.

6 pasos para añadir Weglot a un sitio web corporativo de Webflow

El proceso completo consta de seis pasos:

• Crear el proyecto en Weglot
• Añadir el fragmento de código a Webflow
• Publicar y verificar
• Refinar las traducciones
• Configurar URLs para SEO
• Automatizar con la API de traducción

Sigue los pasos en orden, ya que cada uno depende del éxito del anterior. He incluido un resultado esperado al final de cada paso para que puedas confirmar que vas por buen camino antes de continuar, en lugar de tener que depurar errores más tarde.

1. Crea tu proyecto en Weglot y configura los idiomas

Empieza en el panel de control de Weglot, no en Webflow. Regístrate, crea un proyecto nuevo y selecciona tu idioma original junto con todos los idiomas de destino en los que planeas publicar. Weglot genera aquí tu clave pública de API y almacena la configuración de idiomas en el servidor; por eso, el fragmento de código que añadirás después solo necesita esa clave.

Elige los idiomas con cuidado, ya que cada uno cuenta para el límite de tu plan y consume palabras de traducción.

Para un lanzamiento corporativo, prefiero añadir los idiomas por fases en lugar de todos a la vez, empezando por los dos o tres mercados que ofrecen un mayor potencial de ingresos. La primera pasada de traducción de Weglot es automática y utiliza motores como DeepL, Microsoft y Google, por lo que cada idioma que añadas genera un borrador completo al instante que podrás perfeccionar más adelante.

Resultado esperado: Tu proyecto de Weglot existe, los idiomas están seleccionados y tu clave pública de API es visible en la configuración del proyecto.

2. Añade el fragmento de código de Weglot al head de Webflow

En Webflow, abre la configuración del sitio (Site settings), ve a la pestaña de código personalizado (Custom code) y pega el script de Weglot en la sección de código del head. Este fragmento carga la biblioteca de Weglot y la inicializa con tu clave. Esta es toda la integración necesaria en el front-end.

Aquí tienes el código exacto que proporciona Weglot:

<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script>
<script>
    Weglot.initialize({
        api_key: 'YOUR_API_KEY'
    });
</script>

La primera etiqueta de script carga la biblioteca cliente de Weglot desde su CDN. La segunda la inicializa con tu clave pública de API y, como Weglot ya conoce tus idiomas desde el panel de control, solo necesitas incluir la clave aquí.

Reemplaza YOUR_API_KEY con la clave del primer paso y deja el resto exactamente como se muestra. El código del head aplicado a todo el sitio afecta a todas las páginas, que es lo que buscas, ya que la traducción debe estar disponible en todas partes.

Resultado esperado: El código personalizado está guardado en la configuración del sitio y surtirá efecto en tu próxima publicación.

3. Publica el sitio y confirma el selector de idiomas

El código personalizado en Webflow solo se ejecuta en el sitio publicado, así que publícalo ahora. Una vez que el sitio esté activo, Weglot mostrará automáticamente un selector de idiomas, por defecto en la esquina inferior derecha, con los idiomas de destino que configuraste.

Haz clic en cada idioma y confirma que el contenido de la página cambia. Este es el momento en que la integración se hace realidad y es la forma más rápida de detectar si la clave de la API se escribió mal.

Si el selector no aparece, las dos causas habituales son que el sitio no se haya publicado o que la clave no coincida con tu proyecto; ambas las trato en la sección de solución de problemas.

Si todo funciona, navega también por algunas páginas del CMS, no solo por las estáticas, ya que el valor de un sitio corporativo suele estar en su blog y en sus colecciones de recursos. Weglot detecta el contenido del CMS automáticamente, por lo que esas páginas deberían traducirse sin trabajo adicional.

Resultado esperado: El sitio publicado muestra un selector de idiomas funcional y, al seleccionar cada idioma, se traducen tanto las páginas estáticas como las del CMS.

4. Refina las traducciones en el Editor visual

La traducción automática te ofrece un borrador completo, pero el contenido corporativo necesita una revisión, especialmente los nombres de productos, la terminología legal y los eslóganes. Abre el Editor visual de Weglot, que muestra tu sitio en vivo con traducciones editables en contexto, o utiliza la Lista de traducciones para una revisión al estilo de una hoja de cálculo.

Siempre hago que una persona revise la página de inicio, la navegación y cualquier página de precios o legal antes de anunciar un nuevo idioma, porque la traducción automática puede dañar la credibilidad si suena extraña.

Para mantener la terminología coherente, añade un glosario en el panel de control para los términos de marca y cualquier palabra que nunca deba traducirse, y considera solicitar una traducción profesional directamente a través de Weglot para las páginas más importantes.

Una advertencia: algunos elementos interactivos, como los flujos de carrito o inicio de sesión y los banners de cookies, no se comportan con normalidad en la vista previa del Editor visual, así que verifícalos mejor en el sitio en vivo.

Resultado esperado: Tus páginas clave se leen de forma natural en cada idioma y los términos de marca quedan fijados en un glosario para garantizar la coherencia.

5. Configura URLs de subdirectorios o subdominios optimizadas para SEO

Para convertir las traducciones en páginas que posicionen, cambia a una estructura de URL traducida en el plan Pro de Weglot o superior. Decide entre un subdirectorio (tusitio.com/fr/) o un subdominio (fr.tusitio.com) y sigue las instrucciones de DNS de Weglot para apuntar tu dominio a su infraestructura.

Con esta configuración, Weglot inserta etiquetas hreflang, traduce tu metacontenido y ofrece una URL indexable distinta por idioma, que es lo que los motores de búsqueda necesitan para posicionar cada mercado por separado. Las funciones de SEO de Webflow se aplican entonces a cada página localizada como de costumbre.

Si tu DNS funciona a través de Cloudflare, coordínate con el equipo de Weglot, ya que los dominios proxy requieren un manejo específico para evitar errores.

Para un sitio corporativo que ya posiciona en su mercado local, programo este paso con cuidado y envío los sitemaps actualizados después, ya que estás introduciendo un lote de nuevas URLs que quieres que se indexen correctamente en lugar de que se marquen como duplicadas.

Resultado esperado: Cada idioma se sirve desde su propia URL rastreable con etiquetas hreflang y metadatos traducidos.

6. Automatiza las traducciones con la API de traducción de Weglot en una aplicación de Webflow Cloud

Para los equipos que desean un control programático, Weglot ofrece una API de traducción, y el lugar seguro para llamarla es desde el lado del servidor.

Aquí es donde utilizo una aplicación de Webflow Cloud: ejecuta tu código en la infraestructura de borde de Webflow, en el mismo dominio, de modo que llamas a la API de traducción desde una ruta del lado del servidor y lees tu clave desde una variable de entorno en lugar de codificarla directamente en el código del cliente.

El patrón refleja cualquier guía de envoltorio de API para Webflow Cloud, donde un gestor de rutas actúa como proxy para una API de terceros.

Aquí tienes un gestor de rutas mínimo que traduce un lote de cadenas de texto:

// app/api/translate/route.ts
export const runtime = 'edge'

import { NextResponse, type NextRequest } from 'next/server'

export async function POST(request: NextRequest) {
  const { words, from, to } = await request.json() as {
    words: string[]
    from: string
    to: string
  }

  const res = await fetch(
    `https://api.weglot.com/translate?api_key=${process.env.WEGLOT_API_KEY}`,
    {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        l_from: from,
        l_to: to,
        request_url: request.url,
        words: words.map((w) => ({ w, t: 1 })),
      }),
    }
  )

  if (!res.ok) {
    return NextResponse.json({ error: 'Translation failed' }, { status: 502 })
  }

  const data = await res.json() as { to_words: string[] }
  return NextResponse.json({ translated: data.to_words })
}

El gestor lee una lista de cadenas y un par de idiomas de la solicitud, los envía al punto final de traducción de Weglot con tu clave leída desde una variable de entorno y devuelve solo las cadenas traducidas.

Cada objeto de palabra utiliza t: 1 para marcar texto plano, y la clave reside en process.env, nunca en el código del cliente. Webflow Cloud requiere Node.js 22 o posterior y Next.js 15 o superior, y se despliega con npm; los requisitos completos están en la documentación de Webflow Cloud.

Si deseas una referencia de construcción más completa, el patrón detrás de una aplicación serverless de Webflow Cloud se aplica directamente aquí.

Resultado esperado: Un Route Handler implementado devuelve traducciones de Weglot mediante una llamada del lado del servidor, procesando la solicitud a la API de traducción en el servidor en lugar de en el código del cliente.

¿Qué causa problemas con las traducciones de Weglot en Webflow?

La mayoría de los problemas de Weglot en Webflow se deben a un puñado de causas predecibles: un sitio no publicado, una clave que no coincide, tiempos de espera del CMS, brechas en la indexación o un conflicto con el proxy DNS. Ninguno es un misterio una vez que sabes dónde buscar, y cada uno tiene una solución sencilla. Los he organizado como casos independientes para que puedas ir directo al síntoma que estás viendo.

En casi todos los casos, la integración está bien y lo que falla es un detalle de configuración. Revisa el caso correspondiente a continuación, confirma la solución en el sitio publicado (no en el Designer) y resolverás la gran mayoría de los inconvenientes.

El selector de idioma no aparece después de publicar

La causa habitual es que el sitio no se volvió a publicar después de añadir el código, o que la clave de API en el fragmento no coincide con tu proyecto de Weglot. El código personalizado en Webflow solo funciona en el sitio publicado, por lo que los cambios sin publicar no tienen efecto. Vuelve a publicar y luego realiza una actualización forzada de la página en vivo.

Si aun así no aparece, abre la consola de tu navegador y busca un error de inicialización de Weglot, que casi siempre apunta a una clave incorrecta o truncada. Copia la clave de nuevo desde el panel de control de Weglot, asegurándote de que no haya espacios al final, y pégala en el código del encabezado.

Confirma que el fragmento esté en la sección del encabezado (head), no en el pie de página, ya que Weglot necesita inicializarse pronto. Una vez que la clave correcta se ejecute en una página publicada, el selector aparecerá automáticamente.

El contenido nuevo del CMS permanece en el idioma original

Cuando una entrada de blog o un elemento de colección recién publicado solo aparece en el idioma de origen, suele ser porque Weglot aún no ha detectado el contenido nuevo o porque la página estaba en caché.

Weglot escanea y traduce el contenido nuevo automáticamente, pero puede haber un breve retraso tras la publicación, y su primera pasada requiere que la página haya sido visitada para que Weglot pueda leerla. Visita la página nueva en el idioma original primero y luego cambia de idioma.

Si campos específicos del CMS nunca se traducen, comprueba si se renderizan de una forma que Weglot pueda leer en el DOM y confirma que el campo no esté bloqueado por una regla de exclusión.

Para los equipos que gestionan grandes colecciones mediante programación, la API del CMS de Webflow ayuda a auditar exactamente qué contenido se publica y cuándo, lo que facilita la comprensión de estos desfases temporales.

Las páginas traducidas no se indexan

Si tus traducciones están activas pero no aparecen en los resultados de búsqueda, la causa más común es que sigues usando la integración de JavaScript puro, que traduce del lado del cliente sin crear URLs independientes indexables. Los motores de búsqueda necesitan una URL distinta por idioma para indexar cada mercado.

Weglot es claro al señalar que el método de JS simple no ofrece beneficios de SEO.

La solución es pasar a una estructura de subdirectorio o subdominio en el plan Pro o superior, que sirve cada idioma desde su propia URL con etiquetas hreflang y metadatos traducidos.

Después del cambio, envía un mapa del sitio actualizado en Google Search Console para que Google pueda descubrir las nuevas URLs localizadas, y dale tiempo para que se ponga al día. Considero esto como un evento de SEO planificado, no como un simple interruptor, porque estás añadiendo un lote de nuevas URLs que quieres que se rastreen correctamente.

La configuración de subdirectorio devuelve un error de Cloudflare

Los equipos cuyo DNS pasa por Cloudflare a veces encuentran un error al configurar subdirectorios, porque el uso de proxy de Cloudflare entra en conflicto con la forma en que Weglot enruta el tráfico de los subdirectorios. Es una interacción conocida, no un error de Weglot.

El síntoma suele ser una página de error de Cloudflare en el subdirectorio traducido, no en tu sitio.

La solución consiste en ajustar la configuración del dominio proxy, algo que Weglot documenta y, en la mayoría de los casos, te ayuda a completar directamente.

Dado que los pasos exactos dependen de tu configuración DNS y de si utilizas el host raíz o el www, te recomiendo contactar con el soporte de Weglot para la configuración del subdirectorio en lugar de adivinar, especialmente en un dominio corporativo activo donde un error es visible para los clientes. Una vez que el enrutamiento es correcto, el subdirectorio sirve tus páginas traducidas con normalidad.

Los elementos interactivos fallan en el Editor Visual

Si los flujos de carrito, los sistemas de inicio de sesión o los banners de consentimiento de cookies se comportan de forma extraña mientras editas las traducciones, es algo normal. El Editor Visual de Weglot genera una vista previa que no ejecuta completamente todos los elementos interactivos, por lo que algunos componentes no funcionarán en él aunque lo hagan perfectamente en el sitio publicado.

Esto sorprende a quienes asumen que el editor es la página real.

No intentes arreglar esto dentro del editor. Edita las traducciones de texto circundantes si es necesario y luego verifica el comportamiento real en el sitio publicado.

Si te preocupa específicamente un banner de cookies traducido, ten en cuenta que las herramientas de consentimiento, como un banner de consentimiento de cookies GDPR, tienen sus propios ajustes de idioma que configuras en esa herramienta, independientemente de Weglot, que es a menudo la razón por la que un banner aparece sin traducir al principio.

Lleva tu sitio corporativo a varios idiomas en Webflow

Si tu lanzamiento también incluye contenido regional restringido, como áreas para inversores o socios, combínalo con una autenticación Auth0 adecuada en lugar de ocultar páginas en el lado del cliente, para que el contenido protegido permanezca protegido en todos los idiomas.

Cuando estés listo, pon en marcha tu proyecto de Weglot, añade el fragmento de código y publica. Tu primer mercado traducido puede estar activo antes de que termine el día, y la estructura SEO es un paso lógico a seguir, no un obstáculo.