--- title: "Migrer de Framer vers Astro sans perdre son SEO — Dardo" description: "Framer n'exporte pas en HTML. Passer un site Framer à Astro : quoi capturer, comment refaire CMS, animations et formulaires, et garder URL et SEO." url: "https://dardo.studio/fr/blog/migrer-framer-vers-astro/" language: "fr" translations: {"en":"https://dardo.studio/en/blog/framer-to-astro/","es":"https://dardo.studio/es/blog/migrar-de-framer-a-astro/","de":"https://dardo.studio/de/blog/framer-zu-astro-migrieren/","it":"https://dardo.studio/it/blog/migrare-da-framer-ad-astro/","pt":"https://dardo.studio/pt/blog/migrar-de-framer-para-astro/","nl":"https://dardo.studio/nl/blog/framer-naar-astro/","sv":"https://dardo.studio/sv/blogg/migrera-framer-till-astro/","pl":"https://dardo.studio/pl/blog/migracja-z-framera-do-astro/","uk":"https://dardo.studio/uk/blog/framer-to-astro/","ru":"https://dardo.studio/ru/blog/framer-to-astro/","ar":"https://dardo.studio/ar/blog/framer-to-astro/","hi":"https://dardo.studio/hi/blog/framer-to-astro/","th":"https://dardo.studio/th/blog/framer-to-astro/","ja":"https://dardo.studio/ja/blog/framer-to-astro/","ko":"https://dardo.studio/ko/blog/framer-to-astro/","zh-Hans":"https://dardo.studio/zh-Hans/blog/framer-to-astro/","zh-Hant":"https://dardo.studio/zh-Hant/blog/framer-to-astro/"} updated: "2026-10-13T00:57:18.939Z" --- [Blog](https://dardo.studio/fr/blog/) # Migrer de Framer vers Astro : changer de plateforme sans perdre le design ni le référencement Framer n'exporte pas en HTML : passer à Astro, c'est reconstruire. Ce qu'il faut capturer d'abord, ce qui casse et comment garder design, URL et positions. Par [Nicolás Cerón](https://dardo.studio/fr/studio/) ·12 octobre 2026 ![Un cadre doré vide sur un chevalet dans un atelier de peintre la nuit, avec un fil cramoisi qui part du cadre, passe par une fenêtre ouverte et monte un chemin de colline jusqu'à un observatoire éclairé sous les étoiles.](https://dardo.studio/_astro/01M4S57PW4TH7D1E7E3RQM4Z4E_Z3SVDC.webp) ## Points clés - Framer ne propose pas d'export HTML pour héberger le site soi-même : passer à Astro, c'est reconstruire le site en prenant les pages Framer publiées comme référence. - Capturez chaque URL, collection du CMS, point de rupture et animation avant de reconstruire, car Framer charge contenu, images et code depuis son propre CDN et son runtime. - Les formulaires et les fichiers du CMS Framer dépendent de son runtime : donnez à chaque formulaire votre propre récepteur et déplacez le contenu vers des collections Astro ou un CMS headless. - Configurez des redirections 301 une à une côté serveur chez votre hébergeur ; un build Astro statique sans adaptateur ne produit que des redirections meta refresh. - Après la mise en ligne, vérifiez qu'aucune canonique, entrée du sitemap ni balise Open Graph ne pointe encore vers l'ancienne adresse Framer. ## La réponse courte Le centre d'aide de Framer l'écrit noir sur blanc : Framer ne propose pas d'export HTML pour héberger le site soi-même ([Framer Help](https://www.framer.com/help/articles/can-i-export-my-website-to-html-and-self-host-it/)). Passer de Framer à Astro n'est donc pas un export, c'est une reconstruction. On capture le site publié comme référence, on reconstruit chaque gabarit en composants Astro, on déplace le contenu du CMS dans des collections, on recrée les animations vraiment utiles et on donne une redirection permanente à chaque URL qui change. Dans cet ordre, le nouveau site peut garder le même rendu, charger moins de JavaScript et conserver son référencement. Sautez la capture ou le plan de redirections, et vous obtenez une refonte que personne n'a demandée et une baisse du trafic issu de la recherche. ## Pourquoi les équipes quittent Framer Framer est un bon outil pour concevoir et publier rapidement des sites marketing. Les raisons de partir sont en général pratiques plutôt qu'esthétiques : - **Hébergement et propriété du code.** Un site Framer tourne sur les serveurs de Framer. Les équipes qui veulent le code dans leur propre dépôt, chez leur propre hébergeur ou à côté de leur propre backend doivent reconstruire. - **Le coût de l'abonnement par site.** Sur la [page des tarifs de Framer](https://www.framer.com/pricing/), consultée le 12 octobre 2026, le plan Basic coûte 10 USD par mois et le plan Pro, qui ajoute les redirections, 30 USD par mois, tous deux en facturation annuelle. La localisation est une option payante. - **Des redirections limitées.** Les redirections de Framer ne fonctionnent que pour des chemins du même domaine ([Framer Help](https://www.framer.com/help/articles/how-to-setup-redirects-to-maintain-seo-ranking/)). - **Formulaires, données et intégrations** qui exigent un vrai backend : un CRM, un système de réservation, du contenu réservé ou tout ce qui doit tourner sur votre propre infrastructure. Si votre équipe marketing crée et modifie des pages visuellement chaque semaine et que le site remplit son rôle, rester sur Framer peut être le bon choix. Une migration coûte du temps de design et de développement ; elle doit apporter quelque chose de précis. ## Ce que nous a appris un outil de capture de sites Framer Chez Dardo, nous avons développé un outil interne qui capture une page Framer publiée, pour un site qui vous appartient, et la transforme en fichier de référence autonome accompagné d'un tableau de suivi de migration vers Astro, avec une ligne par élément à reconstruire. Le construire nous a montré où les sites Framer cachent leur complexité : - **Les fichiers vivent sur le CDN de Framer.** Images, polices et code se chargent depuis framerusercontent.com et des domaines associés. Les images responsives demandent le même fichier en plusieurs largeurs (?width=512, ?width=1024) ; la capture garde donc un seul fichier local par image, le plus grand. - **Le JavaScript arrive par couches.** Framer charge de petits modules qui ne font que réexporter le vrai bundle, si bien qu'une seule passe laisse du code de côté. L'outil relance l'analyse jusqu'à ce qu'aucun nouveau module n'apparaisse. - **Le contenu du CMS est un format à part.** Les collections du CMS Framer sont livrées sous forme de fichiers .framercms que la page récupère par plages d'octets sur le CDN. Sur un hébergement statique ordinaire, ces requêtes renvoient le fichier entier, et le module qui construit leurs URL pointe toujours vers Framer. - **Le runtime réécrit la page après son chargement.** Le runtime React de Framer hydrate le HTML et peut réinsérer des éléments que vous aviez supprimés. Le badge « Made in Framer », par exemple, est hydraté dans son propre conteneur. - **Les formulaires dépendent de Framer.** Les formulaires capturés n'ont pas d'attribut action en HTML ; les envois ne fonctionnent qu'à travers le runtime client de Framer. - **Les balises SEO pointent vers Framer.** Sans réécriture, les URL canoniques et Open Graph continuent d'annoncer l'adresse Framer d'origine. - **Les animations sont des données.** Les effets d'apparition sont stockés sous forme de JSON dans la page ; l'outil les enregistre avec les images clés et le minutage de chaque animation en cours. Notre conclusion : l'export est une preuve, pas le livrable. Nous ne mettons jamais en ligne le HTML capturé ni le runtime de Framer. Ils nous disent exactement quoi reconstruire. ## Migrer de Framer vers Astro, étape par étape 1. **Inventoriez toutes les URL.** Partez du sitemap.xml du site, ajoutez chaque page du CMS et téléchargez le rapport Pages de Google Search Console sur la plus longue période disponible. Notez les redirections déjà configurées dans Framer, sous Site Settings, Hosting. 2. **Exportez ce que Framer permet.** Framer indique que le contenu du CMS peut être exporté avec des plugins vers des formats comme CSV ou JSON ([Framer Help](https://www.framer.com/help/articles/porting-your-data-from-framer/)). Téléchargez chaque image et chaque fichier, et vérifiez la licence de chaque police avant de l'héberger vous-même. 3. **Capturez le site publié comme référence.** Enregistrez chaque gabarit à chaque point de rupture, ainsi que le minutage de chaque animation à conserver. Notre outil capture les pages à 1440, 810 et 390 pixels de large, puis un pixel en dessous, au niveau et au-dessus de chaque point de rupture trouvé dans le CSS du site. 4. **Reconstruisez les gabarits en composants Astro.** Déplacez les collections du CMS vers des [content collections](https://docs.astro.build/en/guides/content-collections/) ou un CMS headless, les images vers [astro:assets](https://docs.astro.build/en/guides/images/) et les pages traduites vers le [routage i18n d'Astro](https://docs.astro.build/en/guides/internationalization/), avec une URL par langue. 5. **Recréez les animations qui portent du sens.** La plupart des effets Framer deviennent des transitions CSS, des keyframes ou un petit script. Respectez prefers-reduced-motion. Lors de l'une de nos propres reconstructions de Framer vers Astro, un site de 18 routes qui n'était pas un projet client, 217 des 219 états de défilement et d'interaction correspondaient à l'original avec moins de 1 % d'écart de pixels. 6. **Donnez à chaque formulaire une vraie destination.** Reliez chaque formulaire à votre propre récepteur (un Cloudflare Worker, un service de formulaires ou votre CRM) et testez la livraison en préproduction. 7. **Reprenez les métadonnées de recherche.** Titres, descriptions, balises Open Graph, données structurées et une canonique auto-référente sur chaque page, plus un nouveau sitemap XML. 8. **Redirigez côté serveur, pas en HTML.** Un build Astro statique sans adaptateur transforme les redirections configurées en pages meta refresh sans code de statut HTTP ([référence de configuration d'Astro](https://docs.astro.build/en/reference/configuration-reference/)). Configurez des redirections 301 une à une là où le site est hébergé, par exemple dans un fichier \_redirects de Cloudflare ou un Worker. 9. **Mettez en ligne, puis surveillez.** Basculez le DNS, gardez le projet Framer jusqu'à ce que le nouveau site soit vérifié, et suivez les rapports d'indexation et Pages de Search Console pendant les semaines suivantes. Notre [checklist SEO de migration de site web](https://dardo.studio/fr/blog/checklist-seo-migration-site-web/) couvre le jour du lancement et les 90 jours qui suivent. ## Ce qui change après la migration | Aspect | Sur Framer | Sur Astro | | ------------ | --------------------------------------- | ------------------------------------------------------------------------ | | Édition | Canevas visuel de Framer | Champs d'un CMS ou code, selon votre choix | | Hébergement | Serveurs de Framer | N'importe quel hébergement statique ou plateforme edge, comme Cloudflare | | Redirections | Plan Pro ; sous-chemins du même domaine | 301 côté serveur chez votre hébergeur, sans limite de domaine | | Animations | Effets et interactions intégrés | CSS et JavaScript qui vous appartiennent et que vous pouvez mesurer | | CMS | Collections du CMS Framer | Content collections ou CMS headless | | Formulaires | Gestion des formulaires par Framer | Votre propre récepteur et votre propre stockage des données | ## Préserver le référencement Les consignes de Google sur les [déménagements de site avec changement d'URL](https://developers.google.com/search/docs/crawling-indexing/site-move-with-url-changes) s'appliquent ici : associez chaque ancienne URL à son équivalent le plus proche, utilisez des redirections permanentes côté serveur et gardez-les au moins un an. Si les URL restent identiques, ce qu'une reconstruction soignée permet souvent, il suffit de vérifier que les nouvelles pages reprennent le même contenu et les mêmes métadonnées. Le piège propre à Framer, c'est l'adresse Framer oubliée. Vérifiez qu'aucune canonique, entrée du sitemap ou balise Open Graph ne mentionne encore l'ancienne URL Framer, et que le projet Framer est dépublié ou redirigé une fois le nouveau site en ligne. ## Comment Dardo mène une migration depuis Framer Nous menons les migrations depuis Framer dans le cadre de notre service de [migration de site web](https://dardo.studio/fr/services/migration-de-site-web/) : inventaire, capture, une page représentative reconstruite en premier et validée aux largeurs convenues, puis le reste des gabarits, des formulaires et des redirections. La construction relève du [développement web](https://dardo.studio/fr/services/developpement-web/) en Astro, et les animations du [développement créatif](https://dardo.studio/fr/services/developpement-creatif/). Ce site, dardo.studio, tourne sur Astro avec Cloudflare Workers et son contenu vit dans un CMS headless, la configuration que nous utilisons le plus souvent. Si vous envisagez de changer, [envoyez-nous le site et ce que vous voulez améliorer](https://dardo.studio/fr/contact/?service=website-migration). Nous vous dirons si une reconstruction en vaut la peine avant d'en chiffrer une. ## Questions fréquentes **Peut-on exporter un site Framer en HTML ?** Pas officiellement. Le centre d'aide de Framer indique qu'il ne propose pas d'export HTML pour l'auto-hébergement. Des outils peuvent capturer une page publiée, mais le résultat dépend toujours du runtime et du CDN de Framer : traitez-le comme une référence pour reconstruire, pas comme un site à mettre en ligne. **Vais-je perdre mon référencement Google en passant de Framer à Astro ?** Non, si chaque URL qui génère du trafic continue de fonctionner. Gardez les mêmes chemins quand c'est possible, ajoutez des redirections 301 permanentes pour ceux qui changent, reprenez titres, descriptions et données structurées, et surveillez Search Console pendant quelques semaines après la mise en ligne. **Peut-on exporter le contenu du CMS Framer ?** Framer indique que le contenu du CMS peut être exporté avec des plugins vers des formats comme CSV ou JSON. Téléchargez aussi chaque image et chaque fichier, car les champs des collections pointent souvent vers le CDN de Framer. **Mon équipe pourra-t-elle modifier le site sans coder après le passage à Astro ?** Oui, si le nouveau site utilise un CMS headless. Les rédacteurs travaillent dans une interface web et le site Astro est reconstruit à partir de ce contenu. C'est ainsi que fonctionne dardo.studio. **Les animations Framer fonctionnent-elles dans Astro ?** Pas directement. Les effets de Framer s'exécutent dans son propre runtime ; chaque animation à conserver est donc refaite en CSS ou avec un petit script, idéalement avec une version à mouvement réduit. ## Sources et lectures complémentaires Les sources de cette page, avec des précisions complémentaires de la part des éditeurs d'origine. - [Framer Help : peut-on exporter son site en HTML et l'héberger soi-même ? (en anglais)](https://www.framer.com/help/articles/can-i-export-my-website-to-html-and-self-host-it/) · framer.com - [Framer Help : transférer ses données hors de Framer (en anglais)](https://www.framer.com/help/articles/porting-your-data-from-framer/) · framer.com - [Framer Help : configurer des redirections (en anglais)](https://www.framer.com/help/articles/how-to-setup-redirects-to-maintain-seo-ranking/) · framer.com - [Tarifs de Framer](https://www.framer.com/pricing/) · framer.com - [Documentation Astro : content collections](https://docs.astro.build/en/guides/content-collections/) · docs.astro.build - [Documentation Astro : images](https://docs.astro.build/en/guides/images/) · docs.astro.build - [Documentation Astro : routage i18n](https://docs.astro.build/en/guides/internationalization/) · docs.astro.build - [Documentation Astro : référence de configuration (redirections)](https://docs.astro.build/en/reference/configuration-reference/) · docs.astro.build - [Google Search Central : déplacer un site en modifiant les URL](https://developers.google.com/search/docs/crawling-indexing/site-move-with-url-changes) · developers.google.com [Nicolás Cerón](https://dardo.studio/fr/studio/) Nicolás Cerón est le fondateur de Dardo, un studio de branding, de design et de développement web basé à Bogotá, en Colombie. ## Articles connexes - [**Checklist SEO de migration de site web : changer de plateforme ou de domaine sans perdre ses positions**Les positions chutent rarement à cause de la nouvelle plateforme, mais parce que des URL qui généraient du trafic ne répondent plus. Une checklist, de l'inventaire des URL au 90e jour.](https://dardo.studio/fr/blog/checklist-seo-migration-site-web/) - [**WordPress ou site sur mesure ? Comment choisir, et quand chaque option est rentable**WordPress ou site sur mesure : quand choisir l'un ou l'autre, et la voie du WordPress headless, comparés sur le coût, la vitesse, l'entretien et la propriété.](https://dardo.studio/fr/blog/wordpress-ou-site-sur-mesure/) - [**Sites web 3D : quand ils en valent la peine et comment les garder rapides**Quand un site web 3D vaut le coup, quand vidéo ou images font mieux, et comment nous avons gardé les dix mondes 3D de Janus Observatory rapides et accessibles.](https://dardo.studio/fr/blog/sites-web-3d/) - [**Prix d'un site web en Colombie en 2026 : tarifs réels et ce qui fait varier un devis**Prix d'un site web en Colombie : tarifs publiés et datés à Bogotá, coûts annuels du domaine et de l'hébergement, et ce qui fait vraiment varier un devis.](https://dardo.studio/fr/blog/prix-site-web-colombie/) ## Continuez à explorer. - [Service · **Migration de site web sans perdre votre référencement SEO**](https://dardo.studio/fr/services/migration-de-site-web/) - [Votre projet · **Lançons la conversation**](https://dardo.studio/fr/contact/)