Table des matières
Webflow Localization : Guide pour créer des sites web multilingues
Webflow a introduit la prise en charge native de la localisation, permettant aux designers et aux équipes marketing de créer des sites web multilingues directement dans le Webflow Designer. Cette fonctionnalité élimine le besoin de plugins de traduction tiers ou de dupliquer des projets entiers pour chaque langue.
Ce guide explique comment fonctionne la localisation Webflow, ses capacités et ses limites, la gestion du SEO, et comment elle s'intègre dans un flux de travail de localisation plus large.
Comment fonctionne la localisation Webflow
La fonctionnalité de localisation de Webflow utilise un système basé sur les paramètres régionaux (locales) où vous définissez un locale principal (votre langue source) et ajoutez des locales secondaires pour chaque langue supplémentaire.
Concepts clés
- Locale principal — Votre langue par défaut. Tout le contenu est d'abord créé dans le locale principal.
- Locales secondaires — Langues supplémentaires. Chaque locale secondaire peut remplacer n'importe quel texte, image ou visibilité d'élément du locale principal.
- Sous-dossiers de locale — Webflow génère des URLs avec des préfixes de locale :
example.com/fr/about,example.com/de/about. - Sélecteur de locale — Un composant intégré qui permet aux visiteurs de changer de langue.
Configurer les locales
- Ouvrez les paramètres de votre projet Webflow
- Accédez à l'onglet Locales
- Ajoutez des locales secondaires en sélectionnant une langue et une région
- Configurez les noms d'affichage et les préfixes d'URL pour chaque locale
Webflow prend en charge un large éventail de combinaisons langue-région suivant les normes BCP 47 (par ex. en-US, fr-FR, pt-BR).
Traduire le contenu
Contenu statique
Pour le contenu de page statique (titres, paragraphes, boutons), Webflow propose une expérience d'édition en contexte :
- Passez à un locale secondaire en utilisant le sélecteur de locale dans le Designer
- Cliquez sur n'importe quel élément de texte — le texte du locale principal apparaît comme référence
- Saisissez le texte traduit directement dans le Designer
- La mise en forme visuelle et le style restent cohérents entre les locales
Cette approche en ligne signifie que les designers et les traducteurs peuvent voir exactement comment le texte traduit apparaîtra dans la mise en page finale, détectant immédiatement les débordements ou les problèmes de mise en page.
Contenu CMS
Les collections Webflow CMS prennent en charge le contenu par locale :
- Chaque champ CMS peut avoir des valeurs spécifiques au locale
- Les pages de collection génèrent automatiquement des URLs avec préfixe de locale
- Les champs de texte enrichi, les images et autres types de champs sont tous localisables
- Les champs de référence et de multi-référence peuvent être localisés pour pointer vers du contenu associé approprié au locale
Par exemple, une collection d'articles de blog peut avoir des titres, du contenu et des images à la une différents pour chaque locale, tout en partageant la même structure de slug.
Éléments que vous pouvez localiser
- Contenu textuel — Tout élément de texte (titres, paragraphes, liens, boutons)
- Images et texte alternatif — Changer d'images par locale (utile pour les captures d'écran avec une interface localisée)
- Visibilité des éléments — Afficher ou masquer des éléments spécifiques par locale
- URLs des liens — Changer les destinations des liens par locale (par ex. documentation spécifique au locale)
- Champs de formulaire — Localiser le texte des espaces réservés et les étiquettes
- Contenu CMS — Tous les types de champs CMS prennent en charge les valeurs par locale
Éléments partagés
- Mise en page et structure — La mise en page est partagée entre tous les locales
- Styles et classes — Le style CSS est global
- Interactions et animations — Les déclencheurs et les animations s'appliquent à tous les locales
- Code personnalisé — Les scripts intégrés sont partagés (vous devez gérer la détection de langue vous-même)
SEO et gestion multilingue
La fonctionnalité de localisation de Webflow gère automatiquement plusieurs exigences SEO.
Balises hreflang
Webflow génère automatiquement des balises hreflang dans le <head> de chaque page :
<link rel="alternate" hreflang="en" href="https://example.com/about" /> <link rel="alternate" hreflang="fr" href="https://example.com/fr/about" /> <link rel="alternate" hreflang="de" href="https://example.com/de/about" /> <link rel="alternate" hreflang="x-default" href="https://example.com/about" />
Ces balises indiquent aux moteurs de recherche quelle version linguistique afficher aux utilisateurs dans différentes régions.
Sitemap
Le sitemap.xml généré inclut toutes les variations de locale de chaque page, aidant les moteurs de recherche à découvrir et à indexer toutes les versions linguistiques.
Balises meta par locale
Vous pouvez définir des valeurs spécifiques au locale pour :
- Titre de page (
<title>) - Meta description
- Titre et description Open Graph
- Image Open Graph
Cela garantit que chaque locale dispose de métadonnées correctement optimisées pour les moteurs de recherche et le partage sur les réseaux sociaux.
Limitations
Pas de traduction automatique
Webflow ne comprend pas de traduction automatique intégrée. Toutes les traductions doivent être saisies manuellement via le Designer ou importées via l'API Webflow. Il s'agit d'un choix de conception délibéré qui privilégie la qualité, mais cela signifie que l'effort de traduction initial incombe entièrement à l'utilisateur.
Contraintes de mise en page
Étant donné que tous les locales partagent la même mise en page, un texte significativement plus long ou plus court dans certaines langues peut entraîner des problèmes de mise en page. Le texte en allemand est souvent 30 à 40 % plus long qu'en anglais ; le texte en chinois et en japonais peut être plus compact. Testez les mises en page avec votre langue cible la plus longue pour vous assurer que les conteneurs gèrent correctement les débordements.
Pas de pluralisation ni de variables
La localisation de Webflow ne prend pas en charge ICU MessageFormat, les règles de pluralisation ou l'interpolation de variables. Chaque variante de texte doit être une chaîne complète et séparée. Pour le contenu dynamique qui dépend de comptages ou de données utilisateur, vous aurez besoin de JavaScript personnalisé.
Opérations en masse uniquement via l'API
Il n'existe pas d'import/export en masse intégré pour les traductions dans le Webflow Designer. Pour les grands sites comportant des centaines de pages, la traduction manuelle via l'éditeur visuel est chronophage. L'API Webflow prend en charge la gestion programmatique du contenu, permettant l'intégration avec des outils de traduction externes.
Intégration avec un TMS externe
Pour les équipes gérant des traductions à grande échelle, l'intégration de Webflow avec un système de gestion des traductions (TMS) via l'API permet :
- Export — Extraire le contenu en langue source de Webflow via l'API CMS
- Traduction — Les traducteurs professionnels travaillent dans le TMS avec mémoire de traduction, glossaires et contexte
- Import — Renvoyer les traductions terminées vers Webflow via l'API
Ce flux de travail est particulièrement utile pour :
- Les sites comportant plus de 50 pages ou éléments CMS
- Les équipes travaillant avec des traducteurs professionnels ou des agences
- Les organisations ayant besoin d'une mémoire de traduction pour maintenir la cohérence
- Les projets nécessitant une gestion de la terminologie à travers Webflow et d'autres plateformes
Bonnes pratiques
Concevoir pour la langue la plus longue
Lors de la création de mises en page, tenez compte de l'expansion du texte. Un conteneur qui s'adapte à « Sign Up » en anglais doit pouvoir accueillir « Registrieren » en allemand ou « Inscription » en français. Utilisez des conteneurs flexibles (flexbox, hauteur automatique) plutôt que des dimensions fixes.
Utiliser le CMS pour le contenu répété
Si le même texte traduit apparaît sur plusieurs pages (témoignages, descriptions de fonctionnalités, éléments de FAQ), stockez-le dans une collection CMS. Cela garantit que vous le traduisez une seule fois et qu'il se met à jour partout, plutôt que de traduire le même texte sur chaque page.
Planifier la structure des locales tôt
Ajouter la localisation à un site Webflow existant est possible, mais la planifier dès le départ est plus simple. Réfléchissez à votre structure d'URL, à l'emplacement du sélecteur de locale et au comportement de repli avant de construire.
Localiser les images contenant du texte
Si vos images contiennent du texte (bannières hero, infographies, preuves sociales), créez des versions spécifiques au locale. L'échange d'images par locale de Webflow simplifie cette démarche.
Foire aux questions
Combien coûte la localisation Webflow ?
La localisation Webflow est disponible sur des plans Workspace spécifiques. Le nombre de locales inclus varie selon le niveau du plan. Consultez la page de tarification actuelle de Webflow pour les derniers détails.
Puis-je utiliser des sous-domaines à la place des sous-dossiers ?
La localisation native de Webflow utilise des URLs basées sur des sous-dossiers (/fr/, /de/). La localisation basée sur des sous-domaines (fr.example.com) nécessite une configuration différente utilisant des projets Webflow séparés ou un hébergement personnalisé.
La localisation Webflow fonctionne-t-elle avec Webflow Ecommerce ?
Depuis 2025, la fonctionnalité de localisation de Webflow offre une prise en charge limitée pour Ecommerce. Le contenu des produits peut être localisé, mais la tarification, le paiement et les e-mails transactionnels ont des contraintes. Consultez la documentation de Webflow pour l'état actuel de la localisation Ecommerce.
Comment gérer les langues de droite à gauche (RTL) ?
Webflow prend en charge le sens de lecture de droite à gauche via les paramètres de locale. Lorsqu'un utilisateur consulte un locale RTL, l'alignement du texte et le sens de lecture sont ajustés. Cependant, la mise en miroir complète de la mise en page (direction flexbox, positions des marges) peut nécessiter des remplacements CSS personnalisés.
