Guía definitiva para crear un sitio web multilingüe en Squarespace

Ragazzo felice con logo squarespace

Squarespace no está pensado para tener un sitio web multilingüe.

Parece mentira, pero es cierto.

Squarespace es un CMS para crear sitios web que ha tenido un gran éxito desde 2014 hasta ahora, gracias a la variedad y calidad de sus plantillas gráficas y a la facilidad de personalización sin necesidad de programar.

¿Cómo es posible que este sistema, que levantó 78 millones de dólares en capital riesgo, obligue a los diseñadores web a hacer virguerías para diseñar una página web en varios idiomas?

Supongo que es una simple cuestión de números: la mayoría de los usuarios de Squarespace no necesita una web en varios idiomas y por eso Squarespace hace oídos sordos.

Mi humilde consejo es que no uses Squarespace si te estás planteando expandirte al extranjero y necesitas una solución multilingüe sólida, flexible y fácil de actualizar. Hay otros sistemas CMS que ya están diseñados para ser multilingües y que no te obligarán a hacer malabarismos, como en Squarespace.

Sin embargo, si ya tienes un sitio web creado con Squarespace y necesitas añadir una o más versiones traducidas, actualmente tienes 4 opciones:

  1. tener una página de inicio (cover page) enlazada con las diferentes secciones del sitio en cada idioma, con un menú desplegable para cada idioma
  2. crear un sitio diferente para cada idioma y enlazar esos sitios entre sí
  3. usar un plugin externo
  4. 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: menú principal como menú de idiomas

El primero es el método descrito en la ayuda oficial de Squarespace. No es el mejor, tanto es así que ni siquiera Squarespace usa este método en su propia web, squarespace.com.

Consiste en crear una página de inicio con dos o más botones o enlaces desde los que se accede a las versiones traducidas. Una vez dentro, el usuario encuentra el menú de idiomas como menú principal, en lugar de tener el selector de idiomas en un lado y el menú principal en medio.

Es la diferencia que hay entre este

Selector idiomas sitio multilingüe

o este

Selector idiomas sitio multilingüe con códigos

y este

Menú sitio multilingüe Squarespace

Es muy de los noventa, pero es la única opción viable si no quieres gastarte dinero extra en sistemas adicionales y si no quieres volverte loco añadiendo código de programación.

Desde el punto de vista de la experiencia del usuario, esta solución añade un paso (un clic) antes de que el usuario pueda acceder al contenido en el idioma deseado. También es cierto que puedes simplemente compartir con tus contactos la URL de la página de cada idioma, ya que cada página de Squarespace tiene una URL única.

La gran desventaja es que la cabecera, el menú y el pie de página de la web serán iguales en todos los idiomas.

Por ejemplo, en un sitio en tres idiomas, italiano, inglés y alemán, el usuario verá el menú repetido en los tres idiomas en cada página. Otros botones o llamadas a la acción (CTA) colocados en la cabecera no se podrán traducir.

En la web Daeverso.com, que ayudamos a crear, el problema se resolvió utilizando un icono de teléfono en lugar del texto «Llámame» o «Call me», que hubiese aparecido en un solo idioma en las tres versiones del sitio.

Captura de pantalla de la página de inicio en italiano del sitio Daeverso.com

El método de la cover page solo es aconsejable si:

  • el sitio que se va a traducir consta de pocas páginas, ya que hay que crear una página traducida para cada página original
  • el sitio debe traducirse a un número limitado de idiomas; ya que cada idioma aparece en el menú como un elemento de primer nivel, no hay espacio para más de 4-5 idiomas

En el ejemplo anterior de Daeverso.com, el sitio es de una sola página, así que tener el mismo menú repetido no molesta demasiado a la hora de navegar por él, puesto que se lleva a cabo mediante un simple salto hacia las diferentes secciones de la misma página.

Nota: Además de no estar diseñado para sitios multilingües, Squarespace tampoco tiene una función para traducir automáticamente las páginas, ni tiene un editor de traducción.

Para crear un sitio multilingüe con el método recomendado por Squarespace:

  1. Antes de nada, crea una página de inicio y muévela dentro de la sección No enlazadas del panel Páginas.
  2. Añade en la navegación principal una carpeta llamada Español que sirva de contenedor para los textos originales (si escribes tu sitio en castellano).

Nota: Los ejemplos de las imágenes a continuación se refieren al italiano, pero el proceso es el mismo para cualquier idioma original.

Animación de cómo crear una carpeta en Squarespace

  1. También en la navegación principal, añade tantas carpetas como idiomas haya en tu sitio. Asigna a cada carpeta el nombre del idioma en ese idioma, es decir, «English» para el inglés, «Italiano» para el italiano, «Français» para el francés, etc.

  2. En la carpeta Español, haz clic en + Añadir página para añadir las páginas de tu sitio. Atención: la primera página es la que se abre cuando el usuario hace clic en el botón de la cover page.

  3. Después de crear páginas y contenidos en el idioma original, duplícalos en las carpetas de los otros idiomas.

    Animación de cómo se duplican las páginas en Squarespace

  4. Una vez creadas las páginas traducidas, vuelve a la página de inicio en la sección No enlazadas y haz clic en Editar.

  5. Añade un texto o un botón para cada idioma.

  6. Enlaza cada texto o botón con la primera página de la carpeta de cada idioma.

Nota: Si actualizas una página en español, no olvides editar también sus traducciones. Como no hay forma de exportar el texto más allá de copiar y pegar, tendrás que hacer los cambios directamente desde la interfaz de administración de Squarespace.

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.

Otra limitación importante es la relacionada con los sitios web de comercio electrónico. Aunque Squarespace te permite vender productos gracias a las funciones de carrito de la compra y pasarela de pago, en un sitio Squarespace solo se permite configurar y usar una moneda a la vez.

O lo que es peor aún, todos los mensajes relacionados con la experiencia de compra, como los de la página de compra, solo aparecerán en un idioma, independientemente de los idiomas a los que esté traducida la web.

Método 2: diferentes sitios enlazados entre sí

El segundo método, sugerido siempre (de forma algo superficial, hay que decirlo) por Squarespace, es crear sitios separados y luego enlazarlos.

Esta solución tiene la ventaja de poder contar con menús y contenidos diferentes en varios idiomas, pero también implica que las páginas estén desconectadas entre sí.

Squarespace sugiere «unir los sitios con enlaces externos» y crear una página de aterrizaje con acceso a los distintos idiomas, soluciones que muchos usuarios considerarían insuficientes.

Por no hablar de que tener sitios separados significa pagar una licencia para cada sitio.

Método 3: uso de un plugin externo

Para traducir un sitio Squarespace también puedes utilizar plugins externos, la mayoría de los cuales se basan en sistemas de proxy de traducción. Algunos son:

  • WeGlot
  • Bablic
  • Easyling

Estos sistemas tienen varias ventajas. En el caso de Squarespace en particular, estos sistemas permiten acceder al contenido y traducirlo sin tener que usar la interfaz de Squarespace. A menudo esto se hace añadiendo un fragmento especial de JavaScript en el código de las páginas, a través de la funcionalidad de inserción de código (Code Injection), que se encuentra en la configuración avanzada de Squarespace, que requiere una suscripción Business o superior.

Todos los proxies de traducción proporcionan al usuario un panel de administración propio desde el que se pueden revisar los textos, traducirlos automáticamente o a mano y, en el mejor de los casos, exportarlos para una cómoda traducción fuera de línea, así como enviarlos al proveedor de traducción de confianza.

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.

Básicamente, si tu dominio está gestionado por Squarespace, es decir, si les has comprado el nombre de dominio, tienes que:

  1. Ir a la sección Configuración > Dominios. Encontrarás una opción que dice Gestionado por Squarespace
  2. Haz clic en Configuración avanzada
  3. Introduce los registros DNS que encontrarás en el panel de administración del proxy de traducción

En cambio, si has vinculado tu sitio Squarespace con un dominio comprado a terceros (a menudo los precios de los revendedores de dominios son más baratos que los de Squarespace), entonces tendrás que ir a la sección DNS del revendedor de dominios y configurar los registros DNS allí.

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

El cuarto método, basado en la introducción de código personalizado, es el que da 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, existe una página en cada idioma para cada contenido original, por lo que Google puede indexar todas las páginas correctamente.

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

  • estar familiarizados con el lenguaje JavaScript
  • estar familiarizados con el lenguaje CSS
  • tener una suscripción Business a Squarespace

El primer paso es añadir el código del idioma en la URL de cada página. A continuación, se añade un fragmento de JavaScript (normalmente en el pie de página) que oculta mediante programación todas las páginas que estén en idiomas distintos al seleccionado.

La selección del idioma se hace a través de un selector de idiomas (language switcher), que también se añade a través del JavaScript mencionado anteriormente.

Las páginas deben crearse de forma habitual. En este caso también, deberás crear una versión de cada página para cada idioma. Puedes duplicar o copiar la página, como se indica arriba.

Algunos proveedores han empaquetado el código en un plugin de precio fijo que uno puede comprar e instalar en su sitio Squarespace, como Ervinas de Squarecamp Web Design o Multilingualiser.

Otros sugieren añadir CSS personalizado para ocultar secciones del sitio o elementos del menú a los ojos de los usuarios. No recomiendo esta solución porque es engorrosa de aplicar y contraproducente a nivel de SEO, ya que el contenido de la página queda en varios idiomas a la vez, algo que a Google no le gusta demasiado. El buscador, al igual que las personas, prefiere los sitios en un solo idioma.

En conclusión: conseguir que un sitio Squarespace aparezca en varios idiomas no es que sea pan comido precisamente. Hay que tener en cuenta las ventajas e inconvenientes de cada método:

Método Ventajas Desventajas Recomendado para...
Cover page y menú de idiomas = menú principal + Relativamente fácil de crear
+ No se requieren licencias adicionales
- Experiencia de usuario mejorable
- Misma cabecera y mismo menú para todos los idiomas
- Engorroso mantener actualizado el sitio
Web no muy grandes
Web con pocos idiomas
Diferentes sitios enlazados entre sí + Contenidos independientes entre sí - Necesidad de 1 licencia para cada web
- Experiencia de usuario mejorable
Sitios grandes con contenidos diferentes entre sí
Introducción de Javascript + Mejor experiencia de usuario - Necesarias habilidades técnicas Alguien que conozca Javascript y CSS

Sobre todo, como ya he dicho, si aún estás a tiempo, evalúa otros CMS que simplifiquen la gestión multilingüe. Pero si realmente necesitas traducir tu sitio Squarespace, contacta con nosotros y estaremos encantados de ayudarte.

Traductor técnico, project manager, emprendedor. Está licenciado en Lenguas y cuenta con un máster en Diseño y Producción Multimedia. Fundó Qabiria en 2008

Leer también

Habla con nosotros

Cuéntanos qué necesitas enviándonos un correo electrónico a hola@qabiria.com o mediante el formulario de contacto. Tendrás una respuesta garantizada en 24 horas, pero habitualmente mucho antes.

Contacta con nosotros