Traducir contenido dinámico con IA: problemas y soluciones

Tu web traducida se ve perfecta en la home, pero al filtrar el catálogo los productos vuelven a salir en español, el carrito muestra «Añadir al carrito» en mitad de una página en alemán y el buscador devuelve resultados sin traducir. No es que la IA traduzca mal: es que ese contenido no existía cuando se tradujo la página.

La respuesta directa: los problemas típicos al traducir contenido dinámico con IA son el texto que se pinta con JavaScript después de cargar la página (SPAs, filtros, buscadores), los datos que no deben traducirse (precios, fechas, códigos, nombres de usuario), las variables y placeholders que la IA puede romper, y los formularios y mensajes de error. Se resuelven combinando traducción en servidor para el HTML inicial, un script que traduzca lo que se pinta después y exclusiones por selector CSS para lo que no debe tocarse. Es como funciona Lantis: el proxy entrega el HTML ya traducido y su script traduce solo el contenido renderizado en el navegador que el servidor nunca vio.

Resumen rápido

• Contenido dinámico es todo lo que no está en el HTML inicial: lo que pinta JavaScript, lo que llega de una API, lo que escriben tus usuarios.
• La traducción solo en servidor se pierde lo que aparece después; la traducción solo en el navegador es mala para el SEO. Lo robusto es combinar ambas.
• Precios, fechas, SKU y nombres propios no se traducen: se excluyen por selector CSS o con translate="no".
• Las variables ({{nombre}}, %s) deben llegar intactas, o la plantilla se rompe en todos los idiomas a la vez.
• Formularios y errores esconden mucho texto: placeholders, aria-label, title, alt y mensajes de validación.
• Lantis traduce el HTML en servidor, completa el contenido renderizado con JavaScript desde su script y te deja excluir bloques por selector CSS, desde $3,50/mes por idioma.

Por qué el contenido dinámico se resiste a la traducción

El contenido dinámico se resiste porque una herramienta de traducción solo traduce lo que ve, y gran parte de una web moderna no existe hasta que el navegador ejecuta JavaScript. Una web estática llega completa en el HTML; una SPA en React, Vue o Next.js en modo cliente llega casi vacía y se rellena después.

Eso afecta a las dos grandes familias de herramientas de forma opuesta:

• Traducción en servidor (proxy). Traduce el HTML antes de que llegue al navegador. Es lo mejor para el SEO, porque Google recibe la página traducida sin ejecutar nada. Pero si un componente se pinta después, el servidor no lo vio. Lo explicamos en qué es un proxy de traducción.
• Traducción en el navegador (script). Ve todo lo que se pinta, también lo dinámico. Pero el HTML original sigue en un idioma y la indexación de las traducciones depende de que el buscador renderice el JavaScript. Google procesa el JavaScript en una fase de renderizado posterior al rastreo, como detalla su guía JavaScript SEO basics, y otros buscadores y rastreadores de IA lo ejecutan peor o no lo ejecutan.

Por eso los widgets que traducen solo en el navegador tienen el problema contrario: todo se ve traducido, pero Google no ve URLs propias por idioma. Lo comparamos en Google Translate widget vs traducción profesional.

Los problemas típicos, uno a uno

Estos son los fallos que más vemos al traducir webs con contenido dinámico, y cómo se resuelve cada uno:

Traducir contenido dinámico no consiste en traducir más, sino en traducir en el momento correcto y dejar en paz lo que no es lenguaje: precios, códigos, nombres y variables.

Cómo lo resuelve un proxy con script de apoyo

El enfoque más robusto combina servidor y cliente, y es el que usa Lantis:

1. El proxy traduce el HTML en servidor. Cada idioma tiene su URL (/fr/, /de/) con hreflang, canonical y metadatos traducidos. Google y los rastreadores de IA reciben la página traducida sin ejecutar JavaScript.
2. El script cubre lo que el servidor no vio. En las páginas servidas por el proxy, el script de Lantis solo traduce el contenido renderizado en el cliente: componentes que se montan tras cargar, filtros, modales, «cargar más».
3. Traduce también atributos de formularios y accesibilidad: placeholder, aria-label, title y alt.
4. Respeta lo marcado como no traducible. Todo lo que lleve translate="no", la clase .notranslate o data-lantis-skip se queda como está. Además, desde el panel puedes excluir bloques por selector CSS (.precio, #footer) o páginas enteras por URL, con expresiones regulares.
5. La IA preserva etiquetas HTML, placeholders ({{ }}, %s, %d), URLs y emails tal como aparecen en el original.
6. Lo traducido se guarda y se cachea. La primera vez que aparece un texto nuevo tarda un poco más; después sale de caché. En las páginas servidas en servidor, más del 70 % de las traducciones salen de la caché edge con menos de 50 ms de latencia.

Ese mismo mecanismo es el que mantiene al día el contenido que cambia cada semana: lo detallamos en qué pasa con las traducciones cuando cambias tu web.

Si tu web es código propio y no un constructor visual, mira también web multilingüe con HTML o código custom, donde explicamos dónde va el snippet y cómo probarlo.

Paso a paso: auditar tu contenido dinámico antes de traducir

Antes de activar idiomas, dedica media hora a localizar lo dinámico de tu web:

1. Desactiva JavaScript y carga tus páginas clave. Lo que desaparece es contenido dinámico. Apúntalo: es lo que el servidor no verá.
2. Recorre los estados. Abre filtros, pagina, busca, abre modales, añade al carrito y provoca errores en formularios. Cada estado puede traer texto nuevo.
3. Marca lo que no es lenguaje. Precios, fechas, SKU, nombres de producto o de marca, números de pedido. Añade translate="no" en el código o anota su selector CSS para excluirlo.
4. Revisa tus plantillas con variables. Emails, mensajes de bienvenida, «Hola, {{nombre}}». Comprueba en la versión traducida que la variable sigue intacta.
5. Decide qué haces con el contenido de usuarios. Reseñas y comentarios: excluir, traducir o traducir avisando. Cualquiera vale si es una decisión, no un accidente.
6. Lista los widgets de terceros y comprueba si aceptan un parámetro de idioma. Si están en un iframe, ninguna herramienta de traducción de tu web los va a tocar.
7. Activa el idioma y repite los pasos 1 y 2 en la versión traducida. Es la prueba real.

Si tu web es una tienda, el checkout y los emails transaccionales tienen sus propias trampas: las repasamos en traducir checkout y emails de una tienda online.

Errores frecuentes

• Confiar solo en la traducción del navegador. Todo parece traducido al visitarlo, pero Google indexa una sola URL y tus idiomas no captan tráfico. Ver ¿la traducción automática penaliza el SEO?.
• Traducir precios y formatos. Una IA que «localiza» 1.299 € a 1,299 € cambia el significado. Excluye esos bloques.
• No probar los errores de formulario. Son el texto que el cliente ve justo cuando algo va mal; si sale en otro idioma, abandona.
• Traducir nombres de producto que son marca. Usa el glosario para fijarlos o excluirlos.
• Olvidar los iframes. Chat, reservas y pasarelas de pago se configuran en su propio panel.

Preguntas frecuentes

¿Se puede traducir una SPA hecha en React o Vue con IA?

Sí. Una SPA se puede traducir con IA combinando traducción en servidor para el HTML inicial y un script que traduzca lo que el framework pinta después. Lantis funciona así: el proxy entrega cada idioma en su URL con el HTML traducido y su script traduce el contenido renderizado en el cliente que el servidor no vio.

¿Cómo evito que la IA traduzca precios, fechas o códigos?

Excluyéndolos de la traducción. La forma estándar es añadir translate="no" o la clase notranslate al elemento. En Lantis también puedes excluir bloques por selector CSS desde el panel, como .precio o #footer, o páginas enteras por URL, y se servirán siempre en el idioma original.

¿La traducción automática rompe las variables como {{nombre}}?

Puede hacerlo si la herramienta no las protege. Lantis instruye al motor de IA para preservar exactamente etiquetas HTML, placeholders como {{ }}, %s y %d, URLs y emails. Aun así, conviene revisar en la versión traducida las plantillas críticas, como emails o mensajes de bienvenida.

¿Se traducen los placeholders y mensajes de los formularios?

Depende de la herramienta. Lantis traduce los textos visibles y también los atributos placeholder, aria-label, title y alt. Los mensajes de validación que genera el propio navegador dependen del idioma del navegador, y los de widgets externos en iframe se configuran en el propio widget.

Conclusión

El contenido dinámico no es un problema de calidad de la IA, sino de momento y de alcance: traducir lo que se pinta después, dejar intacto lo que no es lenguaje y no romper variables ni formularios. La solución más robusta combina HTML traducido en servidor, para que Google y los rastreadores de IA vean cada idioma en su URL, con un script que complete lo renderizado en el cliente y exclusiones claras para precios, códigos y nombres.

Lantis hace exactamente eso: proxy en servidor con URL, hreflang y sitemap por idioma, script que traduce el contenido renderizado con JavaScript, exclusiones por selector CSS o por URL y glosario de marca. Funciona con una línea de código en Framer, Webflow, Shopify, WordPress, Wix, Squarespace o cualquier HTML, desde $3,50/mes por idioma ($3 de 2 a 9 idiomas y $2,50 desde 10). Empieza gratis y prueba tus filtros, buscador y formularios en otro idioma hoy mismo.