Migration headless CMS : le guide complet Sanity + Astro (2026)
Une migration headless CMS consiste à séparer le contenu de votre site (géré dans un CMS comme Sanity) de son affichage (codé avec un framework comme Astro), les deux communiquant par API. Vous gagnez un contrôle total sur le SEO technique, un back-office taillé pour votre équipe et une architecture que l'IA peut piloter.
Ce que vous ne gagnez pas automatiquement : de la vitesse. C'est le premier mythe que ce guide va déconstruire, chiffres à l'appui.
Chez l'agence web Gemeos, on construit des sites pour des startups et scale-ups depuis plusieurs années, sur Webflow, WordPress et désormais en headless. Ce guide rassemble tout ce qu'on sait sur le sujet : quand migrer, quand ne pas migrer, combien ça coûte, et comment le faire sans perdre une seule position Google.
résumé de l’article
- Une migration headless CMS sépare le contenu (Sanity) de l'affichage (Astro), reliés par API.
- Le vrai gain n'est pas la vitesse par défaut mais le contrôle : SEO technique, modèle de contenu, workflows et pilotage par l'IA.
- Selon HTTP Archive, Astro et Webflow valident les Core Web Vitals sur environ 67 % des sites mobiles, WordPress sur 49 %.
- Avec l'IA, construire un site headless coûte désormais autant qu'un site Webflow, et les abonnements sont souvent plus bas dès que l'équipe grandit.
- Audit, modélisation du contenu et plan de redirections déterminent l'essentiel du résultat SEO d'une migration.
- Le design system est la vraie clé de l'agilité : c'est lui qui permet au marketing de créer des pages seul, sans casser la marque.
Envie d’aller plus loin ? Demandez à :
Headless CMS : la définition en 30 secondes
Un CMS headless est un système de gestion de contenu sans « tête », c'est-à-dire sans couche d'affichage intégrée. Il stocke et structure le contenu, puis le distribue par API à n'importe quel front-end : un site, une app mobile, un agent IA, un écran en boutique.
À l'inverse, un CMS monolithique (WordPress classique, Webflow, Drupal, Wix) gère dans le même outil le contenu, le design, le code et l'hébergement.
Monolithique, headless, hybride : les trois architectures
| Architecture | Principe | Exemples |
|---|---|---|
| Monolithique | Contenu, design et hébergement dans un seul outil | Webflow, WordPress classique, Wix, Squarespace |
| Headless | Le CMS gère le contenu, un framework séparé gère l'affichage | Sanity + Astro, Contentful + Next.js, Storyblok + Nuxt |
| Hybride | Un monolithe qui expose aussi son contenu par API, ou un headless avec éditeur visuel | WordPress + WPGraphQL, Webflow Cloud, Sanity avec Presentation |
Pourquoi on dit « découplé »
Dans un site headless, votre équipe marketing publie un article dans Sanity. Sanity envoie un signal (webhook), le site Astro récupère le contenu et régénère la page concernée. Le visiteur reçoit une page HTML statique, servie depuis le CDN le plus proche de lui.
Chaque brique peut évoluer indépendamment. Vous voulez refaire le design ? Le contenu ne bouge pas. Vous voulez changer d'hébergeur ? Le CMS ne le sait même pas.
Pourquoi 2026 est le bon moment pour migrer
Le headless existe depuis dix ans. Ce qui a changé, c'est que quatre évolutions récentes le rendent accessible et rentable pour une scale-up, pas seulement pour les grands groupes.
1. Astro a un avenir garanti
En janvier 2026, Cloudflare a racheté The Astro Technology Company. Le framework reste open source sous licence MIT, avec une gouvernance publique. Astro 6 est sorti en mars 2026 avec les Live Content Collections (contenu récupéré à la requête, sans rebuild) et une CSP intégrée.
Pour une entreprise qui choisit sa stack pour cinq ans, c'est un signal fort : Astro n'est plus un projet de passionnés, c'est l'infrastructure d'un acteur qui sert une part majeure du web.
2. Webflow a revu son modèle
En mai 2026, Webflow a fusionné ses plans CMS et Business en un plan Premium (25 $/mois en annuel, 20 000 items CMS, 40 collections) et lancé un plan Team pour les équipes en croissance, uniquement en annuel et sur devis.
Bonne nouvelle pour les petits sites : les limites d'items reculent. Mais pour une équipe de 8 à 15 personnes qui publie en plusieurs langues, la facture se joue désormais sur les sièges, la localisation et le plan Team. C'est exactement le moment où la question du headless se pose.
3. Les agents IA savent piloter un CMS
Depuis décembre 2025, le serveur MCP de Sanity est disponible pour tous. Concrètement, Claude Code, Cursor ou VS Code peuvent lire votre schéma de contenu, créer des documents, préparer des releases et même guider une migration depuis WordPress, Contentful, Strapi ou Drupal.
Un CMS dont la configuration est du code devient un CMS que l'IA peut faire évoluer. Un CMS configuré à la souris, beaucoup moins.
4. Le GEO récompense le contenu structuré
ChatGPT, Perplexity et Gemini citent les sources qu'ils comprennent le mieux : définitions claires, données structurées, FAQ, entités identifiables. Un CMS headless vous oblige à structurer votre contenu en champs plutôt qu'en blocs de texte libres. C'est un avantage direct pour être cité.
Le comparatif : Webflow vs WordPress vs Drupal vs Sanity + Astro
Aucune plateforme ne gagne sur tous les critères. Sanity + Astro gagne sur le contrôle, la flexibilité et l'évolutivité. Webflow gagne sur le time-to-market et l'autonomie visuelle. WordPress gagne sur l'écosystème. Drupal gagne sur les besoins institutionnels complexes.
| Critère | Webflow | WordPress | Drupal | Sanity + Astro |
|---|---|---|---|---|
| Performance native | Bonne | Variable (plugins, thème) | Correcte | Excellente si bien codé |
| SEO technique | Bon, limité sur le fin | Très complet via plugins | Très complet | Contrôle total |
| Modélisation du contenu | Collections, références simples | Custom post types | Très riche | Sans limite, relations fines |
| Rôles et permissions | Basiques à intermédiaires | Complets | Très complets | Complets (avancés en Enterprise) |
| Workflows éditoriaux | Brouillons, publication page par page | Plugins | Natifs | Releases, programmation, commentaires, tâches |
| Multilingue | Webflow Localize (payant) | Plugins (WPML, Polylang) | Natif | Natif, par champ ou par document |
| Design system | Classes et composants Webflow | Dépend du thème | Dépend du thème | Composants code, tokens, blocs contraints |
| IA et agents (MCP) | MCP Webflow, Designer | Bien : WordPress Studio, MCP | Limité | MCP complet, schéma en code |
| Coût de départ | Faible | Faible | Élevé | Comparable à Webflow, grâce à l'IA |
| Coût à 3 ans (équipe de 10) | Moyen, croît avec les sièges | Moyen, croît avec la maintenance | Élevé | Moyen, stable |
| Dépendance à un dev | Faible | Moyenne | Forte | Moyenne au build, faible après |
| Lock-in | Fort (export limité) | Faible | Faible | Très faible (contenu en JSON, front open source) |
Ce qu'il faut lire entre les lignes
Webflow reste un excellent choix jusqu'à un certain stade. Pour un site marketing de 20 à 200 pages, une petite équipe et un besoin de lancer vite, il est difficile à battre. Nous l'utilisons d'ailleurs sur une grande partie de nos projets. On l'a détaillé dans notre comparatif Webflow ou WordPress : quel CMS choisir.
WordPress a un écosystème inégalé, mais chaque plugin ajoute une dette. Au-delà d'un certain volume, la maintenance, la sécurité et la performance deviennent un poste à part entière.
Drupal est taillé pour les institutions : permissions très fines, contenus complexes, conformité. Il est souvent surdimensionné pour une scale-up. Voir notre comparatif Webflow vs Drupal.
Sanity + Astro devient pertinent quand le contenu devient un actif stratégique : plusieurs langues, plusieurs équipes, du SEO programmatique, des produits ou des données à synchroniser, ou une volonté de piloter le site avec l'IA.
Ce que le headless change vraiment en SEO
Le headless ne rend pas un site plus rapide par magie. Il vous donne le contrôle total de ce que Google et les LLMs reçoivent. La nuance est importante, et les données le montrent.
Le mythe du « headless = plus rapide »
Le rapport Core Web Vitals de HTTP Archive mesure la part de sites qui valident les trois indicateurs de Google (LCP, INP, CLS) sur de vrais utilisateurs Chrome. Les chiffres de 2025 et 2026 sont éclairants :
| Plateforme | Sites qui valident les Core Web Vitals | Source |
|---|---|---|
| Wix | 80 % | HTTP Archive, avril 2026 |
| Webflow | 67 % (mobile), 79 % (desktop) | HTTP Archive, novembre 2025 |
| Astro | 67 % | HTTP Archive, avril 2026 |
| Drupal | 64 % | HTTP Archive, avril 2026 |
| WordPress | 49 % | HTTP Archive, avril 2026 |
Deux enseignements :
- Astro fait bien mieux que WordPress, mais pas mieux que Webflow en moyenne. Un site Astro mal construit (images non optimisées, scripts tiers en pagaille) peut être lent.
- Les plateformes fermées ont de bons scores parce qu'elles limitent ce que vous pouvez faire. Moins de liberté, moins de risques. Le headless inverse la logique : liberté totale, donc la performance dépend de la qualité du build.
La vraie promesse du headless, c'est donc un plafond plus haut, pas un plancher plus haut. Avec Astro, un site bien construit envoie zéro JavaScript par défaut et atteint des scores Lighthouse proches de 100. Mais c'est un choix d'ingénierie, pas un acquis.
Le vrai gain : le contrôle du SEO technique
Voici ce qu'un site Sanity + Astro permet de faire nativement, sans contournement :
| Levier SEO | Sur un CMS monolithique | En headless Sanity + Astro |
|---|---|---|
| Données structurées (JSON-LD) | Embed manuel page par page | Générées automatiquement depuis le modèle de contenu |
| Canonicals | Réglage global ou par page | Règles par type de contenu, avec exceptions |
| Hreflang | Géré par l'outil de localisation | Généré depuis les relations de traduction |
| Sitemaps | Un sitemap global | Sitemaps segmentés (blog, produits, langues), avec lastmod réel |
| Redirections | Liste dans les réglages, souvent limitée | Document Sanity dédié, éditable par le marketing, déployé au niveau du CDN |
| Rendu | Imposé par la plateforme | Statique, serveur ou hybride, page par page |
| Maillage interne | Manuel | Suggestions et blocs « articles liés » basés sur les références |
| Balises meta | Champs standards | Champs sur mesure, validations (longueur, mot-clé présent) |
| Robots et indexation | Réglages globaux | Règles par type, par langue, par environnement |
Le SEO programmatique devient accessible
C'est probablement le levier le plus sous-estimé. Le SEO programmatique consiste à générer des pages à grande échelle à partir de données structurées : une page par intégration, par ville, par cas d'usage, par comparatif.
Sur Webflow, c'est possible jusqu'aux limites du CMS (20 000 items sur le plan Premium). En headless, le modèle de contenu et les templates Astro permettent de générer des milliers de pages, chacune avec ses propres données structurées, son maillage et ses règles d'indexation.
Exemple type pour un SaaS : une page par intégration (« Connecter [votre outil] à HubSpot »), alimentée par un document Sanity qui contient les fonctionnalités, les cas d'usage, les captures et la FAQ propre à l'intégration.
Les trois risques SEO d'une migration headless
- Le rendu côté client. Si le front charge le contenu en JavaScript après l'affichage, Google peut l'indexer mal ou tard. Avec Astro, le rendu est statique ou côté serveur par défaut : le risque disparaît, à condition de ne pas le réintroduire.
- La perte des redirections. C'est la première cause de chute de trafic après une migration. Chaque ancienne URL doit rediriger en 301 vers sa nouvelle équivalente. Nous y revenons dans la checklist.
- La preview qui fuit. Les environnements de prévisualisation mal configurés se retrouvent indexés. Il faut des règles noindex strictes et une authentification sur tout ce qui n'est pas la production.
Pour aller plus loin sur les fondamentaux, notre guide 9 étapes pour optimiser son site Webflow pour le SEO reste valable quelle que soit la stack.
GEO : être cité par ChatGPT, Perplexity et Gemini
Le GEO (Generative Engine Optimization) consiste à optimiser son contenu pour être repris et cité par les moteurs de réponse IA. Un CMS headless aide sur trois points : la structure, la cohérence et la distribution.
La structure : un modèle de contenu plutôt qu'un gros bloc de texte
Un LLM extrait mieux une information qui a un nom. Dans Sanity, une définition peut être un champ definition, une FAQ une liste de paires question / answer, un chiffre clé un objet stat avec sa valeur, sa source et sa date.
Résultat : ces éléments peuvent être rendus proprement en HTML sémantique, balisés en JSON-LD, et réutilisés partout sur le site avec la même formulation.
La cohérence : une seule source de vérité
Votre tarif, votre nombre de clients, la définition de votre produit : si ces informations existent à un seul endroit dans le CMS et sont référencées partout, elles restent cohérentes. Les LLMs pénalisent les sources contradictoires.
La distribution : servir les machines aussi bien que les humains
Avec Astro, il devient simple de générer en plus des pages HTML :
- un fichier
llms.txtqui résume le site et pointe vers les pages clés - des versions markdown de chaque page (par exemple
/blog/mon-article.md), plus légères à lire pour un agent - des flux JSON pour les partenaires ou les intégrations
- un balisage JSON-LD complet (Organization, Article, FAQPage, Product, BreadcrumbList)
| Levier GEO | Implémentation headless |
|---|---|
| Définitions explicites | Champ dédié, rendu en début de section |
| FAQ | Objet structuré, balisé FAQPage |
| Chiffres et sources | Objet stat avec source et date, réutilisable |
| Entités | Documents person, company, product référencés |
| Accès machine | llms.txt, endpoints markdown, sitemaps à jour |
| Fraîcheur | Date de mise à jour réelle, gérée par le CMS |
Administrabilité : le CMS maison vraiment agile
C'est l'argument qui convainc le plus nos clients, bien avant la performance. Avec Sanity, le back-office n'est pas un outil générique auquel votre équipe s'adapte : c'est un outil construit autour de votre équipe.
Un Studio sur mesure
Sanity Studio, l'interface d'édition, est une application configurée en code. Cela permet de :
- Nommer les choses comme votre équipe les nomme. « Page intégration », « Témoignage client », « Offre », plutôt que « Collection 7 ».
- Guider la saisie. Aide contextuelle sous chaque champ, exemples, limites de caractères, champs obligatoires.
- Empêcher les erreurs. Règles de validation : une meta description de plus de 155 caractères, un article sans image de partage ou une page sans mot-clé ne peuvent pas être publiés.
- Organiser par métier. Une vue « Blog » pour le content manager, une vue « Produit » pour le PMM, une vue « Légal » pour le juridique.
La prévisualisation visuelle
Le reproche historique au headless : « on édite des formulaires sans voir le résultat ». C'est réglé. L'outil Presentation de Sanity affiche le site en direct à côté des champs. On clique sur un titre dans l'aperçu, le champ correspondant s'ouvre. On modifie, l'aperçu se met à jour.
Des workflows éditoriaux dignes de ce nom
| Besoin | Sanity |
|---|---|
| Préparer un lancement (10 pages + 3 articles + nouvelle offre) | Content Releases : on groupe les changements, on prévisualise l'ensemble, on publie d'un coup ou à une date |
| Programmer une publication | Publication programmée |
| Faire relire | Commentaires sur un champ précis, tâches assignées |
| Revenir en arrière | Historique complet de chaque document, restauration en un clic |
| Travailler à plusieurs | Édition collaborative en temps réel, sans conflit |
Ce que le marketing fait seul, ce qui reste au dev
| Le marketing fait seul | Le dev intervient |
|---|---|
| Créer et publier des pages à partir des blocs existants | Créer un nouveau type de bloc |
| Rédiger, traduire, programmer | Modifier le modèle de contenu |
| Gérer les redirections et les meta | Ajouter une intégration (CRM, analytics, A/B test) |
| Lancer une campagne via une Release | Faire évoluer le design system |
| Réorganiser la navigation | Optimiser la performance |
La frontière n'est pas figée. Avec le vibe coding (on y vient), une partie de la colonne de droite passe à gauche.
Design system : la vraie clé de l'agilité
On parle souvent du CMS quand on parle d'agilité. C'est une erreur : un Studio bien configuré permet de publier du contenu, mais c'est le design system qui permet de créer des pages. Sans lui, chaque nouvelle landing page redevient un projet de design et de développement. Avec lui, c'est un assemblage de blocs que le marketing fait seul, en respectant la marque.
Autrement dit, l'agilité d'un site headless se décide au moment du design, pas au moment du code. C'est pour ça qu'on traite le design system comme un livrable à part entière de la migration, pas comme une étape du build.
Ce que le design system change pour votre équipe
| Sans design system | Avec un design system |
|---|---|
| Chaque nouvelle page passe par un designer puis un développeur | Le marketing assemble la page seul à partir des blocs existants |
| Les pages dérivent : trois styles de boutons, cinq nuances de gris | Chaque page respecte la charte, par construction |
| Les pages traduites cassent (textes plus longs, mises en page figées) | Les blocs sont pensés pour s'adapter à toutes les langues |
| Un nouvel éditeur met des semaines à maîtriser le site | Il apprend une bibliothèque de blocs nommés, en une session |
| Un agent IA produit des pages hors charte | Il réutilise les composants existants et produit des pages cohérentes |
| Chaque évolution de marque impose de reprendre les pages une à une | On change un token, tout le site suit |
Ce qu'un bon design system contient
- Des fondations : les design tokens (couleurs, typographies, espacements, rayons, ombres), définis une fois et nommés par intention (« fond marque », « texte secondaire »).
- Des composants : boutons, cartes, tags, formulaires, avec leurs états et leurs variantes.
- Des blocs de page : hero, logos, features, témoignages, pricing, FAQ, CTA. Ce sont eux que le marketing manipule dans Sanity.
- Des règles d'usage : quel bloc pour quel objectif, combien de caractères par titre, quelles combinaisons éviter.
- Une source unique : les mêmes noms dans Figma, dans le code Astro et dans le Studio Sanity. Le designer, le développeur, le marketing et l'agent IA parlent de la même chose.
Exemple : les blocs interactifs de ce guide
Les huit blocs interactifs de ce guide (le schéma d'architecture, le comparatif filtrable, le graphique Core Web Vitals, la démo de page builder, la stack, le simulateur d'abonnements, le diagnostic et la frise de migration) ont été créés de toutes pièces avec Claude Cowork, en reprenant le design system de notre produit, l'app Gemeos.
Concrètement, l'agent a lu nos maquettes Figma (conteneurs, cartes, toggles, onglets, tags, KPI cards), en a extrait les tokens (couleurs, ombres, rayons, typographies), puis a codé chaque bloc uniquement à partir de ces fondations. Nous avons relu et ajusté le contenu, sans redessiner un seul bloc : c'est le design system qui a garanti la cohérence.
C'est exactement ce qui se passe sur un site headless bien conçu. Quand les fondations sont claires, un agent IA produit de nouveaux composants qui ont l'air d'avoir toujours fait partie du site. Sans design system, il aurait inventé un style par bloc.
Le page builder par blocs
Un site headless bien conçu donne au marketing la liberté de créer des pages, sans lui donner la possibilité de casser la marque. Le page builder à blocs contraints est la partie visible du design system.
Le principe : un bloc Sanity = un composant Astro. Chaque section du site (hero, grille de logos, témoignages, tableau de prix, FAQ, CTA) existe deux fois :
- dans Astro, sous forme de composant codé, qui respecte le design system
- dans Sanity, sous forme de bloc avec ses champs (titre, texte, image, variante)
Le marketing assemble une page en empilant des blocs dans Sanity. Astro affiche chaque bloc avec le composant correspondant. Une nouvelle landing page se monte en 20 minutes, sans ticket au dev.
Des tokens pour ne jamais sortir de la charte
Les design tokens sont les valeurs de base de votre identité : couleurs, typographies, espacements, rayons, ombres. Dans un site headless, ils sont définis une seule fois dans le code et utilisés partout.
Côté Sanity, on ne propose jamais un sélecteur de couleur libre. On propose des variantes nommées : « Fond clair », « Fond marque », « Fond sombre ». Le marketing choisit une intention, le design system applique la bonne valeur.
Les garde-fous qui évitent la dérive
| Risque | Garde-fou |
|---|---|
| Titres trop longs qui cassent la mise en page | Limite de caractères avec compteur |
| Images au mauvais format | Ratio imposé, recadrage avec point focal |
| Pages sans CTA | Bloc CTA obligatoire sur certains types de page |
| Couleurs hors charte | Variantes nommées uniquement |
| Empilement incohérent | Règles : pas deux heroes, FAQ toujours en bas |
C'est la différence avec un outil visuel libre : on ne demande pas au marketing d'avoir l'œil d'un designer. On lui donne un système qui produit toujours un bon résultat. Et plus le design system est riche en blocs et en variantes, plus la colonne « le marketing fait seul » s'allonge. C'est un sujet qui nous tient à cœur, on l'explique dans pourquoi l'image de marque compte plus que vous ne le pensez.
Vibe coding et agents IA sur un CMS headless
Le vibe coding désigne le fait de construire ou modifier un logiciel en décrivant ce qu'on veut en langage naturel à un agent IA, qui écrit le code. Sur un site headless, c'est un changement profond : le site devient un projet que l'équipe peut faire évoluer avec l'IA, sans attendre le sprint suivant.
Pourquoi le headless s'y prête mieux qu'un outil visuel
Dans Sanity + Astro, tout est du code ou des données structurées : le schéma de contenu, les composants, le design system, la configuration. Un agent IA peut donc tout lire, tout comprendre et proposer des modifications vérifiables.
Dans un outil visuel, l'état du site est enfermé dans une interface. L'IA peut aider, mais elle travaille à travers une API plus étroite.
Ce que permet le serveur MCP de Sanity
Le MCP (Model Context Protocol) est un standard qui permet à un agent IA d'utiliser des outils externes. Le serveur MCP de Sanity, compatible avec Claude Code, Cursor, VS Code, Claude Desktop, v0 et Lovable, expose plus de 40 outils :
| Catégorie | Ce que l'agent peut faire |
|---|---|
| Documents | Créer, rechercher, modifier, publier, dépublier |
| Schéma | Lire le modèle de contenu, déployer des changements |
| Releases | Préparer et programmer un lot de contenus |
| Médias | Générer et transformer des images |
| Recherche | Recherche sémantique dans le contenu et la documentation |
| Migration | Parcours guidés depuis WordPress, Contentful, Strapi, Drupal |
Un workflow type : du besoin au déploiement
- Le growth lead ouvre Claude Code : « Ajoute un bloc "Comparatif" avec un tableau à 3 colonnes et une ligne mise en avant. »
- L'agent crée le schéma du bloc dans Sanity et le composant Astro, en réutilisant les tokens existants.
- Il ouvre une pull request avec une preview du site.
- Un dev relit en 10 minutes, valide, fusionne.
- Le bloc est disponible dans le Studio pour toute l'équipe.
Les agents de contenu
Au-delà du code, l'IA travaille directement sur le contenu :
- traduire une page dans 4 langues en respectant un glossaire
- remplir les meta descriptions manquantes selon vos règles
- proposer des liens internes pertinents à partir des références existantes
- détecter les contenus obsolètes (chiffres datés, produits retirés)
Les limites à connaître
Le vibe coding ne supprime pas le besoin d'expertise. Il le déplace.
- La relecture humaine reste indispensable, sur le code comme sur le contenu.
- Les permissions comptent. Un agent doit travailler avec un jeton limité, sur un dataset de test avant la production.
- La qualité dépend du socle. Un agent qui travaille sur un design system propre produit du propre. Sur un socle désordonné, il amplifie le désordre. Les blocs interactifs de ce guide, générés à partir du design system de notre app, en sont un bon exemple.
C'est pour cela que l'architecture initiale compte autant : elle détermine ce que l'IA pourra faire correctement pendant des années.
Pourquoi Astro (et quand préférer Next.js)
Astro est un framework web conçu pour les sites orientés contenu : sites marketing, blogs, documentation, e-commerce éditorial. Son principe clé est l'architecture en îlots : la page est en HTML statique, et seuls les éléments interactifs (un formulaire, un calculateur) chargent du JavaScript.
Astro vs Next.js pour un site marketing
| Critère | Astro | Next.js |
|---|---|---|
| Philosophie | Contenu d'abord, zéro JS par défaut | Application d'abord, React partout |
| JavaScript envoyé | Uniquement pour les îlots interactifs | Runtime React sur chaque page |
| Performance par défaut | Excellente | Bonne, demande de l'optimisation |
| Composants | Astro, React, Vue, Svelte mélangeables | React uniquement |
| Hébergement | Partout (Cloudflare, Vercel, Netlify, serveur) | Optimal sur Vercel |
| Idéal pour | Site marketing, blog, docs, SEO programmatique | Site marketing + app connectée, espace client |
| Courbe d'apprentissage | Douce (proche du HTML) | Plus raide |
Quand choisir Next.js
Si votre site marketing et votre produit partagent beaucoup de composants, ou si le site comprend une vraie partie applicative (espace client, configurateur complexe), Next.js est un choix cohérent.
C'est le cas d'Allo, l'assistant téléphonique IA : leur site tourne sur Next.js avec Sanity comme CMS. Même logique headless, autre framework.
Pour un site dont la mission principale est de ranker, convaincre et convertir, Astro est notre choix par défaut.
Notre stack de référence
Voici l'architecture que nous recommandons pour une scale-up B2B qui migre en headless.
| Brique | Outil recommandé | Rôle | Alternatives |
|---|---|---|---|
| CMS | Sanity | Contenu structuré, Studio, workflows | Storyblok, Contentful, Payload |
| Framework | Astro | Génération des pages, composants | Next.js, Nuxt |
| Hébergement | Cloudflare ou Vercel | CDN, rendu serveur, previews | Netlify |
| Images | Sanity Image Pipeline | Redimensionnement, formats modernes, point focal | Cloudinary |
| Formulaires | Intégration CRM directe (HubSpot, Attio) | Capture de leads | Formspree, Tally |
| Analytics | GA4 + outil produit | Mesure | Plausible, PostHog |
| A/B testing | Outil branché sur les blocs Sanity | Tests sans dev | Variantes natives |
| Recherche | Algolia ou recherche Sanity | Recherche interne | Pagefind (statique) |
| Monitoring SEO | Search Console + crawler | Suivi post-migration | Screaming Frog, Ahrefs |
{cta}
Coûts et TCO : combien coûte vraiment une migration headless
Pendant longtemps, le headless coûtait plus cher : il fallait des semaines de développement pour modéliser le contenu, coder les composants et configurer le back-office. En 2026, ce n'est plus vrai. Avec les agents IA, le serveur MCP de Sanity et des composants Astro générés à partir du design system, le coût de construction d'un site headless est désormais comparable à celui d'un site Webflow. Et côté abonnements, le headless est souvent moins cher dès que l'équipe grandit.
Les quatre postes de coût
| Poste | Webflow | Sanity + Astro |
|---|---|---|
| Construction du site | Référence | Comparable : schéma, composants et Studio accélérés par l'IA |
| Abonnements | Plan de site + Workspace + sièges + Localize | Sièges Sanity + hébergement |
| Évolutions | Souvent faites en interne | En interne ou avec un agent IA, relu par un dev |
| Coûts cachés | Plafonds de plan, add-ons de bande passante, sièges | Maintenance des dépendances, monitoring |
Exemple chiffré : une équipe de 10 personnes
Hypothèses : 2 personnes qui ont besoin d'un accès complet (design, admin), 8 éditeurs de contenu, un seul site. Tarifs annuels publics en septembre 2026, hors taxes.
| Ligne | Webflow | Sanity + Astro |
|---|---|---|
| Plan de site | Premium : 25 $/mois | Non applicable |
| Workspace | Growth : 49 $/mois | Non applicable |
| Sièges complets | 2 × 39 $ = 78 $/mois | Inclus dans les sièges Sanity |
| Sièges éditeurs | 8 × 15 $ = 120 $/mois | 10 × 15 $ = 150 $/mois (plan Growth) |
| Hébergement | Inclus | Environ 20 $/mois (Vercel Pro, 1 membre) ou moins sur Cloudflare |
| Multilingue | Webflow Localize en supplément | Inclus |
| Total abonnements | Environ 272 $/mois, soit 3 260 $/an, hors Localize | Environ 170 $/mois, soit 2 040 $/an |
Sur cet exemple, le headless revient environ 100 $ moins cher par mois, soit plus de 1 200 $ par an. L'écart se creuse avec chaque langue ajoutée et chaque personne qui rejoint l'équipe. Le simulateur ci-dessous refait le calcul avec votre situation.
Pour le détail côté Webflow, voir nos guides sur les abonnements et tarifs Webflow et le coût d'une refonte de site sur Webflow.
Faut-il passer en headless ? Le diagnostic
Le headless n'est pas une montée en gamme obligatoire. C'est une réponse à des problèmes précis. Si vous ne les avez pas, restez sur votre stack actuelle et investissez ailleurs.
Les 10 questions du diagnostic :
- Votre site dépasse-t-il 300 pages ou 5 000 contenus CMS ?
- Publiez-vous dans plus de deux langues ?
- Plus de 5 personnes publient-elles régulièrement sur le site ?
- Avez-vous besoin de workflows de validation (relecture, juridique, lancement groupé) ?
- Votre contenu doit-il alimenter d'autres canaux (app, produit, partenaires, agents IA) ?
- Voulez-vous faire du SEO programmatique à grande échelle ?
- Rencontrez-vous des limites techniques sur votre plateforme actuelle ?
- Avez-vous un développeur en interne ou une agence partenaire sur la durée ?
- Voulez-vous faire évoluer le site avec des agents IA ?
- Le site est-il un canal d'acquisition majeur pour votre croissance ?
Quand ne pas migrer
On le dit à nos clients aussi clairement qu'ici : ne migrez pas si
- votre site fait moins de 50 pages et évolue peu
- personne ne pourra maintenir le code sur la durée
- votre problème est le contenu ou la conversion, pas la plateforme
- vous devez relancer le site dans un délai très court, sans marge pour l'audit
- vous êtes early-stage et votre positionnement va encore changer
Dans ces cas, un site Webflow bien construit vous rendra plus de services. On a aussi écrit un guide sur le prix d'un site internet pour calibrer votre budget.
La migration headless en 7 étapes
Une migration headless réussie se joue avant la première ligne de code. Les trois premières étapes (audit, modélisation, plan de redirections) déterminent 80 % du résultat SEO.
Étape 1 : l'audit de l'existant
On inventorie tout ce qui a de la valeur avant de toucher à quoi que ce soit.
- crawl complet du site (toutes les URLs, statuts, balises, profondeur)
- export Search Console : pages qui reçoivent des clics et des impressions
- pages qui reçoivent des backlinks
- inventaire des types de contenu, des champs, des médias
- inventaire des scripts, intégrations et formulaires
Livrable : un fichier de référence qui liste chaque URL avec son trafic, ses backlinks et son sort (conserver, fusionner, supprimer).
Étape 2 : la modélisation du contenu
C'est l'étape la plus stratégique. On définit les types de documents (article, page, cas client, intégration, auteur), leurs champs et leurs relations.
La règle : modéliser le contenu selon ce qu'il est, pas selon comment il s'affiche. Un « témoignage » est un document réutilisable, pas un bloc de texte dans une page.
Livrable : le schéma Sanity documenté, validé par le marketing.
Étape 3 : le plan de redirections
Chaque URL de l'ancien site qui a du trafic ou des backlinks doit avoir une destination. Idéalement la même URL. Sinon, une redirection 301 vers la page la plus proche.
Livrable : la table de correspondance ancienne URL → nouvelle URL, importée dans Sanity.
Étape 4 : le design system, puis le build
C'est l'étape qui décide de l'agilité future de votre équipe. On commence par le design : les tokens, les composants et la bibliothèque de blocs, pensés à partir des pages dont le marketing aura besoin dans les 12 prochains mois, pas seulement de celles qui existent aujourd'hui. Ensuite seulement, on construit les composants Astro, le page builder et les templates, et on configure le Studio (vues, validations, preview).
Livrable : un design system documenté et un site fonctionnel sur un environnement de préproduction, non indexable.
Étape 5 : la migration du contenu
La migration se fait par script, jamais à la main au-delà de quelques dizaines de pages. Le script récupère l'ancien contenu (API, export CSV ou crawl), le transforme vers le nouveau modèle, télécharge les médias et crée les documents dans Sanity.
C'est ici que le serveur MCP de Sanity et un agent IA font gagner le plus de temps : écriture du script, transformation du rich text, contrôle de cohérence.
Livrable : 100 % du contenu dans Sanity, vérifié par échantillonnage.
Étape 6 : la QA SEO
On compare l'ancien et le nouveau site, URL par URL : balises title et meta, H1, canonicals, hreflang, données structurées, maillage interne, performance, redirections.
Livrable : un rapport de QA sans erreur bloquante.
Étape 7 : le lancement et le monitoring
Bascule du DNS, soumission des sitemaps, surveillance quotidienne pendant 2 semaines, puis hebdomadaire pendant 3 mois.
Livrable : un tableau de bord de suivi (pages indexées, erreurs 404, positions, trafic organique).
Combien de temps dure une migration ?
Ça dépend du scope. Deux sites de 200 pages peuvent demander des plannings très différents selon ce qu'on migre et ce qu'on refait. C'est pour ça qu'on ne donne jamais de durée avant l'audit : on la chiffre une fois le scope connu.
| Ce qui allonge le projet | Ce qui le raccourcit |
|---|---|
| Une refonte complète du design en même temps que la migration | Un design system déjà en place, repris tel quel |
| Beaucoup de types de contenu et de relations entre eux | Un modèle de contenu simple (pages, articles, cas clients) |
| Plusieurs langues à migrer et à maintenir | Une seule langue au lancement, les autres ensuite |
| Un gros volume de contenu, une source mal structurée | Un export propre (API ou CSV) depuis l'ancien CMS |
| Des intégrations (CRM, outils produit, données) | Des formulaires et un analytics standards |
| Des validations lentes ou éclatées entre plusieurs équipes | Un décideur unique et des points de validation planifiés |
Le levier le plus sous-estimé : migrer par étapes. Lancer d'abord le blog ou une section en headless permet de valider l'approche vite, puis d'étendre au reste du site.
La checklist SEO de migration
Gardez cette checklist ouverte pendant tout le projet. Chaque point non coché est un risque de perte de trafic.
| Phase | Point de contrôle |
|---|---|
| Avant | Crawl complet de l'ancien site archivé |
| Avant | Export Search Console (12 derniers mois) |
| Avant | Liste des pages avec backlinks |
| Avant | Positions des mots-clés principaux relevées |
| Avant | Table de redirections complète et validée |
| Avant | Structure d'URLs conservée partout où c'est possible |
| Pendant | Préproduction en noindex et protégée par mot de passe |
| Pendant | Balises title et meta migrées à l'identique ou améliorées |
| Pendant | Un seul H1 par page |
| Pendant | Canonicals auto-référents |
| Pendant | Hreflang cohérents dans toutes les langues |
| Pendant | Données structurées validées (Rich Results Test) |
| Pendant | Textes alternatifs des images migrés |
| Pendant | Maillage interne sans lien vers d'anciennes URLs |
| Pendant | Core Web Vitals testés sur les templates principaux |
| Pendant | Sitemaps générés et segmentés |
| Pendant | robots.txt de production prêt |
| Lancement | Redirections 301 testées en masse |
| Lancement | Noindex retiré de la production |
| Lancement | Sitemaps soumis dans Search Console |
| Lancement | Analytics et conversions vérifiés |
| Après | Suivi quotidien des 404 et erreurs d'exploration (2 semaines) |
| Après | Suivi des pages indexées |
| Après | Suivi des positions et du trafic (3 mois) |
| Après | Mise à jour des backlinks majeurs vers les nouvelles URLs |
Ils ont migré : exemples et résultats
Les exemples ci-dessous montrent un point commun : la migration headless n'est pas un projet technique, c'est un projet d'autonomie pour les équipes marketing.
Amplitude : de WordPress à Sanity
Amplitude tournait sur un WordPress personnalisé depuis plus de dix ans. Seuls 3 ingénieurs pouvaient modifier le site, et l'équipe publiait 4 à 5 contenus par mois.
Après la migration vers Sanity, réalisée sans interruption de service sur des milliers de pages :
| Indicateur | Résultat |
|---|---|
| Production de contenus SEO | 18 fois plus |
| Vitesse du site | 76 % plus rapide |
| Trafic | +19 % sur un an |
| Utilisateurs actifs du CMS | 70 personnes dans 10 équipes |
| Premier A/B test | +25 % de conversion |
Gong : 400 pages sorties de WordPress
Gong, la plateforme de revenue intelligence, a migré plus de 400 pages de WordPress vers Sanity. Le moteur du projet : sortir le marketing de sa dépendance à l'équipe technique pour chaque mise à jour.
Calendly, Allo et la vague SaaS
Calendly fait partie des SaaS B2B qui ont choisi Sanity pour leur site. Allo, la startup française de téléphonie IA, s'appuie aussi sur Sanity, avec un front Next.js. Le schéma se répète : quand le site devient une machine d'acquisition, le contenu passe dans un CMS structuré.
Cloudflare, IKEA, Porsche : Astro en production
Côté framework, Astro est utilisé par Cloudflare (sites, documentation, blog), IKEA, Porsche ou OpenAI. Webflow lui-même a choisi Astro pour Webflow Cloud. Autrement dit : même les plateformes no-code misent sur Astro quand il faut du code.
Vous hésitez encore sur la plateforme de départ ? Nos comparatifs Webflow vs HubSpot CMS et les meilleures alternatives à Webflow donnent une vue d'ensemble.
FAQ
Qu'est-ce qu'un CMS headless ?
Un CMS headless est un système de gestion de contenu qui stocke et structure le contenu sans gérer son affichage. Le contenu est distribué par API à un ou plusieurs front-ends (site, app, agent IA). Sanity, Contentful et Storyblok sont des CMS headless.
Une migration headless fait-elle perdre du trafic SEO ?
Pas si elle est bien préparée. Les pertes viennent presque toujours de redirections manquantes, de balises non migrées ou d'une préproduction indexée. Avec un plan de redirections complet et une QA URL par URL, le trafic reste stable, puis progresse grâce au meilleur contrôle technique.
Combien de temps dure une migration vers Sanity + Astro ?
Ça dépend du scope : volume de contenu, nombre de langues, refonte du design ou non, intégrations et rythme des validations. C'est pour ça qu'on chiffre toujours le planning après l'audit, pas avant. Migrer par étapes, en commençant par le blog ou une section, permet d'obtenir des résultats plus vite.
Le headless est-il plus rapide que Webflow ?
Pas automatiquement. D'après HTTP Archive, Astro et Webflow (mobile) affichent le même taux de réussite aux Core Web Vitals, environ 67 %. Le headless offre un plafond plus haut : un site Astro bien construit peut dépasser n'importe quelle plateforme, mais cela dépend de la qualité du build.
Mon équipe marketing pourra-t-elle modifier le site sans développeur ?
Oui, pour tout ce qui relève du contenu : pages, articles, traductions, redirections, meta, lancements. Avec un page builder à blocs, elle crée aussi de nouvelles pages seule. Créer un nouveau type de bloc demande en revanche un développeur, ou un agent IA encadré.
Pourquoi Sanity plutôt que Contentful ou Strapi ?
Sanity combine un Studio entièrement personnalisable, une édition collaborative en temps réel, une preview visuelle et un serveur MCP complet pour les agents IA. Son plan Growth à 15 $ par siège et par mois reste nettement moins cher que la plupart des concurrents pour une équipe de 5 à 20 personnes.
Pourquoi Astro plutôt que Next.js ?
Astro envoie zéro JavaScript par défaut et ne charge du code que pour les éléments interactifs. Pour un site dont la mission est de ranker et de convertir, c'est l'option la plus performante et la plus simple à maintenir. Next.js est préférable si le site partage beaucoup de code avec une application React.
Peut-on migrer progressivement ?
Oui. On peut commencer par le blog ou par une section (par exemple les pages intégrations) en headless, sur un sous-dossier, pendant que le reste du site reste sur la plateforme actuelle. C'est souvent la meilleure façon de valider l'approche avant de tout migrer.
Combien coûte un CMS headless par mois ?
Sanity est gratuit jusqu'à 20 sièges avec des limites strictes, puis 15 $ par siège et par mois sur le plan Growth. Ajoutez l'hébergement du front (de 0 à quelques dizaines de dollars par mois selon le trafic). Pour une équipe de 10 personnes, les abonnements tournent autour de 170 $ par mois.
Conclusion
La migration headless CMS n'est pas une mode technique. C'est le choix de faire de votre site un actif que vos équipes, et demain vos agents IA, peuvent faire évoluer sans friction, à condition de lui donner un design system solide.
Chez Gemeos, on accompagne des startups et scale-ups sur Webflow, WordPress et en headless avec Sanity + Astro. Notre règle est simple : choisir la stack qui sert la croissance du client, pas celle qui est à la mode. Si vous vous posez la question pour votre site, on commence toujours par l'audit.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


















