Framer naar Astro: zo verhuis je een Framer-site zonder design of rankings te verliezen

Het korte antwoord

Volgens het eigen helpcenter van Framer biedt het platform geen HTML-export om een site zelf te hosten (Framer Help). Overstappen van Framer naar Astro is dus een herbouw, geen export. Je legt de gepubliceerde site vast als referentie, bouwt elke template opnieuw als Astro-componenten, verhuist de CMS-content naar collecties, maakt de animaties opnieuw die je echt nodig hebt en geeft elke URL die verandert een permanente redirect.

Werk je in die volgorde, dan kan de nieuwe site er hetzelfde uitzien, minder JavaScript laden en zijn rankings behouden. Sla je het vastleggen of de redirectmap over, dan krijg je een redesign waar niemand om heeft gevraagd en een dip in je zoekverkeer.

Waarom teams bij Framer weggaan

Framer is een goede tool om snel marketingsites te ontwerpen en te publiceren. De redenen om te vertrekken zijn meestal praktisch, niet esthetisch:

• Hosting en eigendom. Een Framer-site draait op de servers van Framer. Teams die de code in hun eigen repository willen hebben, bij hun eigen host of naast hun eigen backend, moeten opnieuw bouwen.
• Abonnementskosten per site. Op de prijspagina van Framer, geraadpleegd op 12 oktober 2026, kost het Basic-abonnement USD 10 per maand en het Pro-abonnement, dat redirects voor de site toevoegt, USD 30 per maand, allebei bij jaarlijkse facturering. Lokalisatie is een betaalde add-on.
• Beperkte redirects. Redirects in Framer werken alleen voor paden binnen hetzelfde domein (Framer Help).
• Formulieren, data en integraties die een echte backend nodig hebben: een CRM, een reserveringssysteem, afgeschermde content of alles wat op je eigen infrastructuur moet draaien.

Bouwt en bewerkt je marketingteam elke week visueel pagina's en doet de site wat hij moet doen, dan kan bij Framer blijven de juiste keuze zijn. Een migratie kost ontwerp- en ontwikkeltijd; daar moet iets concreets tegenover staan.

Wat we leerden van het bouwen van een Framer-capturetool

Dardo bouwde een interne tool die een gepubliceerde Framer-pagina vastlegt, voor een site die van jou is, en er een zelfstandig referentiebestand van maakt plus een migratietracker voor Astro met één rij per onderdeel dat opnieuw gebouwd moet worden. Door die tool te bouwen, leerden we waar Framer-sites hun complexiteit verstoppen:

• Assets staan op het CDN van Framer. Afbeeldingen, fonts en code laden vanaf framerusercontent.com en verwante domeinen. Responsieve afbeeldingen vragen hetzelfde bestand op in meerdere breedtes (?width=512, ?width=1024), dus de capture bewaart per afbeelding één lokaal bestand: het grootste.
• De JavaScript komt in lagen. Framer laadt kleine modules die alleen de echte bundle opnieuw exporteren, dus één doorloop mist code. De tool blijft opnieuw scannen tot er geen nieuwe module meer verschijnt.
• CMS-content is een apart bestandsformaat. Collecties uit Framer CMS worden geleverd als .framercms-bestanden die de pagina in byte ranges van het CDN ophaalt. Op een gewone statische host geven die verzoeken het hele bestand terug, en de module die de URL's ervan opbouwt, verwijst terug naar Framer.
• De runtime herschrijft de pagina na het laden. De React-runtime van Framer hydrateert de HTML en kan elementen die je hebt verwijderd opnieuw invoegen. De badge "Made in Framer" wordt bijvoorbeeld in een eigen container gehydrateerd.
• Formulieren zijn afhankelijk van Framer. De vastgelegde formulieren hebben geen HTML-action; inzendingen werken alleen via de clientruntime van Framer.
• SEO-tags verwijzen naar Framer. Tenzij ze worden herschreven, blijven canonical- en Open Graph-URL's het oorspronkelijke Framer-adres noemen.
• Beweging is data. Appear-effecten staan als JSON-payloads in de pagina, dus de tool registreert die samen met de keyframes en timing van elke lopende animatie.

Onze conclusie: de export is bewijsmateriaal, niet het eindproduct. We zetten nooit de vastgelegde HTML of de runtime van Framer live. Ze vertellen ons precies wat we opnieuw moeten bouwen.

Van Framer naar Astro, stap voor stap

1. Inventariseer elke URL. Begin bij de sitemap.xml van de site, voeg elke CMS-pagina toe en haal het rapport Pagina's uit Google Search Console op voor de langst beschikbare periode. Noteer redirects die al in Framer zijn ingesteld onder Site Settings, Hosting.
2. Exporteer wat Framer toestaat. Volgens Framer kun je CMS-content met plug-ins exporteren naar formaten als CSV of JSON (Framer Help). Download elke afbeelding en elk bestand, en controleer de licentie van elk font voordat je het zelf host.
3. Leg de gepubliceerde site vast als referentie. Registreer elke template op elk breakpoint, plus de timing van elke animatie die je wilt behouden. Onze tool legt pagina's vast op 1440, 810 en 390 pixels breed, en daarna één pixel onder, op en boven elk breakpoint dat hij in de CSS van de site vindt.
4. Bouw templates opnieuw als Astro-componenten. Verhuis CMS-collecties naar content collections of een headless CMS, afbeeldingen naar astro:assets en gelokaliseerde pagina's naar de i18n-routing van Astro, met één URL per taal.
5. Maak de beweging opnieuw die betekenis draagt. De meeste Framer-effecten worden CSS-transitions, keyframes of een klein script. Respecteer prefers-reduced-motion. Bij een van onze eigen herbouwprojecten van Framer naar Astro, een site met 18 routes die geen klantproject was, kwamen 217 van de 219 scroll- en interactiestatussen overeen met het origineel binnen een pixelverschil van 1%.
6. Geef elk formulier een echt endpoint. Laat elk formulier naar je eigen handler wijzen (een Cloudflare Worker, een formulierdienst of je CRM) en test de aflevering op staging.
7. Neem de zoekmetadata over. Titels, beschrijvingen, Open Graph-tags, gestructureerde data en een naar zichzelf verwijzende canonical op elke pagina, plus een nieuwe XML-sitemap.
8. Redirect op de server, niet in HTML. Een statische Astro-build zonder adapter maakt van geconfigureerde redirects meta-refresh-pagina's zonder HTTP-statuscode (configuratiereferentie van Astro). Stel 1:1 301-redirects in waar de site gehost wordt, bijvoorbeeld in een _redirects-bestand van Cloudflare of een Worker.
9. Lanceer en blijf daarna opletten. Zet de DNS om, bewaar het Framer-project tot de nieuwe site is gecontroleerd en volg de indexerings- en paginarapporten van Search Console de weken erna. Onze SEO-checklist voor website-migratie behandelt de lanceerdag en de 90 dagen erna.

Wat er verandert na de overstap

SEO behouden

De richtlijnen van Google voor siteverhuizingen met URL-wijzigingen gelden hier ook: koppel elke oude URL aan het meest vergelijkbare nieuwe adres, gebruik permanente serverside redirects en houd ze minstens een jaar aan. Blijven de URL's identiek, wat bij een zorgvuldige herbouw vaak lukt, dan hoef je alleen te controleren of de nieuwe pagina's dezelfde content en metadata hebben.

De valkuil die specifiek is voor Framer, is het achtergebleven Framer-adres. Zorg dat geen canonical, sitemapregel of Open Graph-tag nog de oude Framer-URL noemt, en dat het Framer-project offline is gehaald of wordt doorgestuurd zodra de nieuwe site live staat.

Zo pakt Dardo een Framer-migratie aan

We voeren Framer-verhuizingen uit als onderdeel van onze dienst websitemigratie: inventarisatie, capture, eerst één representatieve pagina die opnieuw wordt gebouwd en op afgesproken breedtes wordt beoordeeld, daarna de rest van de templates, formulieren en redirects. De bouw zelf is webontwikkeling in Astro, en het bewegingswerk valt onder creative development. Deze site, dardo.studio, draait op Astro op Cloudflare Workers met de content in een headless CMS, de opzet die we het vaakst gebruiken.

Overweeg je een overstap? Stuur ons de site en wat je wilt veranderen. We vertellen je of een herbouw de moeite waard is voordat we er een offerte voor maken.