Guía rápida para crear páginas web multilingües con Webflow

Hace poco más de un año, Webflow introdujo la posibilidad de crear una web multilingüe.

Sin embargo, a menos que se esté dispuesto a optar por una versión de pago o a recurrir a herramientas de terceros, el proceso de traducción de una web Webflow a otros idiomas no es tan sencillo.

Cómo es posible que este sistema, lanzado en 2013, haya tardado tanto en sacar una versión de pago y haya obligado a los diseñadores web a recurrir a trucos para diseñar una web en varios idiomas?

Supongo que es una simple cuestión de números: la mayoría de los usuarios de Webflow no necesitan una web en más idiomas y, por lo tanto, Webflow no se preocupó tanto.

Encontrareis la prueba en el foro oficial de Webflow: un hilo iniciado en 2015 preguntando por la mejor solución para una web multilingüe solo recibió una posible solución en 2022.

Por ese motivo, Webflow ha introducido un método para traducir páginas web que quiere limitar el tiempo perdido. Sin embargo, si ahora tienes en mente una expansión al extranjero y necesitas una solución multilingüe sólida, flexible y fácil de actualizar, también puedes confiar en otros CMS diseñados para ser multilingües, que, en muchos casos, no te obligarán a dar los saltos mortales que a menudo requiere Webflow.

Y si este artículo parece muy similar al de Squarespace, bueno, la razón es que ambos sistemas tienen los mismos fallos cuando se trata de crear web en múltiples idiomas.

Por lo tanto, si ya tienes una web en Webflow y necesitas añadir una o más versiones traducidas, actualmente tienes 6 opciones:

1. duplicar todas las páginas, para poder tener una página de inicio vinculada a las diferentes secciones de la web en cada idioma, con un menú desplegable para cada idioma;
2. duplicar la página, creando una diferente para cada idioma y enlazándolas entre sí;
3. utilizar un plugin externo;
4. crear una web multilingüe con la función de localización;
5. crear una web multilingüe con Polyflow;
6. añadir código JavaScript personalizado.

Lo ideal es que elijas el método que mas te convenga antes de empezar a crear la página, porque la estructura de las páginas de la web depende del método elegido.

Método 1: duplicar todas las páginas

Una forma de aplicar este método es duplicar todas las páginas y luego traducirlas. Si utilizas colecciones (la llamada función «CMS» en Webflow), tienes que separar los campos de cada idioma en la misma colección.

Por ejemplo, si tienes noticias en 3 idiomas, tendrás que añadir el contenido en los 3 idiomas dentro de la misma página. A continuación, deberás configurar los enlaces de anclaje para mostrar y ocultar el contenido según el idioma.

Otro inconveniente es que hay que configurar los botones de selección de idioma en cada página.

Este método sólo es aconsejable si:

• la web que hay que traducir consta de pocas páginas, porque hay que crear una página traducida para cada página original;
• la web debe traducirse a un número limitado de lenguas.

Con este sistema se puede traducir el contenido creado por el usuario, pero todos los mensajes del sistema, por ejemplo las fechas en las entradas de un blog, se mostrarán en un solo idioma independientemente del resto de la página.

Método 2: duplicar diferentes páginas web interconectadas

El segundo método consiste en crear web separadas y luego enlazarlas.

Esta solución tiene la ventaja de poder tener menús y contenidos diferentes entre los idiomas, pero también significa que las páginas web están desconectadas entre sí, a menos que los conectes con enlaces externos, por ejemplo a través de una página de aterrizaje.

Ten en cuenta que tener web separadas también significa pagar una licencia por cada una de ellas.

Método 3: uso de un plugin externo

También se pueden utilizar plugins externos para traducir una página web Webflow, la mayoría de los cuales se basan en sistemas [proxy de traducción] (/recursos/blog/traducir-paginas-web-con-los-proxies-de-traduccion). Algunos son:

• WeGlot;
• Bablic;
• Easyling.

Estos sistemas tienen varias ventajas. En el caso de Webflow, en particular, estos sistemas permiten acceder a los contenidos y traducirlos independientemente de la interfaz de Webflow. A menudo esto se hace añadiendo un fragmento especial de JavaScript en el código de las páginas.

Todos los proxies de traducción ofrecen al usuario su propio panel de administración desde el que se pueden examinar los textos, traducirlos automáticamente o a mano y, en el mejor de los casos, exportarlos para una cómoda traducción offline o enviarlos al proveedor de traducción de su elección.

Sin embargo, el uso de un proxy de traducción nos penalizará desde el punto de vista del SEO, ya que el sistema proxy proporciona dinámicamente las páginas traducidas, pero estas no existen como tales.

Para superar el problema, los proveedores proponen soluciones más o menos complejas. Casi todas ellas pasan por la configuración del DNS, un proceso que puede no estar al alcance de todos.

El proceso suele implicar la creación de un registro DNS para cada idioma traducido, además de otro registro para vincular la página web al proveedor de la tecnología de traducción.

Método 4: crear una web multilingüe con Localización

Webflow lanzó la primera versión de Localización en 2022. Se trata de una herramienta de traducción que funciona directamente en Webflow, por lo que el trabajo no se delega a terceros. En este caso no se trata sólo de cambiar una web de un idioma a otro, sino de crear una versión en la que se pueda personalizar todo el contenido para que los usuarios experimenten una web adaptada a su local, es decir, a la combinación de idioma y país.

Esta función permite traducir no sólo textos (incluido el menú de navegación) e imágenes, sino también la configuración de la página.

La localización implica la elección de un local primario y un local secundario que heredará todos sus contenidos. De este modo, Webflow creará automáticamente una estructura URL que se diferenciará de la primaria por la presencia del código de país del local secundario seleccionado.

En el menú desplegable de la sección «Localización», se selecciona la localización necesaria, que se puede traducir automáticamente a través de la herramienta. También se puede simplemente hacer clic en cualquier parte del contenido para traducirla manualmente (esto también se aplica a las imágenes), sin cambiar el local primario, que permanece inalterado.

Sin embargo, cualquier cambio realizado en el local primario no provocará cambios en el secundario si éste ya ha sido traducido.

La función de localización está disponible con un coste adicional a la suscripción a Webflow, aunque existe una versión gratuita, pese a ser muy limitada.

Método 5: crear una web multilingüe con Polyflow

Otro método para localizar un web creada con Webflow consiste en utilizar Polyflow, una herramienta de traducción especializada que permite traducir páginas a más de 120 idiomas.

Se trata de una extensión de Google Chrome conectada a la cuenta Webflow, que vincula el/los proyecto(s) actual(es).

Una vez sincronizada la cuenta, Polyflow te dirige al proyecto, dándote la oportunidad de ver la estructura de la página y las entradas individuales disponibles para traducir, así como las opciones y la elección del idioma para la traducción.

Durante la fase de traducción, esta herramienta divide los elementos traducibles de la página en tres secciones:

• 'Páginas';
• «Recopilación CMS»;
• «Símbolos».

Aquí encontrarás el botón «+ Añadir alternativa», que te permite añadir la traducción correspondiente para cada entrada individual.

Cuando se llega al final de la fase de traducción, Polyflow genera una URL para cada idioma, para que los usuarios puedan cambiar el idioma de preferencia.

Esta función se ofrece solo previo pago en dos versiones «Business», que se diferencian principalmente en la cantidad de páginas traducidas, es decir, un máximo de 500 al mes o ilimitadas.

Por supuesto, cuando se trata de herramientas de traducción que facilitan y agilizan la productividad y ahorran tiempo, siempre hay que tener en cuenta el precio. Cada web de proyecto traducido por Polyflow tiene un coste separado por cada idioma de traducción utilizado, lo que también supone un aumento considerable de los costes.

Método 6: introducción de JavaScript y CSS personalizados

El cuarto método consiste en introducir un código personalizado. Esto es lo que da los mejores resultados, tanto en términos de experiencia de usuario como de SEO

Como el contenido se muestra en un solo idioma a la vez, el usuario no tiene que navegar por menús multilingües, sino que puede encontrar lo que busca rápidamente.

Y en comparación con los otros métodos, hay una página en cada idioma para cada contenido original, por lo que Google puede indexar todas las páginas.

Sin embargo, para usar este método es necesario:

• estar familiarizado con el lenguaje JavaScript;
• estar familiarizado con el lenguaje CSS.

Una aproximación a este método, junto con el código a insertar e instrucciones detalladas, puede encontrarse en multilinguale.webflow.io.

Conclusiones

Hacer una web Webflow en varios idiomas no es precisamente coser y cantar. Hay que tener en cuenta las ventajas e inconvenientes de cada método:

Método	Ventajas	Desventajas	Recomendado para...
Duplicación de páginas	+ Relativamente fácil de crear + No se necesitan más licencias	- Experiencia de usuario insuficiente - Engorroso de mantener actualizado	Web no muy grandes Web con pocos idiomas
Varias páginas web interconectados	+ Contenidos independientes entre sí	- Necesidad de 1 licencia para cada web - Experiencia de usuario mejorable	Páginas web grandes, con contenidos diferentes
Plugin externo	+ Fácil de configurar	- Solución de terceros, licencia adicional - Posibles problemas de SEO	Sitios heredados que necesitan una solución rápida
Uso de Localización	+ Experiencia de usuario más sencilla + Solución propia de Webflow	- Versión completa de pago	Internacionalización de las páginas web con imágenes
Uso de Polyflow	+ Mejor experiencia de usuario	- Versión completa de pago	Web más cortas
JavaScript integrado	+ Mejor experiencia de usuario	- Necesarias habilidades técnicas	Alguien que conoce JavaScript y CSS

Sobre todo, como ya se ha mencionado, si aún estás tiempo, evalúa otros CMS que simplifiquen la gestión multilingüe.