Contenido en varios idiomas

Last updated:

Cualquier empresa que haga negocios entre regiones o con una base de clientes que hable varios idiomas debe poder conectarse con su audiencia en el idioma de la audiencia. Con CMS de HubSpot, los usuarios pueden crear variantes en varios idiomas de su contenido que permiten al usuario final ver el contenido en el idioma con el que se sienten más cómodos.

HubSpot establece un número de facetas de un sitio web multilingüe para ti automáticamente, pero también hay un número de pasos que los desarrolladores deben tomar para asegurarse de que tu sitio web está listo para varios idiomas. 

Funcionalidades multilingües predeterminadas de HubSpot

Cada vez que se crea una variante en varios idiomas para una página en HubSpot, automáticamente: 

  • Creamos una nueva entrada en el mapa del sitio XML que indique el nombre y la URL de la página traducida.
  • Especificamos el idioma del contenido dentro de la página <head> para las plantillas creadas con la funcionalidad de arrastrar y soltar.
  • Identificamos otras páginas dentro del grupo de contenido multilingüe siguiendo el formato estandarizado apropiado, que marca las otras páginas como alternativas para evitar errores de contenido duplicado y también identifica el código ISO 639-1 asociado con la(s) traducción(es) del idioma:

    <link rel="alternate" hreflang="lang_code" href="url_of_page" />

  • Vuelve a escribir enlaces en las páginas de idiomas para navegar a las versiones intra-idioma de la página enlazada para ayudar a los visitantes a mantenerse en el idioma y evitar la necesidad de que tengas que actualizar cada enlace en cada traducción de página. Para un elemento dado, puedes desactivar esta reescritura agregando la clase "hs-skip-lang-url-rewrite" al elemento. 

Lo que no hace HubSpot

Con el CMS de HubSpot, HubSpot no hace automáticamente:

  • traducir el contenido de la página para ti.
  • dirigir a los usuarios a una variante en varios idiomas basada en su GeoIP.
  • incluir un módulo de conmutador de idioma dentro de tu encabezado o sitio web.
  • especificar el idioma de una página para los archivos codificados.
  • establecer el atributo direccional de contenido para las traducciones utilizando un idioma que se lee de derecha a izquierda en lugar de de izquierda a derecha para los archivos codificados.

Establecer variables de idioma

Debido a que los archivos codificados no incluyen automáticamente declaraciones de idioma o atributos direccionales de idioma de contenido, esto debe configurarse manualmente para plantillas codificadas. Las variables de idioma se pueden configurar en HTML o rellenar a través de HubL, como en la plantilla Boilerplate de CMS. 

Configurar estas propiedades usando HubL permitirá que estos datos se rellenen dinámicamente dentro del HTML de una página en función del idioma establecido para la página dentro del CMS de HubSpot.

<html lang="{{ html_lang }}" {{ html_lang_dir }}>

Utilizar módulos editables por página

Para garantizar que el contenido se pueda localizar en cada instancia del uso de una plantilla, aprovecha los módulos personalizados en lugar de contenido HTML codificado siempre que sea posible. La creación de módulos que se pueden editar a nivel de página permitirá a los creadores de contenido establecer el contenido específico que debe aparecer en cada página sin tener que ajustar el código de la plantilla. También permite que se utilice contenido único en todas las páginas que comparten una plantilla. 

Incluir traducciones de campo en módulos y temas personalizados

Para respaldar tu equipo global, puedes publicar traducciones de los módulos que creaste en HubSpot.

Después de traducir y publicar el contenido en el módulo en los idiomas de los miembros de tu equipo, los usuarios verán las etiquetas de campo para ese módulo en el idioma predeterminado de su cuenta. El contenido de un módulo traducido no se traducirá automáticamente; deberás hacer esto. Puedes crear traducciones de tu módulo en cualquier idioma compatible.  

Puedes establecer traducciones usando las herramientas de desarrollo local o a través del Administrador de diseño.

Desarrollo local

Para configurar las traducciones usando herramientas de desarrollo local, cada carpeta de módulo y cada carpeta de tema pueden contener una carpeta _locales, con subcarpetas de idioma local, cada una con un archivo messages.json, que contiene traducciones de campo de módulo.

Captura de pantalla de las traducciones del módulo de edición local en VS Code

Administrador de diseño

Para configurar las traducciones de campo a través del Administrador de diseño, al ver el módulo, navega a la opción "Agregar traducciones" en el lado derecho de la pantalla. Selecciona los idiomas en los que trabaja tu equipo desde el menú desplegable. Desde allí, puedes seleccionar cada idioma y especificar las convenciones de etiquetado para cada campo en cada idioma.

Captura de pantalla de traducciones de campo en el Administrador de diseño

Las traducciones de campos de tema no tienen una interfaz en el Administrador de diseño y deben editarse a través de los archivos .json.

Traducir páginas del sistema

Para configurar las traducciones de las páginas del sistema, incluidas las páginas de restablecimiento de contraseñas y suscripción de correo electrónico, puedes personalizar los campos de etiquetas de módulo y HubL con el contenido traducido. Más información sobre los campos disponibles para los módulos y las etiquetas HubL de la página del sistema.

Incluir un conmutador de idioma

Para permitir a los usuarios finales alternar entre las traducciones disponibles, es recomendable que se agregue un módulo de conmutador de idioma a tu sitio web. 

Un ejemplo de cómo implementar un conmutador de idioma se puede encontrar en Boilerplate de temas de CMS. 

{# Header navigation row one #} <div class="header__row-1"> {% if content.translated_content.values()|selectattr('published')|length || is_listing_view && group.translations %} <div class="header__language-switcher header--element"> <div class="header__language-switcher--label"> {% module 'language-switcher' path='@hubspot/language_switcher', label='Language switcher', display_mode='localized' %} <div class="header__language-switcher--label-current"> {{ locale_name(locale) }}</div> </div> </div> {% endif %} <div class="header__search header--element"> {% module 'site_search' path='@hubspot/search_input', label='Search', field_label='Search', placeholder='' %} </div> </div> {# End header navigation row one #}

Implementación de la búsqueda en tu sitio web

La búsqueda de contenido admite la consulta de contenido en los distintos idiomas de tu sitio web. El parámetro de filtro de idioma se puede usar al pulsar/contentsearch/v2/search para devolver solo los idiomas especificados, lo que te permite crear experiencias de búsqueda para cada idioma en tu sitio web o permitir que los visitantes busquen en varios idiomas en tu sitio web. 

Usar parciales globales y módulos

Utiliza los campos del módulo para hacer que el texto en encabezados, pies de página y barras laterales sea editable. Coloca estos módulos en parciales globales. Los creadores de contenido no solo se beneficiarán de la facilidad de edición, sino que los parciales globales admiten la configuración de sus ajustes para cada idioma. 
Captura de pantalla del editor de páginas que muestra parciales del encabezado
¿Te resultó útil este artículo?
Con este formulario puedes enviar tu opinión sobre nuestros documentos para desarrolladores. Si tienes comentarios sobre el producto de HubSpot, puedes enviarlos al Foro de ideas.