Contenu multilingue

Last updated:

Toute entreprise qui opère dans plusieurs pays ou avec une clientèle qui parle plusieurs langues doit être en mesure d'échanger avec son public dans la langue de celui-ci. Avec le CMS de HubSpot, les utilisateurs peuvent créer des variantes multilingues de leur contenu qui permettent à l'utilisateur final de visualiser le contenu dans une langue qu'il comprend.

HubSpot met automatiquement en place un certain nombre de facettes d'un site web multilingue pour vous. Cependant, des étapes sont indispensables pour les développeurs afin de s'assurer que leur site web est disponible en plusieurs langues. 

Fonctionnalités multilingues par défaut de HubSpot

Lorsqu'une variante multilingue est créée pour une page dans HubSpot, nous procédons automatiquement aux opérations suivantes : 

  • création d'une nouvelle entrée dans le plan du site XML indiquant le nom et l'URL de la page traduite ;
  • spécification de la langue du contenu dans la page <head> pour les modèles créés à l'aide de la fonctionnalité de glisser-déposer ;
  • identification d'autres pages au sein du groupe de contenu multilingue suivant le format normalisé approprié, qui marque les autres pages comme des alternatives pour éviter les erreurs de contenu en double et identification du code ISO 639-1 associé à la (aux) traduction(s) de la langue :

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

  • réécriture des liens sur les pages de langue pour accéder aux versions intra-langue de la page liée afin de s'assurer que les visiteurs restent dans la même langue et d'éviter d'avoir à mettre à jour chaque lien sur chaque traduction de page. Pour un élément donné, vous pouvez désactiver cette réécriture en ajoutant la classe "hs-skip-lang-url-rewrite" à l'élément. 

Ce que HubSpot ne fait pas

Avec CMS Hub, HubSpot n'effectue pas automatiquement les opérations suivantes :

  • traduction du contenu de la page pour vous ;
  • redirection des utilisateurs vers une variante multilingue selon GeoIP ;
  • intégration d'un module de sélection de langue dans votre en-tête ou site web ;
  • définition de la langue d'une page pour les fichiers codés ;
  • définition de l'attribut directionnel de contenu pour les traductions dans une langue qui se lit de droite à gauche plutôt que de gauche à droite pour les fichiers codés.

Définir des variables de langue

Étant donné que les fichiers codés n'incluent pas automatiquement les déclarations de langue ou les attributs directionnels de langue de contenu, ceux-ci devront être configurés manuellement pour les modèles codés. Les variables de langue peuvent être définies en HTML ou renseignées via HubL, comme dans le modèle du boilerplate CMS. 

La définition de ces propriétés à l'aide de HubL permettra à ces données d'être renseignées dynamiquement dans le code HTML d'une page en fonction de la langue définie pour la page dans CMS Hub.

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

Utiliser des modules modifiables pour chaque page

Afin de s'assurer que le contenu peut être localisé à travers chaque instance d'utilisation d'un modèle, tirez parti de modules personnalisés à la place du contenu HTML codé en dur dès que possible. La création de modules pouvant être modifiés au niveau de la page permettra aux créateurs de contenu de définir du contenu spécifique qui apparaîtra sur chaque page sans avoir à modifier le code de modèle. Cela permet également d'utiliser un contenu unique entre des pages issues du même modèle. 

Inclure les traductions de champs dans des modules personnalisés et des thèmes

Pour soutenir votre équipe internationale, vous pouvez publier des traductions des modules que vous avez créés dans HubSpot.

Une fois que vous avez traduit le contenu du module et l'avez publié dans les langues des membres de votre équipe, les utilisateurs verront les libellés de champs pour ce module dans leur langue par défaut de compte. Remarque : Le contenu d'un module traduit ne sera pas traduit automatiquement ; vous devrez le faire vous-même. Vous pouvez créer des traductions de votre module dans n'importe quelle langue.  

Vous pouvez définir des traductions à l'aide des outils de développement local ou via le gestionnaire de conception.

Développement local

Pour définir des traductions à l'aide d'outils de développement local, chaque dossier de module et de thème peut contenir un dossier _locales, avec des sous-dossiers de paramètres de langue, chacun avec un fichier messages.json contenant des traductions de champ de module.

Capture d'écran de la modification des traductions des modules localement plutôt qu'avec un code

Gestionnaire de conception

Pour définir des traductions de champs via le gestionnaire de conception, lorsque vous affichez le module, accédez à l'option « Ajouter des traductions » à droite de l'écran. Sélectionnez les langues de travail de votre équipe dans le menu déroulant. À partir de là, vous pouvez sélectionner chaque langue et spécifier les conventions d'appellation pour chaque champ dans chaque langue.

Capture d'écran des traductions de champs dans le gestionnaire de conception

Les traductions de champs de thème n'ont pas d'interface dans le gestionnaire de conception et doivent être modifiées via les fichiers .json.

Traduire des pages système

Pour configurer des traductions pour les pages système, y compris les pages de réinitialisation de mot de passe et d'abonnement aux e-mails, vous pouvez personnaliser les champs de module personnalisé et de balise HubL avec votre contenu traduit. Découvrez-en davantage sur les champs disponibles pour les modules et les balises HubL de page système.

Inclure un sélecteur de langue

Pour permettre aux utilisateurs finaux de basculer entre les traductions disponibles, il est conseillé d'ajouter un module de sélection de langue à votre site. 

Un exemple de la façon d'implémenter un sélecteur de langue est disponible dans le boilerplate du thème 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 #}

Appliquer la recherche sur des sites web multilingues

La recherche de contenu prend en charge la recherche de contenu dans les différentes langues de votre site. Le paramètre de filtre de langue peut être utilisé lorsque vous appuyez sur/contentsearch/v2/search pour renvoyer des résultats dans les langues spécifiées uniquement. Ainsi, vous pouvez créer des expériences de recherche pour chaque langue de votre site web ou permettre aux visiteurs de rechercher dans plusieurs langues sur votre site web. 

Utiliser des modules et des partiels globaux

Utilisez les champs de module pour restituer le texte modifiable dans les en-têtes, les pieds de page et les barres latérales. Placez ces modules dans des partiels globaux. Non seulement les créateurs de contenu bénéficieront de la facilité d'édition, mais les partiels globaux prendront en charge la configuration de leurs paramètres pour chaque langue. 
Capture d'écran de l'éditeur de page montrant le partiel d'en-tête
Cet article vous a-t-il été utile ?
Ce formulaire est destiné à recueillir les avis sur la documentation pour les développeurs. Si vous souhaitez faire part de votre avis sur les produits HubSpot, veuillez le partager sur le forum des idéesde la communauté.