Langue principale Webflow : comment passer son site en français sans perdre son SEO

James Brunetto

Co-fondateur & CMO

Dernière mise à jour :

June 2, 2026

Objectif : Traduire l'intégralité du site Webflow de l'anglais vers le français, sans perdre le SEO ni créer d'erreurs 404.

À lire avant de commencer : Ne pas sauter d'étapes. Chaque phase prépare la suivante. En cas de doute, stopper et demander avant de publier.

{{text}}

Partager

Vous souhaitez configurer la langue principale Webflow en français pour votre site web sans perdre votre référencement ?

En effet, définir la langue principale Webflow en français nécessite une planification minutieuse pour préserver votre visibilité SEO. Par ailleurs, une migration mal exécutée vers la langue française peut entraîner des erreurs 404 et une chute de trafic. Cependant, en suivant le guide détaillé de notre agence webflow pour configurer la langue principale Webflow en français, vous réussirez votre transformation linguistique en toute sécurité.

Avant de commencer la modification de votre langue principale Webflow en Français : Vue d'ensemble

Pourquoi ? En effet, avant de commencer votre migration webflow comment passer son site en francais, il faut une liste complète de toutes les pages existantes.

Phase 1 : Comment exporter toutes les URLs pour votre migration webflow en français

Pourquoi ? Avant de toucher quoi que ce soit, il faut une liste complète de toutes les pages existantes. Ce fichier servira de base pour créer les redirections.

Étape 1.1 - Export via Screaming Frog (méthode principale)

  1. Télécharger Screaming Frog SEO Spiderscreamingfrog.co.uk (gratuit jusqu'à 500 URLs)
  2. Ouvrir le logiciel, entrer l'URL du site dans la barre en haut
  3. Cliquer sur Start
  4. Attendre la fin du crawl
  5. Dans l'onglet du haut, sélectionner Internal
  6. Dans le filtre à droite, choisir HTML (pour n'avoir que les pages, pas les images)
  7. Cliquer sur ExportCSV
  8. Sauvegarder le fichier sous le nom urls-anglais.csv

Étape 1.2 - Export via Google Search Console (en complément)

  1. Aller sur search.google.com/search-console
  2. Sélectionner la propriété du site
  3. Menu gauche → Index > Pages
  4. Cliquer sur Exporter en haut à droite → CSV
  5. Sauvegarder sous urls-search-console.csv

Étape 1.3 - Export des collections Webflow

Pour chaque collection CMS (blog, études de cas, etc.) :

  1. Dans Webflow, aller dans CMS
  2. Cliquer sur la collection concernée
  3. Cliquer sur Export en haut à droite
  4. Sauvegarder chaque fichier avec un nom clair (ex : collection-blog.csv)

Étape 1.4 - Créer le fichier de mapping

Ouvrir un tableur (Excel, Google Sheets) et créer un fichier avec ces colonnes :

<div class="syn1"> <style> @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap'); .syn1{--ink:#0a0a0a;--paper:#fff;--soft:#f6f6f4;--line:#e6e6e1;--muted:#6b6b66;--accent:#c6f24e;--todo-bg:#f0f0ee;--todo-tx:#6b6b66;--keep-bg:#eef1ff;--keep-tx:#3b4ba8;font-family:'Sora',-apple-system,sans-serif;color:var(--ink);line-height:1.55;max-width:980px;margin:0 auto} .syn1 *{box-sizing:border-box} .syn1 .h{display:flex;align-items:baseline;gap:12px;margin-bottom:4px} .syn1 .num{font-family:'Geist Mono',monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;background:var(--accent);padding:3px 8px;border-radius:6px;white-space:nowrap} .syn1 .t{font-size:clamp(1.05rem,2.4vw,1.32rem);font-weight:700;letter-spacing:-.015em;margin:0} .syn1 .s{font-size:.9rem;color:var(--muted);margin:6px 0 18px;max-width:62ch} .syn1 .card{border:1px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--paper);box-shadow:0 14px 40px -28px rgba(10,10,10,.45)} .syn1 table{width:100%;border-collapse:collapse;font-size:.92rem} .syn1 thead th{text-align:left;font-weight:600;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);background:var(--ink);padding:13px 16px;white-space:nowrap} .syn1 tbody td{padding:13px 16px;border-top:1px solid var(--line);vertical-align:top} .syn1 tbody tr:nth-child(even){background:var(--soft)} .syn1 tbody tr:hover{background:#f0f0ec} .syn1 .u{font-family:'Geist Mono',monospace;font-size:.82rem;background:#f0f0ec;padding:2px 7px;border-radius:5px;display:inline-block;word-break:break-all} .syn1 .u.new{background:#eef7e0} .syn1 .tag{font-size:.76rem;color:var(--muted);border:1px solid var(--line);padding:2px 8px;border-radius:6px;white-space:nowrap} .syn1 .b{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap} .syn1 .b::before{content:'';width:6px;height:6px;border-radius:50%} .syn1 .b.todo{background:var(--todo-bg);color:var(--todo-tx)}.syn1 .b.todo::before{background:var(--todo-tx)} .syn1 .b.keep{background:var(--keep-bg);color:var(--keep-tx)}.syn1 .b.keep::before{background:var(--keep-tx)} .syn1 .foot{font-size:.82rem;color:var(--muted);margin-top:12px}.syn1 .foot strong{color:var(--ink);font-weight:600} .syn1 .lbl{display:none} @media(max-width:720px){ .syn1 thead{display:none} .syn1 table,.syn1 tbody,.syn1 tr,.syn1 td{display:block;width:100%} .syn1 tbody tr{border-top:1px solid var(--ink);padding:6px 0}.syn1 tbody tr:first-child{border-top:none}.syn1 tbody tr:nth-child(even){background:transparent} .syn1 tbody td{border-top:none;padding:7px 16px;display:flex;gap:12px;align-items:flex-start} .syn1 .lbl{display:block;flex:0 0 38%;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;padding-top:2px} .syn1 .v{flex:1 1 auto;min-width:0}} </style> <div class="h"><span class="num">Phase 1.4</span><h3 class="t">Fichier de mapping des URLs</h3></div> <p class="s">La base de toute la migration : chaque ancienne URL EN, sa correspondance FR, son type et son statut.</p> <div class="card"><table> <thead><tr><th>Ancienne URL (EN)</th><th>Nouvelle URL (FR)</th><th>Type de page</th><th>Statut</th></tr></thead> <tbody> <tr><td><span class="lbl">Ancienne URL (EN)</span><span class="v"><span class="u">/about</span></span></td><td><span class="lbl">Nouvelle URL (FR)</span><span class="v"><span class="u new">/a-propos</span></span></td><td><span class="lbl">Type</span><span class="v"><span class="tag">Page statique</span></span></td><td><span class="lbl">Statut</span><span class="v"><span class="b todo">À faire</span></span></td></tr> <tr><td><span class="lbl">Ancienne URL (EN)</span><span class="v"><span class="u">/blog/our-story</span></span></td><td><span class="lbl">Nouvelle URL (FR)</span><span class="v"><span class="u new">/blog/notre-histoire</span></span></td><td><span class="lbl">Type</span><span class="v"><span class="tag">Collection</span></span></td><td><span class="lbl">Statut</span><span class="v"><span class="b todo">À faire</span></span></td></tr> <tr><td><span class="lbl">Ancienne URL (EN)</span><span class="v"><span class="u">/services</span></span></td><td><span class="lbl">Nouvelle URL (FR)</span><span class="v"><span class="u new">/services</span></span></td><td><span class="lbl">Type</span><span class="v"><span class="tag">Page statique</span></span></td><td><span class="lbl">Statut</span><span class="v"><span class="b keep">Inchangé</span></span></td></tr> </tbody></table></div> <p class="foot"><strong>Conseil :</strong> colle toutes les URLs de l'export Screaming Frog dans la 1<sup>re</sup> colonne, puis remplis « Nouvelle URL » au fur et à mesure.</p> </div>

Conseil : Copier-coller toutes les URLs du fichier Screaming Frog dans la première colonne, puis remplir la colonne "Nouvelle URL" au fur et à mesure.

Phase 2 : Préparer les traductions pour configurer votre langue principale Webflow en français

Pourquoi ? Avoir toutes les traductions prêtes avant de toucher au site évite de laisser des pages à moitié traduites en ligne.

Étape 2.1 - Inventaire du contenu à traduire

Faire la liste de tout ce qui doit être traduit :

Pages statiques

  • [ ]  Page d'accueil
  • [ ]  À propos
  • [ ]  Services / Offres
  • [ ]  Contact
  • [ ]  Mentions légales / CGV / Politique de confidentialité
  • [ ]  Page 404

Éléments globaux

  • [ ]  Navigation principale (navbar)
  • [ ]  Footer (liens, textes, copyright)
  • [ ]  Boutons CTA (ex : "Get started" → "Commencer")
  • [ ]  Bannières et pop-ups

Collections CMS

  • [ ]  Articles de blog
  • [ ]  Études de cas / Projets
  • [ ]  Témoignages
  • [ ]  FAQ

Formulaires

  • [ ]  Labels des champs
  • [ ]  Textes placeholder (ex : "Your email" → "Votre email")
  • [ ]  Messages de confirmation (ex : "Thank you!" → "Merci !")
  • [ ]  Messages d'erreur

Médias

  • [ ]  Alt text des images
  • [ ]  Textes sur les images / infographies
  • [ ]  Sous-titres des vidéos si applicable

Emails automatiques

  • [ ]  Email de confirmation de formulaire
  • [ ]  Notifications internes

Étape 2.2 - Organiser les traductions

Créer un fichier Google Sheets ou Notion avec ces colonnes :

<div class="syn2"> <style> @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap'); .syn2{--ink:#0a0a0a;--paper:#fff;--soft:#f6f6f4;--line:#e6e6e1;--muted:#6b6b66;--accent:#c6f24e;--ok-bg:#e9f7e4;--ok-tx:#2f7d20;--wip-bg:#fff4e0;--wip-tx:#9a6700;font-family:'Sora',-apple-system,sans-serif;color:var(--ink);line-height:1.55;max-width:980px;margin:0 auto} .syn2 *{box-sizing:border-box} .syn2 .h{display:flex;align-items:baseline;gap:12px;margin-bottom:4px} .syn2 .num{font-family:'Geist Mono',monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;background:var(--accent);padding:3px 8px;border-radius:6px;white-space:nowrap} .syn2 .t{font-size:clamp(1.05rem,2.4vw,1.32rem);font-weight:700;letter-spacing:-.015em;margin:0} .syn2 .s{font-size:.9rem;color:var(--muted);margin:6px 0 18px;max-width:62ch} .syn2 .card{border:1px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--paper);box-shadow:0 14px 40px -28px rgba(10,10,10,.45)} .syn2 table{width:100%;border-collapse:collapse;font-size:.92rem} .syn2 thead th{text-align:left;font-weight:600;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);background:var(--ink);padding:13px 16px;white-space:nowrap} .syn2 tbody td{padding:13px 16px;border-top:1px solid var(--line);vertical-align:top} .syn2 tbody tr:nth-child(even){background:var(--soft)} .syn2 tbody tr:hover{background:#f0f0ec} .syn2 .b{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap} .syn2 .b::before{content:'';width:6px;height:6px;border-radius:50%} .syn2 .b.ok{background:var(--ok-bg);color:var(--ok-tx)}.syn2 .b.ok::before{background:var(--ok-tx)} .syn2 .b.wip{background:var(--wip-bg);color:var(--wip-tx)}.syn2 .b.wip::before{background:var(--wip-tx)} .syn2 .lbl{display:none} @media(max-width:720px){ .syn2 thead{display:none} .syn2 table,.syn2 tbody,.syn2 tr,.syn2 td{display:block;width:100%} .syn2 tbody tr{border-top:1px solid var(--ink);padding:6px 0}.syn2 tbody tr:first-child{border-top:none}.syn2 tbody tr:nth-child(even){background:transparent} .syn2 tbody td{border-top:none;padding:7px 16px;display:flex;gap:12px;align-items:flex-start} .syn2 .lbl{display:block;flex:0 0 38%;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;padding-top:2px} .syn2 .v{flex:1 1 auto;min-width:0}} </style> <div class="h"><span class="num">Phase 2.2</span><h3 class="t">Suivi des traductions</h3></div> <p class="s">Centralise chaque élément à traduire pour ne jamais laisser une page à moitié traduite en ligne.</p> <div class="card"><table> <thead><tr><th>Élément</th><th>Texte EN</th><th>Texte FR</th><th>Validé</th></tr></thead> <tbody> <tr><td><span class="lbl">Élément</span><span class="v">Navbar — Lien 1</span></td><td><span class="lbl">Texte EN</span><span class="v">About</span></td><td><span class="lbl">Texte FR</span><span class="v">À propos</span></td><td><span class="lbl">Validé</span><span class="v"><span class="b ok">Validé</span></span></td></tr> <tr><td><span class="lbl">Élément</span><span class="v">CTA principal</span></td><td><span class="lbl">Texte EN</span><span class="v">Get started</span></td><td><span class="lbl">Texte FR</span><span class="v">Commencer</span></td><td><span class="lbl">Validé</span><span class="v"><span class="b ok">Validé</span></span></td></tr> <tr><td><span class="lbl">Élément</span><span class="v">Formulaire contact — label email</span></td><td><span class="lbl">Texte EN</span><span class="v">Email address</span></td><td><span class="lbl">Texte FR</span><span class="v">Adresse email</span></td><td><span class="lbl">Validé</span><span class="v"><span class="b wip">En cours</span></span></td></tr> </tbody></table></div> </div>

Phase 3 : Configurer la langue principale Webflow en français pour votre site

Prérequis : Être sur le plan Advanced de Webflow avec Localization activé.

Interface Webflow montrant les paramètres de localisation pour configurer un site en français

Étape 3.1 - Activer le Français comme langue principale

  1. Dans Webflow, aller dans Settings (icône engrenage)
  2. Cliquer sur Localization
  3. Cliquer sur Add locale
  4. Sélectionner Français (FR)
  5. Le définir comme Primary locale
  6. Garder l'Anglais en locale secondaire si besoin

Étape 3.2 - Vérifier les paramètres de publication

  1. Dans Settings > Publishing
  2. Vérifier que le domaine principal pointe bien vers la version française
  3. Vérifier la structure des URLs (ex : /en/ pour l'anglais si conservé)

Phase 4 : Traduire les pages statiques

Important : Travailler page par page. Ne pas publier avant d'avoir fini toute la page ET créé la redirection correspondante.

Étape 4.1 - Modifier les slugs

Pour chaque page statique :

  1. Ouvrir la page dans le Designer
  2. Aller dans Page Settings (icône engrenage en haut à droite)
  3. Modifier le Slug (ex : abouta-propos)
  4. ✅ Webflow crée automatiquement une redirection 301 pour les pages statiques
  5. Modifier tous les textes de la page en français
  6. Mettre à jour le SEO Title et la Meta Description en français
  7. Mettre à jour les Open Graph Title / Description
  8. Cocher la case "Statut : Traduit" dans votre fichier de mapping

Étape 4.2 - Règles pour les slugs en français

<div class="syn3"> <style> @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap'); .syn3{--ink:#0a0a0a;--paper:#fff;--soft:#f6f6f4;--line:#e6e6e1;--muted:#6b6b66;--accent:#c6f24e;font-family:'Sora',-apple-system,sans-serif;color:var(--ink);line-height:1.55;max-width:980px;margin:0 auto} .syn3 *{box-sizing:border-box} .syn3 .h{display:flex;align-items:baseline;gap:12px;margin-bottom:4px} .syn3 .num{font-family:'Geist Mono',monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;background:var(--accent);padding:3px 8px;border-radius:6px;white-space:nowrap} .syn3 .t{font-size:clamp(1.05rem,2.4vw,1.32rem);font-weight:700;letter-spacing:-.015em;margin:0} .syn3 .s{font-size:.9rem;color:var(--muted);margin:6px 0 18px;max-width:62ch} .syn3 .card{border:1px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--paper);box-shadow:0 14px 40px -28px rgba(10,10,10,.45)} .syn3 table{width:100%;border-collapse:collapse;font-size:.92rem} .syn3 thead th{text-align:left;font-weight:600;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);background:var(--ink);padding:13px 16px;white-space:nowrap} .syn3 tbody td{padding:13px 16px;border-top:1px solid var(--line);vertical-align:top} .syn3 tbody tr:nth-child(even){background:var(--soft)} .syn3 tbody tr:hover{background:#f0f0ec} .syn3 .u{font-family:'Geist Mono',monospace;font-size:.82rem;background:#f0f0ec;padding:2px 7px;border-radius:5px;display:inline-block;word-break:break-all} .syn3 .u.new{background:#eef7e0} .syn3 .lbl{display:none} @media(max-width:720px){ .syn3 thead{display:none} .syn3 table,.syn3 tbody,.syn3 tr,.syn3 td{display:block;width:100%} .syn3 tbody tr{border-top:1px solid var(--ink);padding:6px 0}.syn3 tbody tr:first-child{border-top:none}.syn3 tbody tr:nth-child(even){background:transparent} .syn3 tbody td{border-top:none;padding:7px 16px;display:flex;gap:12px;align-items:flex-start} .syn3 .lbl{display:block;flex:0 0 38%;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;padding-top:2px} .syn3 .v{flex:1 1 auto;min-width:0}} </style> <div class="h"><span class="num">Phase 4.2</span><h3 class="t">Règles de réécriture des slugs</h3></div> <p class="s">Tirets (pas d'underscores), pas d'accents, slugs courts et lisibles. Exemples EN → FR.</p> <div class="card"><table> <thead><tr><th>Slug EN</th><th>Slug FR</th><th>Règle appliquée</th></tr></thead> <tbody> <tr><td><span class="lbl">Slug EN</span><span class="v"><span class="u">about</span></span></td><td><span class="lbl">Slug FR</span><span class="v"><span class="u new">a-propos</span></span></td><td><span class="lbl">Règle</span><span class="v">Sans accent (« à » → « a »)</span></td></tr> <tr><td><span class="lbl">Slug EN</span><span class="v"><span class="u">our-services</span></span></td><td><span class="lbl">Slug FR</span><span class="v"><span class="u new">nos-services</span></span></td><td><span class="lbl">Règle</span><span class="v">Tirets, court & lisible</span></td></tr> <tr><td><span class="lbl">Slug EN</span><span class="v"><span class="u">contact-us</span></span></td><td><span class="lbl">Slug FR</span><span class="v"><span class="u new">contact</span></span></td><td><span class="lbl">Règle</span><span class="v">Simplification</span></td></tr> <tr><td><span class="lbl">Slug EN</span><span class="v"><span class="u">privacy-policy</span></span></td><td><span class="lbl">Slug FR</span><span class="v"><span class="u new">politique-de-confidentialite</span></span></td><td><span class="lbl">Règle</span><span class="v">Tirets, sans accent</span></td></tr> </tbody></table></div> </div>
  • Utiliser des tirets  et non des underscores _
  • Ne pas utiliser d'accents dans les slugs (ex : a-propos et non à-propos)
  • Garder les slugs courts et lisibles
  • Exemples :
    • abouta-propos
    • our-servicesnos-services
    • contact-uscontact
    • privacy-policypolitique-de-confidentialite

Phase 5 : Traduire les collections CMS

Attention : Contrairement aux pages statiques, les redirections pour les collections sont manuelles. C'est l'étape la plus risquée pour les erreurs 404.

Étape 5.1 - Modifier les slugs des items de collection

Pour chaque article / item de collection :

  1. Ouvrir l'item dans le CMS
  2. Modifier le Slug en français
  3. Modifier tous les champs texte en français
  4. Mettre à jour le SEO Title et la Meta Description
  5. Sauvegarder (ne pas publier encore)
  6. Noter l'ancienne et la nouvelle URL dans le fichier de mapping

Étape 5.2 - Modifier le slug de la collection elle-même

  1. Dans le CMS, cliquer sur les paramètres de la collection
  2. Modifier le Collection Slug (ex : blog reste blog, ou case-studiesetudes-de-cas)
  3. Mettre à jour le fichier de mapping en conséquence

Phase 6 : Créer les redirections 301 pour votre migration webflow français

C'est l'étape la plus critique. À faire avant toute publication pour éviter les erreurs 404.

Étape 6.1 - Ajouter les redirections dans Webflow

<div class="syn4"> <style> @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap'); .syn4{--ink:#0a0a0a;--paper:#fff;--soft:#f6f6f4;--line:#e6e6e1;--muted:#6b6b66;--accent:#c6f24e;--ok-bg:#e9f7e4;--ok-tx:#2f7d20;--todo-bg:#f0f0ee;--todo-tx:#6b6b66;font-family:'Sora',-apple-system,sans-serif;color:var(--ink);line-height:1.55;max-width:980px;margin:0 auto} .syn4 *{box-sizing:border-box} .syn4 .h{display:flex;align-items:baseline;gap:12px;margin-bottom:4px} .syn4 .num{font-family:'Geist Mono',monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;background:var(--accent);padding:3px 8px;border-radius:6px;white-space:nowrap} .syn4 .t{font-size:clamp(1.05rem,2.4vw,1.32rem);font-weight:700;letter-spacing:-.015em;margin:0} .syn4 .s{font-size:.9rem;color:var(--muted);margin:6px 0 18px;max-width:62ch} .syn4 .card{border:1px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--paper);box-shadow:0 14px 40px -28px rgba(10,10,10,.45)} .syn4 table{width:100%;border-collapse:collapse;font-size:.92rem} .syn4 thead th{text-align:left;font-weight:600;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);background:var(--ink);padding:13px 16px;white-space:nowrap} .syn4 tbody td{padding:13px 16px;border-top:1px solid var(--line);vertical-align:top} .syn4 tbody tr:nth-child(even){background:var(--soft)} .syn4 tbody tr:hover{background:#f0f0ec} .syn4 .u{font-family:'Geist Mono',monospace;font-size:.82rem;background:#f0f0ec;padding:2px 7px;border-radius:5px;display:inline-block;word-break:break-all} .syn4 .u.new{background:#eef7e0} .syn4 .tag{font-size:.76rem;color:var(--muted);border:1px solid var(--line);padding:2px 8px;border-radius:6px;white-space:nowrap} .syn4 .b{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap} .syn4 .b::before{content:'';width:6px;height:6px;border-radius:50%} .syn4 .b.ok{background:var(--ok-bg);color:var(--ok-tx)}.syn4 .b.ok::before{background:var(--ok-tx)} .syn4 .b.todo{background:var(--todo-bg);color:var(--todo-tx)}.syn4 .b.todo::before{background:var(--todo-tx)} .syn4 .foot{font-size:.82rem;color:var(--muted);margin-top:12px}.syn4 .foot strong{color:var(--ink);font-weight:600} .syn4 .lbl{display:none} @media(max-width:720px){ .syn4 thead{display:none} .syn4 table,.syn4 tbody,.syn4 tr,.syn4 td{display:block;width:100%} .syn4 tbody tr{border-top:1px solid var(--ink);padding:6px 0}.syn4 tbody tr:first-child{border-top:none}.syn4 tbody tr:nth-child(even){background:transparent} .syn4 tbody td{border-top:none;padding:7px 16px;display:flex;gap:12px;align-items:flex-start} .syn4 .lbl{display:block;flex:0 0 38%;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;padding-top:2px} .syn4 .v{flex:1 1 auto;min-width:0}} </style> <div class="h"><span class="num">Phase 6</span><h3 class="t">Redirections 301</h3></div> <p class="s">À saisir dans Settings → Publishing → 301 Redirects <strong>avant</strong> toute publication, pour éviter les erreurs 404.</p> <div class="card"><table> <thead><tr><th>Old URL</th><th>New URL</th><th>Type</th><th>Testé</th></tr></thead> <tbody> <tr><td><span class="lbl">Old URL</span><span class="v"><span class="u">/about</span></span></td><td><span class="lbl">New URL</span><span class="v"><span class="u new">/a-propos</span></span></td><td><span class="lbl">Type</span><span class="v"><span class="tag">Auto Webflow</span></span></td><td><span class="lbl">Testé</span><span class="v"><span class="b todo">À tester</span></span></td></tr> <tr><td><span class="lbl">Old URL</span><span class="v"><span class="u">/blog/our-story</span></span></td><td><span class="lbl">New URL</span><span class="v"><span class="u new">/blog/notre-histoire</span></span></td><td><span class="lbl">Type</span><span class="v"><span class="tag">Manuel (CMS)</span></span></td><td><span class="lbl">Testé</span><span class="v"><span class="b todo">À tester</span></span></td></tr> <tr><td><span class="lbl">Old URL</span><span class="v"><span class="u">/case-studies</span></span></td><td><span class="lbl">New URL</span><span class="v"><span class="u new">/etudes-de-cas</span></span></td><td><span class="lbl">Type</span><span class="v"><span class="tag">Manuel (CMS)</span></span></td><td><span class="lbl">Testé</span><span class="v"><span class="b ok">Testé</span></span></td></tr> </tbody></table></div> <p class="foot"><strong>Vérifier :</strong> pas de faute de frappe, les URLs commencent par <span class="u">/</span>, et l'ancienne URL correspond exactement à ce qui était en ligne.</p> </div>
  1. Dans Webflow, aller dans Settings > Publishing > 301 Redirects
  2. Pour chaque ligne du fichier de mapping où l'URL a changé :
    • Dans Old URL : entrer l'ancienne URL (ex : /blog/our-story)
    • Dans New URL : entrer la nouvelle URL (ex : /blog/notre-histoire)
    • Cliquer sur Add Redirect
  3. Répéter pour chaque URL modifiée

Étape 6.2 - Vérifier les redirections

Avant de publier, vérifier que chaque redirection est bien saisie :

  • Pas de faute de frappe
  • Les URLs commencent bien par /
  • L'ancienne URL correspond exactement à ce qui était en ligne

Étape 6.3 - Cas particuliers

  • Liens internes dans le contenu : Rechercher dans le CMS et le Designer tous les liens qui pointent vers les anciennes URLs et les mettre à jour
  • Liens dans la navbar et le footer : Les mettre à jour manuellement dans les composants globaux

Phase 7 : Éléments souvent oubliés

Checklist à cocher avant de publier.

Éléments globaux

  • [ ]  Navbar — tous les liens et textes traduits
  • [ ]  Footer — textes, liens, mentions légales
  • [ ]  Boutons CTA sur toutes les pages
  • [ ]  Bannières / pop-ups / barres d'annonce

SEO

  • [ ]  SEO Title traduit sur toutes les pages
  • [ ]  Meta Description traduite sur toutes les pages
  • [ ]  Open Graph Title et Description (partage réseaux sociaux)
  • [ ]  Alt text des images principales

Formulaires

  • [ ]  Labels de tous les champs
  • [ ]  Textes placeholder
  • [ ]  Messages de confirmation
  • [ ]  Messages d'erreur
  • [ ]  Email de notification (côté client et interne)

Pages système

  • [ ]  Page 404 traduite
  • [ ]  Page de mot de passe (si site protégé)

Tracking & Analytics

  • [ ]  Vérifier que les événements Google Analytics sont toujours déclenchés
  • [ ]  Vérifier que Google Tag Manager fonctionne
  • [ ]  Vérifier les conversions dans Google Ads si applicable
  • [ ]  Informer @James Brunetto pour mettre à jour les URLs dans les campagnes actives

Phase 8 : Publier & Tester

Ne jamais publier sans avoir terminé les phases 1 à 7.

Étape 8.1 - Publier le site

  1. Vérifier une dernière fois que toutes les redirections 301 sont en place
  2. Publier le site depuis Webflow
  3. Vider le cache si un CDN est utilisé (Cloudflare, etc.)

Étape 8.2 - Tester toutes les pages

Pour chaque ancienne URL du fichier de mapping :

  1. Entrer l'ancienne URL dans le navigateur
  2. Vérifier qu'elle redirige bien vers la nouvelle URL (et non une erreur 404)
  3. Cocher "Testé ✅" dans le fichier de mapping

Étape 8.3 - Tester les formulaires

  1. Remplir et soumettre chaque formulaire du site
  2. Vérifier que l'email de confirmation est reçu en français
  3. Vérifier que la notification interne fonctionne

Étape 8.4 - Vérifier sur mobile

  • Tester la navigation sur smartphone
  • Vérifier que les textes ne débordent pas avec les nouveaux mots français (souvent plus longs qu'en anglais)

Phase 9 : Après publication

Tableau de bord Google Analytics montrant le suivi des performances après une migration de site web

SEO - à faire dans les 48h

  1. Aller sur Google Search Console
  2. Aller dans Sitemaps
  3. Soumettre le nouveau sitemap : https://votresite.com/sitemap.xml
  4. Demander l'indexation des pages principales via Inspection d'URL > Demander l'indexation

Note : Une baisse temporaire de trafic organique est normale pendant 2 à 4 semaines, le temps que Google ré-indexe toutes les pages. C'est attendu.

Liens externes - à mettre à jour

  • [ ]  Profil Google Business
  • [ ]  Page LinkedIn de l'entreprise
  • [ ]  Autres réseaux sociaux (Instagram, Facebook, etc.)
  • [ ]  Signatures email de l'équipe
  • [ ]  Annuaires et mentions externes si possible

Suivi post-migration

  • Surveiller Google Search Console pendant 4 semaines (erreurs 404, couverture d'index)
  • Surveiller Google Analytics pour détecter toute anomalie de trafic
  • Informer l'équipe marketing des nouvelles URLs pour les prochaines campagnes

Ressources utiles

<style> .slq-lw2-wrap { overflow: hidden; margin: 24px 0; border-radius: 8px; border: 1px solid #e5e5e5; } .slq-lw2-tbl { width: 100%; border-collapse: collapse; font-family: inherit; } .slq-lw2-tbl thead { background: #1a1a1a; } .slq-lw2-tbl th { text-align: left; padding: 14px 16px; color: #fff; font-weight: 600; font-size: 14px; border-bottom: 2px solid #000; } .slq-lw2-tbl td { padding: 14px 16px; border-bottom: 1px solid #e5e5e5; font-size: 14px; vertical-align: top; } .slq-lw2-tbl tbody tr:last-child td { border-bottom: none; } .slq-lw2-tbl tbody tr:hover td { background-color: #f9f9f9; } .slq-lw2-tbl a { color: inherit; text-decoration: underline; } @media (max-width: 768px) { .slq-lw2-tbl thead { display: none; } .slq-lw2-tbl, .slq-lw2-tbl tbody, .slq-lw2-tbl tr, .slq-lw2-tbl td { display: block; width: 100%; } .slq-lw2-tbl tr { margin-bottom: 12px; padding: 16px; border: 1px solid #e5e5e5; border-radius: 8px; background: #fff; } .slq-lw2-tbl td { padding: 6px 0; border: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .slq-lw2-tbl td::before { content: attr(data-label); font-weight: 600; color: #1a1a1a; flex-shrink: 0; min-width: 40%; font-size: 13px; } } </style><div class="slq-lw2-wrap"><table class="slq-lw2-tbl"><thead><tr><th>Outil</th><th>Usage</th><th>Lien</th></tr></thead><tbody><tr><td data-label="Outil">Screaming Frog</td><td data-label="Usage">Exporter toutes les URLs</td><td data-label="Lien"><a href="https://www.screamingfrog.co.uk/seo-spider/" target="_blank" rel="noopener">screamingfrog.co.uk</a></td></tr><tr><td data-label="Outil">Google Search Console</td><td data-label="Usage">Suivi SEO & soumission sitemap</td><td data-label="Lien"><a href="https://search.google.com/search-console" target="_blank" rel="noopener">search.google.com</a></td></tr><tr><td data-label="Outil">Redirect Checker</td><td data-label="Usage">Vérifier les redirections 301</td><td data-label="Lien"><a href="https://www.redirect-checker.org/" target="_blank" rel="noopener">redirect-checker.org</a></td></tr><tr><td data-label="Outil">Webflow University</td><td data-label="Usage">Documentation Localization</td><td data-label="Lien"><a href="https://university.webflow.com/" target="_blank" rel="noopener">university.webflow.com</a></td></tr></tbody></table></div>

Besoin d’en savoir plus ?

Obtenez 30 minutes de consulting avec l’un de nos experts.

Besoin d’en savoir plus ?

Obtenez 30 minutes de consulting 
avec l’un de nos experts.

Contactez-nous

Bientôt vous aussi ?

Parlez de votre projet à un membre de notre équipe dès aujourd’hui.

Contactez-nous