Comment migrer un site webflow vers headless avec next.js sans casser le référencement

J’ai récemment accompagné plusieurs équipes dans la migration de sites construits sur Webflow vers une architecture headless basée sur Next.js. C’est un projet qui revient souvent : on veut garder la liberté front‑end, améliorer les performances et l’évolutivité, tout en préservant l’essentiel — le référencement naturel. Dans cet article je partage ma méthode étape par étape, les pièges à éviter et des bonnes pratiques concrètes pour migrer sans casser votre SEO.

Pourquoi migrer vers Next.js en headless sans toucher au SEO

Avant d’attaquer la technique, je rappelle toujours l’objectif : gagner en contrôle (routing personnalisé, rendu côté serveur, optimisation des images, intégration d’APIs) tout en conservant le trafic organique. Les risques principaux sont la perte d’URLs, la disparition de balises meta et structured data, les temps d’indisponibilité et les erreurs 404. On peut tous les éviter avec une planification soignée.

Préparation — inventaire et audit

La première étape consiste à dresser un inventaire complet. J’exporte et examine :

• La liste de toutes les URLs (pages publiques, articles, archives).
• Les balises title, meta description, les Hn, données Open Graph et Twitter card.
• Les structured data (JSON‑LD) et leur emplacement.
• Les images et leurs URL/alt, ainsi que les ressources statiques.
• Les redirections existantes et les liens internes.
• Les pages à trafic (via Search Console / Google Analytics) — prioriser leur préservation.

J’utilise des outils comme Screaming Frog, le sitemap XML de Webflow, Google Search Console et un export CSV du CMS Webflow si on utilise Webflow CMS.

Choix de l’architecture headless et du CMS

Plusieurs options :

• Webflow CMS via API — pratique si vous voulez garder l’éditeur Webflow pour les équipes non techniques. Vous récupérez le contenu via l’API et le servez depuis Next.js.
• Headless CMS (Sanity, Contentful, Strapi, Prismic) — mieux si vous souhaitez plus de flexibilité et d’intégrations.
• Export statique + Git — pour des sites principalement marketing, on peut convertir le contenu en fichiers Markdown ou JSON et le stocker dans le repo.

Mon choix dépend du workflow des équipes : si les équipes marketing tiennent à Webflow pour l’édition, je privilégie l’API Webflow. Sinon, je bascule vers un CMS headless plus robuste.

Mapping des URLs et stratégie de redirections

La règle d’or : conserver les mêmes URLs quand c’est possible. Si vous devez changer, préparez une table de redirections 1:1 et automatisez l’application via des redirects 301.

Dans Next.js (Vercel), utilisez le fichier next.config.js pour définir des redirects, ou gérez-les côté CDNs/serveur (Cloudflare, Netlify redirects, etc.). Testez chaque redirect avant le déploiement.

Rendu et SEO technique avec Next.js

Pour ne pas perdre de visibilité, privilégiez le rendu côté serveur (SSR) ou le rendu statique pré‑généré (SSG) selon la fréquence de mise à jour du contenu :

• Pages marketing statiques : getStaticProps + getStaticPaths (+ ISR si mises à jour régulières).
• Contenu très dynamique (connexion, personnalisation) : getServerSideProps ou rendu client pour certaines portions.
• Balancer performance et fraîcheur : ISR est souvent idéal pour blogs et pages produit.

Veillez aussi à restituer exactement les balises SEO : title, meta description, canonical, hreflang, og:tags. J’utilise le composant Head de Next.js pour gérer cela dynamiquement en récupérant les métadonnées depuis le CMS.

Images, médias et performance

Webflow sert souvent des images optimisées automatiquement. En headless, reprenez le contrôle :

• Utilisez le composant next/image pour tirer avantage du lazy loading, des formats modernes (WebP/AVIF) et du dimensionnement responsive.
• Si vous conservez les assets sur Webflow ou un CDN, gardez les mêmes URLs si possible ou configurez des redirections/headers cache.
• Activez un CDN (Vercel, Cloudflare) pour délivrer les assets rapidement.

Structured data et balisage

Copiez et validez toutes les données structurées présentes dans Webflow (JSON‑LD). Toute suppression accidentelle de structured data peut impacter les rich snippets. Intégrez ces JSON‑LD dans vos templates Next.js et validez avec l’outil de test des résultats enrichis de Google.

Déploiement progressif et monitoring

Ne déployez pas tout d’un coup : je recommande un déploiement en deux phases :

• Phase Bêta interne : héberger un domaine/staging (ex: staging.esmertec.ch) et y migrer tout le contenu. Laissez-le accessible aux crawlers mais avec une balise noindex tant que vous vérifiez tout si nécessaire.
• Swap DNS progressif : une fois vérifié (404s, balises, performances), basculez le domaine en production et activez les redirections 301.

Surveillez Search Console, analytics et logs (screaming, crawl errors). Vérifiez les impressions et le trafic pour détecter une éventuelle chute et corriger rapidement.

Checklist rapide avant bascule

• Export complet des URLs et métadonnées (CSV).
• Configuration des redirects 301 testée sur staging.
• Rendu SEO (title/meta/canonical/hreflang) vérifié par page.
• Structured data et Open Graph restaurés et validés.
• Assets servis via CDN et next/image en place.
• Sitemap XML généré et soumis à Search Console.
• Analytics et tag manager (Google Analytics, GA4) connectés.

Outils et ressources que j’utilise

Voici quelques outils qui m’ont fait gagner du temps lors de migrations :

• Screaming Frog pour crawler et comparer les sitemaps.
• Google Search Console et Google Analytics pour suivre le trafic avant/après.
• Next.js (ISR), Vercel pour le déploiement, Cloudflare pour le CDN.
• Webflow API ou headless CMS (Sanity, Contentful) selon le cas.
• Outils de test structured data et PageSpeed Insights pour la performance.

Si vous voulez, je peux examiner votre site Webflow et produire un plan de migration personnalisé : mapping des URLs, stratégie d’ISR, et la liste des redirections à appliquer. Dites‑m’en plus sur la taille du site et si vous souhaitez conserver l’éditeur Webflow après la migration.