Points clés de l'article
- Configurer Weglot sur un site Webflow se fait en moins d'une heure, sans coder
- L'ajout du code JavaScript Weglot dans les paramètres Webflow est l'étape technique centrale
- Le widget Weglot s'intègre et se personnalise directement dans ta navigation Webflow
- Les balises hreflang gérées automatiquement par Weglot boostent ton SEO multilingue
- Le Visual Editor permet de réviser chaque traduction en contexte, avant mise en ligne
- Weglot offre plus de flexibilité et de langues que la localisation native de Webflow
Tu veux créer un site Webflow multilingue, mais l'idée de configurer Weglot te semble encore floue ? Bonne nouvelle : cette intégration est l'une des plus rapides du marché. En quelques étapes, tu peux proposer ton contenu en français, anglais, espagnol ou dans des dizaines d'autres langues, sans toucher à ton design ni à ta structure existante.
Weglot est un outil de traduction plug-and-play pensé pour les plateformes no-code comme Webflow. Il détecte automatiquement le contenu de ton site, traduit chaque page via un moteur de traduction automatique, puis te laisse réviser chaque phrase dans un Visual Editor visuel et intuitif. Résultat : un site web multilingue opérationnel, avec des balises hreflang correctement générées pour les moteurs de recherche, et un commutateur de langue élégant dans ta navigation.
Ce tutoriel complet t'accompagne de la création de ton compte Weglot jusqu'à l'optimisation de ton SEO multilingue. Que tu cherches à internationaliser une boutique e-commerce, un site vitrine ou un portfolio, ce guide couvre chaque étape de la configuration. Prêt à passer à la vitesse supérieure ?
Pourquoi choisir Weglot pour ton site Webflow multilingue ?
Webflow est une plateforme puissante pour créer un site professionnel, mais dès qu'il s'agit de gérer plusieurs langues, les options natives montrent vite leurs limites. C'est là que Weglot change la donne pour les équipes qui veulent aller vite.
Weglot s'impose comme l'outil de traduction de référence pour les sites Webflow grâce à plusieurs atouts clés : une mise en place en moins d'une heure sans développeur, une traduction automatique couplée à une révision manuelle dans le Visual Editor, un SEO multilingue natif avec balises hreflang et URLs propres, le support de plus de 110 langues, et une compatibilité totale avec les formulaires, les éléments dynamiques et le CMS Webflow.
Guide officiel Weglot pour traduire un site Webflow confirme que la configuration complète tient en quelques minutes pour un site standard.
La différence avec d'autres outils comme Localize est notable : Weglot détecte automatiquement tout le contenu de tes pages, y compris les textes générés par JavaScript.
Avantages de Weglot par rapport à Webflow Localization native
Webflow a lancé sa propre solution de localisation native, Webflow Localization, qui permet de gérer les langues directement dans le Designer. Mais elle comporte des contraintes importantes : nombre de langues limité selon le plan, tarification plus élevée pour plusieurs langues actives, moins de contrôle sur les traductions automatiques, et pas de Visual Editor dédié pour prévisualiser les traductions en contexte réel.
Weglot propose une approche plug-and-play : tu branches le script, tu choisis tes langues cibles, et tu optimises les traductions dans l'interface. Pour les PME qui veulent une localisation efficace sans budget conséquent, c'est souvent le meilleur choix.
Découvrir tout ce que Webflow peut faire pour ton site te donnera une base solide avant de plonger dans l'intégration.
Cas d'usage : quand préférer Weglot à la localisation native de Webflow
Weglot convient particulièrement si tu dois traduire rapidement un site existant, gérer plus de deux langues, ou centraliser les traductions avec des accès collaborateurs. Webflow Localization native reste pertinente pour des projets pensés multilingues dès le départ, avec une équipe dédiée au design par langue.
Étape 1 : Créer un compte Weglot et sélectionner Webflow
La première étape consiste à créer ton compte Weglot. Le processus est guidé et rapide : rends-toi sur weglot.com, clique sur "Essai gratuit", renseigne ton adresse e-mail et crée ton mot de passe. Sur l'écran de configuration, sélectionne Webflow dans la liste des plateformes, indique ta langue source, choisis tes langues cibles, puis renseigne l'URL de ton site pour initialiser la détection.
Guide complet de configuration technique de Weglot sur Webflow détaille chaque écran de cette configuration initiale avec des captures d'écran.
Après cette étape, Weglot génère ton code JavaScript unique à intégrer dans Webflow.
Inscription sur Weglot et choix du plan
Le plan gratuit Weglot est limité à 2 000 mots traduits et 1 langue. Pour un site vitrine complet, il faudra passer sur un plan payant, démarrant à quelques dizaines d'euros par mois selon le volume de mots. Le dashboard Weglot te donne automatiquement le nombre de mots de ton site après la première analyse, ce qui t'aide à choisir le bon plan. Plus ton plan est élevé, plus le nombre de langues actives simultanément est important et plus le coût au mot traduit devient avantageux.
Connexion de ton domaine Webflow à Weglot
Une fois ton compte créé, renseigne l'URL exacte de ton site dans les paramètres du projet. Weglot crawle ta page d'accueil pour estimer le volume de contenu à traduire. C'est aussi à cette étape que tu choisis entre sous-répertoires (exemple.com/fr/) et sous-domaines (fr.exemple.com) pour tes URLs traduites, un point détaillé à l'étape 3.
Étape 2 : Ajouter le code JavaScript Weglot dans les paramètres Webflow
C'est l'étape technique centrale de ce tutoriel. Configurer Weglot sur un site Webflow passe par l'injection d'un script JavaScript dans l'en-tête de toutes tes pages. Pas besoin de coder : Webflow propose un champ dédié pour ça.
Documentation officielle Webflow pour l'intégration Weglot explique précisément où coller ce code dans l'interface Webflow.
La procédure complète en six étapes : dans ton dashboard Weglot, va dans "Setup" et copie le script JavaScript généré. Dans ton projet Webflow, ouvre les paramètres du site (icône engrenage), clique sur l'onglet "Custom Code", colle le script dans la section "Head Code", sauvegarde, puis republie ton site pour activer le script. Cette mise en place prend moins de cinq minutes. Une fois le site republié, le widget Weglot apparaît automatiquement et les traductions s'activent.
Localisation du code JavaScript dans le dashboard Weglot
Dans le dashboard Weglot, retrouve ton script dans la section "Installation" puis "Webflow". Le code comprend une balise script pointant vers le CDN Weglot, suivie d'une ligne d'initialisation avec ta clé API unique. Cette clé est propre à ton projet : ne la partage pas publiquement.
Intégration dans les paramètres personnalisés de Webflow
L'onglet "Custom Code" dans les paramètres Webflow est l'endroit dédié aux scripts tiers. Attention : ce champ n'est accessible qu'avec un plan Webflow payant (Basic ou supérieur). Si tu es sur le plan gratuit, il faudra upgrader avant de pouvoir intégrer Weglot.
Vérification de l'activation du script sur ton site
Après republication, visite ton site et inspecte le code source (clic droit > "Afficher le code source"). Recherche la chaîne "weglot" pour confirmer la présence du script. Si le widget Weglot est visible sur ta page, la configuration est réussie.
Étape 3 : Configurer les URLs traduites avec sous-répertoires ou sous-domaines
Le choix de la structure d'URL pour tes pages traduites est une décision SEO importante. Elle impacte directement la façon dont les moteurs de recherche indexent ton contenu multilingue. Weglot propose deux options :
La recommandation générale pour les PME qui souhaitent configurer Weglot sur un site Webflow : privilégier les sous-répertoires. Ils concentrent l'autorité de domaine sur une seule URL racine, ce qui améliore le référencement global.
Configuration des sous-répertoires pour SEO multilingue sur Webflow explique en détail les démarches techniques selon chaque option.
Configuration des sous-répertoires (exemple.com/fr/, exemple.com/de/)
L'activation en sous-répertoire se fait depuis le dashboard Weglot, dans les paramètres de localisation du projet. Dans "Settings > URL Structure", sélectionne "Subdirectory", copie les enregistrements DNS fournis par Weglot, ajoute-les dans ton gestionnaire DNS, puis attends la propagation (entre 15 minutes et 48 heures). Le dashboard Weglot confirme l'activation une fois la propagation terminée. La personnalisation des slugs d'URL traduits est également possible, ce qui est précieux pour le SEO.
Alternative : mise en place de sous-domaines (fr.exemple.com)
Pour les sous-domaines, tu dois créer des enregistrements CNAME pour chaque langue pointant vers les serveurs Weglot. L'interface Weglot guide cette étape visuellement. Les paramètres régionaux peuvent aussi être associés à chaque sous-domaine, ce qui renforce la pertinence locale aux yeux de Google.
Impact sur le DNS et la propagation des changements
La propagation DNS peut prendre jusqu'à 48 heures selon les fournisseurs. Pendant ce délai, les URLs traduites peuvent être intermittentes. Planifie cette activation en dehors des périodes de fort trafic. Une fois la propagation terminée, un voyant vert dans le dashboard Weglot confirme que tout est opérationnel.
Étape 4 : Configurer le widget de sélection de langue
Une fois tes traductions actives, tes visiteurs doivent pouvoir basculer facilement d'une langue à l'autre. Le widget Weglot est l'interface visible qui leur permet de choisir, et sa personnalisation est entièrement gérée depuis le dashboard.
Par défaut, il s'affiche en bas à droite sous forme d'un bouton flottant. Tu peux le repositionner, le styliser et l'intégrer directement dans ta navbar Webflow. Les options disponibles incluent la position (flottant ou intégré dans la navigation), le style (drapeau, code langue ou nom complet), les couleurs via CSS, et la détection automatique de la langue du navigateur.
Positionnement et style du widget de langue
Depuis les paramètres de personnalisation du dashboard Weglot, tu choisis parmi plusieurs templates visuels. Pour une intégration parfaite avec ton design, tu peux générer un CSS personnalisé et l'injecter dans le champ "Head Code" de Webflow, juste après le script Weglot. Intégrer le commutateur de langue directement dans la navbar donne un rendu plus professionnel et cohérent avec ton identité visuelle globale.
Personnalisation du commutateur de langue dans ta navigation Webflow
Pour intégrer le commutateur dans ta navbar : ajoute un élément "Embed" dans le Visual Editor Webflow, colle le code HTML fourni par Weglot pour le commutateur personnalisé, applique tes styles CSS, puis teste sur mobile et desktop pour vérifier le responsive. Cette approche donne un sélecteur de langue natif, identique en apparence aux autres éléments de ton menu.
Options d'affichage : drapeau, code langue ou texte complet
Weglot propose trois modes d'affichage : les drapeaux, visuellement intuitifs mais parfois ambigus (espagnol = quel pays ?) ; les codes langue (FR, EN, DE), compacts et neutres pour des navigations épurées ; et le texte complet (Français, English, Deutsch), clair et recommandé pour les sites grand public. Tu peux aussi exclure certaines langues de l'affichage si tu travailles encore sur leurs traductions.
Étape 5 : Utiliser le Visual Editor pour réviser et valider les traductions
La traduction automatique de Weglot est performante, mais elle n'est pas parfaite. Le Visual Editor te permet de vérifier, corriger et optimiser les traductions directement en contexte, sur une prévisualisation de ton site réel. C'est l'une des grandes forces de Weglot : tu vois immédiatement le rendu visuel de chaque modification.
Tutoriel complet pour rendre un site Webflow multilingue avec Weglot consacre une large partie à l'utilisation efficace du Visual Editor.
Accès et navigation dans le Visual Editor
Pour y accéder : connecte-toi à ton dashboard Weglot, clique sur la langue cible que tu veux réviser, puis sur "Visual Editor". Navigue sur les pages de ton site, chaque texte traduit est surligné et cliquable. L'interface affiche côte à côte le texte source et la traduction proposée. Tu édites directement, tu sauvegardes, et le changement est instantanément visible sur ton site live.
Révision des traductions directement sur ton site
Commence par les pages les plus importantes pour ton référencement : la page d'accueil, les pages services, les articles de blog. Pour chaque segment, Weglot indique si la traduction provient du moteur automatique ou d'une saisie manuelle. Les paramètres régionaux sont aussi gérés ici : tu peux adapter les formats de date, les unités de mesure et les expressions idiomatiques selon la langue cible. Cette personnalisation fine distingue une vraie localisation d'une simple traduction mot à mot.
Gestion des traductions automatiques vs. traductions manuelles
Weglot combine les deux approches. La traduction automatique couvre l'ensemble du contenu en quelques secondes, puis tu peux manuellement affiner les segments prioritaires (titres, call-to-action, témoignages). Tu peux aussi faire appel à des traducteurs professionnels directement depuis le dashboard Weglot, qui propose une place de marché dédiée.
Améliorer le taux de conversion de ton site passe aussi par des traductions soignées : un call-to-action bien localisé performe toujours mieux qu'une traduction automatique brute.
Étape 6 : Optimiser ton SEO multilingue avec les balises hreflang
C'est souvent la partie la moins bien comprise, mais l'une des plus importantes. Les balises hreflang indiquent aux moteurs de recherche quelle version linguistique d'une page afficher selon la localisation de l'utilisateur. Sans elles, Google peut afficher la mauvaise version de ton site à un visiteur étranger.
Gestion du SEO multilingue et des balises hreflang avec Weglot explique précisément comment Weglot automatise cette gestion pour chaque langue.
Weglot gère les balises hreflang automatiquement. Pour chaque page traduite, il ajoute dans le code HTML les balises correspondant à chaque version linguistique. Il prend également en charge les métadonnées traduites (title, meta description), les sitemaps multilingues générés et soumis automatiquement, les URLs canoniques pour éviter le contenu dupliqué, et le paramètre x-default pour les utilisateurs sans langue détectée. Ce niveau d'automatisation est souvent ce qui convainc les PME de choisir Weglot plutôt que des solutions manuelles.
Ajout automatique des balises hreflang par Weglot
Dès qu'une langue est activée dans ton compte Weglot, les balises hreflang sont générées pour toutes tes pages. Avec trois langues actives (français, anglais, espagnol), chaque page contiendra trois balises hreflang pointant vers les trois versions, au format . Weglot s'occupe de tout.
Vérification de la bonne implémentation dans le code source
Pour vérifier les balises hreflang, inspecte le code source d'une page traduite et cherche hreflang dans le . Tu dois voir autant de balises que de langues actives, plus une balise x-default. Des outils comme Screaming Frog ou l'extension Chrome "hreflang Tag Checker" permettent d'auditer rapidement l'ensemble de tes pages.
Validation avec Google Search Console
Une fois ton site multilingue en ligne, connecte-le à Google Search Console et soumets les sitemaps de chaque version linguistique Weglot les génère automatiquement. L'onglet "International targeting" te permet de vérifier que les balises hreflang sont bien reconnues et qu'aucune erreur n'est signalée.
Notre expertise SEO à Grenoble peut t'accompagner si tu veux un audit complet de ton SEO multilingue après la mise en place de Weglot.
Étape 7 : Intégration avancée et comparaison avec Webflow Localization
Tu as maintenant un site Webflow multilingue fonctionnel avec Weglot. Mais certains cas d'usage nécessitent d'aller plus loin. L'API Weglot, la gestion des exclusions de contenu et la comparaison honnête avec Webflow Localization sont des sujets que tout propriétaire de site multilingue doit maîtriser.
Bonnes pratiques pour créer des sites multilingues avec Weglot et Webflow aborde ces cas avancés avec des exemples concrets de sites corporate.
API Weglot pour les intégrations personnalisées
L'API Weglot permet d'automatiser la gestion des traductions dans des contextes spécifiques. Si ton site Webflow utilise des collections CMS qui se mettent à jour régulièrement (articles de blog, fiches produits), l'API peut être appelée pour traduire automatiquement tout nouveau contenu ajouté. Les développeurs peuvent aussi l'utiliser pour exclure certains éléments de la traduction, comme les noms propres, les adresses ou les numéros de téléphone.
Pour les e-commerçants sur Webflow, l'intégration Weglot pour les e-commerce Webflow multilingues permet de localiser fiches produits, paniers et confirmations de commande dans toutes les langues cibles.
Limites de Webflow Localization native vs. Weglot
Voici une comparaison objective pour t'aider à choisir :
Webflow Localization native convient parfaitement pour des sites bilingues simples gérés par une seule équipe. Dès que tu passes à trois langues ou plus, que tu veux un workflow de traduction collaboratif, ou que tu cherches à optimiser les traductions avec des outils avancés, Weglot prend clairement l'avantage.
Quand utiliser Localize ou une alternative comme Digidop
Digidop est une agence française spécialisée dans Webflow qui propose des formations approfondies sur la gestion multilingue, notamment sur la comparaison entre Weglot et Webflow Localization. Si tu veux créer un site Webflow avec une architecture multilingue pensée dès la conception, leurs ressources sont précieuses.
Localize est une autre alternative à Weglot, plus orientée équipes techniques, avec des fonctionnalités de workflow avancées mais une interface moins accessible pour les non-développeurs. Pour la majorité des PME qui veulent simplement configurer Weglot sur leur site Webflow et internationaliser rapidement leur présence, Weglot reste le choix le plus pragmatique.
Créer un site Webflow multilingue performant, c'est aussi penser à l'architecture de ton site web dès le départ : une structure claire facilite la traduction et améliore le référencement de chaque version linguistique. Pour les marques qui ciblent plusieurs marchés, connecte aussi ta stratégie multilingue à ton acquisition digitale un site bien localisé peut multiplier ta base de prospects qualifiés.
Conclusion : Weglot et Webflow, un duo gagnant pour ton site multilingue
Ce tutoriel t'a guidé étape par étape dans la configuration complète de Weglot sur un site Webflow. De la création de compte et du choix du plan, à l'intégration du code JavaScript dans les paramètres Webflow, en passant par la configuration des sous-répertoires, la personnalisation du widget de langue et la révision des traductions dans le Visual Editor : chaque brique est désormais en place.
Les balises hreflang automatiques, les métadonnées traduites, les paramètres régionaux et la flexibilité de l'API Weglot font de cette solution le meilleur choix pour la grande majorité des sites Webflow qui souhaitent s'internationaliser sans sacrifier ni la qualité des traductions ni le référencement. Configurer Weglot sur un site Webflow ne prend qu'une heure, mais bien le faire peut transformer ta présence digitale à l'international.
Tu veux t'assurer que ton site multilingue performe réellement sur les moteurs de recherche ? Découvre nos services de création de sites Webflow chez Wenoble, où notre équipe t'accompagne de la conception à l'optimisation SEO multilingue.
