Von Framer zu Astro migrieren: eine Framer-Website umziehen, ohne Design oder Rankings zu verlieren

Die kurze Antwort

Framers eigenes Hilfecenter stellt klar, dass Framer keinen HTML-Export zum Selbsthosten anbietet (Framer Help). Der Wechsel von Framer zu Astro ist deshalb kein Export, sondern ein Neuaufbau. Sie erfassen die veröffentlichte Website als Referenz, bauen jedes Template als Astro-Komponente neu, überführen die CMS-Inhalte in Collections, setzen die Animationen neu um, die Sie wirklich brauchen, und geben jeder URL, die sich ändert, eine permanente Weiterleitung.

In dieser Reihenfolge umgesetzt, kann die neue Website genauso aussehen, weniger JavaScript laden und ihre Rankings behalten. Wer die Erfassung oder die Weiterleitungstabelle überspringt, bekommt ein Redesign, das niemand bestellt hat, und einen Einbruch beim Suchmaschinen-Traffic.

Warum Teams Framer verlassen

Framer ist ein gutes Werkzeug, um Marketing-Websites schnell zu gestalten und zu veröffentlichen. Die Gründe für einen Wechsel sind meist praktischer, nicht ästhetischer Natur:

• Hosting und Eigentum. Eine Framer-Website läuft auf Framers Servern. Teams, die den Code im eigenen Repository, bei ihrem eigenen Hoster oder neben ihrem eigenen Backend haben wollen, brauchen einen Neuaufbau.
• Tarifkosten pro Website. Laut Framers Preisseite, abgerufen am 12. Oktober 2026, kostet der Basic-Tarif 10 USD im Monat und der Pro-Tarif, der Weiterleitungen hinzufügt, 30 USD im Monat, beide bei jährlicher Abrechnung. Lokalisierung ist ein kostenpflichtiges Add-on.
• Begrenzte Weiterleitungen. Framer-Weiterleitungen funktionieren nur für Pfade innerhalb derselben Domain (Framer Help).
• Formulare, Daten und Integrationen, die ein echtes Backend brauchen: ein CRM, ein Buchungssystem, geschützte Inhalte oder alles, was auf Ihrer eigenen Infrastruktur laufen muss.

Wenn Ihr Marketingteam jede Woche Seiten visuell baut und bearbeitet und die Website ihren Zweck erfüllt, kann es die richtige Entscheidung sein, bei Framer zu bleiben. Eine Migration kostet Design- und Entwicklungszeit; sie sollte Ihnen etwas Konkretes bringen.

Was wir beim Bau eines Framer-Capture-Tools gelernt haben

Dardo hat ein internes Tool entwickelt, das eine veröffentlichte Framer-Seite einer Website erfasst, die Ihnen gehört, und daraus eine eigenständige Referenzdatei macht, dazu einen Tracker für die Astro-Migration mit einer Zeile pro Element, das neu gebaut werden muss. Beim Bau haben wir gelernt, wo Framer-Websites ihre Komplexität verstecken:

• Assets liegen auf Framers CDN. Bilder, Schriften und Code werden von framerusercontent.com und verwandten Domains geladen. Responsive Bilder fordern dieselbe Datei in mehreren Breiten an (?width=512, ?width=1024), deshalb behält die Erfassung pro Bild eine einzige lokale Datei, die größte.
• Das JavaScript kommt in Schichten. Framer lädt kleine Module, die nur das eigentliche Bundle re-exportieren, sodass ein einzelner Durchlauf Code übersieht. Das Tool scannt so lange erneut, bis kein neues Modul mehr auftaucht.
• CMS-Inhalte sind ein eigenes Dateiformat. Framer-CMS-Collections werden als .framercms-Dateien ausgeliefert, die die Seite in Byte-Bereichen vom CDN abruft. Auf einem gewöhnlichen statischen Hosting liefern diese Anfragen die ganze Datei zurück, und das Modul, das ihre URLs zusammensetzt, verweist zurück auf Framer.
• Die Runtime schreibt die Seite nach dem Laden um. Framers React-Runtime hydriert das HTML und kann Elemente wieder einfügen, die Sie entfernt haben. Das „Made in Framer“-Badge zum Beispiel wird in einen eigenen Container hydriert.
• Formulare hängen von Framer ab. Die erfassten Formulare haben keine HTML-Action; Einsendungen funktionieren nur über Framers Client-Runtime.
• SEO-Tags verweisen auf Framer. Ohne Anpassung werben Canonical- und Open-Graph-URLs weiter für die ursprüngliche Framer-Adresse.
• Animationen sind Daten. Einblendeffekte sind als JSON-Payloads in der Seite gespeichert. Das Tool zeichnet sie deshalb zusammen mit den Keyframes und dem Timing jeder laufenden Animation auf.

Unser Fazit: Der Export ist Beweismaterial, nicht das Ergebnis. Wir liefern nie das erfasste HTML oder Framers Runtime aus. Beides zeigt uns genau, was wir neu bauen müssen.

Von Framer zu Astro migrieren, Schritt für Schritt

1. Jede URL erfassen. Beginnen Sie mit der sitemap.xml der Website, ergänzen Sie jede CMS-Seite und exportieren Sie den Bericht „Seiten“ der Google Search Console für den längsten verfügbaren Zeitraum. Notieren Sie alle Weiterleitungen, die bereits in Framer unter Site Settings, Hosting eingerichtet sind.
2. Exportieren, was Framer erlaubt. Laut Framer lassen sich CMS-Inhalte mit Plugins in Formate wie CSV oder JSON exportieren (Framer Help). Laden Sie jedes Bild und jede Datei herunter und prüfen Sie die Lizenz jeder Schrift, bevor Sie sie selbst hosten.
3. Die veröffentlichte Website als Referenz erfassen. Halten Sie jedes Template an jedem Breakpoint fest, dazu das Timing jeder Animation, die Sie behalten möchten. Unser Tool erfasst Seiten in 1440, 810 und 390 Pixeln Breite, dann jeweils ein Pixel unter, genau auf und über jedem Breakpoint, den es im CSS der Website findet.
4. Templates als Astro-Komponenten neu bauen. Überführen Sie CMS-Collections in Content Collections oder ein Headless CMS, Bilder in astro:assets und lokalisierte Seiten in Astros i18n-Routing, mit einer URL pro Sprache.
5. Die Animationen neu umsetzen, die eine Bedeutung tragen. Die meisten Framer-Effekte werden zu CSS-Transitions, Keyframes oder einem kleinen Skript. Berücksichtigen Sie prefers-reduced-motion. Bei einem unserer eigenen Neuaufbauten von Framer zu Astro, einer Website mit 18 Routen, die kein Kundenprojekt war, stimmten 217 von 219 Scroll- und Interaktionszuständen mit höchstens 1 % Pixelabweichung mit dem Original überein.
6. Jedem Formular einen echten Endpunkt geben. Verbinden Sie jedes Formular mit Ihrem eigenen Handler (einem Cloudflare Worker, einem Formulardienst oder Ihrem CRM) und testen Sie die Zustellung auf der Staging-Umgebung.
7. Suchmetadaten übernehmen. Titel, Beschreibungen, Open-Graph-Tags, strukturierte Daten und ein selbstreferenzierendes Canonical auf jeder Seite, dazu eine neue XML-Sitemap.
8. Auf dem Server weiterleiten, nicht im HTML. Ein statischer Astro-Build ohne Adapter macht aus konfigurierten Weiterleitungen Meta-Refresh-Seiten ohne HTTP-Statuscode (Astro-Konfigurationsreferenz). Richten Sie 1:1-Weiterleitungen per 301 dort ein, wo die Website gehostet wird, zum Beispiel in einer _redirects-Datei bei Cloudflare oder in einem Worker.
9. Launchen, dann beobachten. Stellen Sie das DNS um, behalten Sie das Framer-Projekt, bis die neue Website geprüft ist, und verfolgen Sie in den folgenden Wochen die Berichte zur Indexierung und zu den Seiten in der Search Console. Unsere SEO-Checkliste für den Website-Relaunch deckt den Launch-Tag und die 90 Tage danach ab.

Was sich nach dem Umzug ändert

SEO erhalten

Googles Leitfaden zu Website-Umzügen mit URL-Änderungen gilt auch hier: Ordnen Sie jede alte URL ihrer nächstliegenden neuen Entsprechung zu, verwenden Sie permanente serverseitige Weiterleitungen und behalten Sie sie mindestens ein Jahr bei. Bleiben die URLs identisch, was ein sorgfältiger Neuaufbau oft erreicht, müssen Sie nur prüfen, ob die neuen Seiten dieselben Inhalte und Metadaten tragen.

Die Framer-typische Falle ist die übrig gebliebene Framer-Adresse. Stellen Sie sicher, dass kein Canonical, kein Sitemap-Eintrag und kein Open-Graph-Tag noch die alte Framer-URL nennt und dass das Framer-Projekt offline genommen oder weitergeleitet ist, sobald die neue Website live ist.

Wie Dardo eine Framer-Migration umsetzt

Framer-Umzüge setzen wir im Rahmen unserer Leistung Website-Migration um: Bestandsaufnahme, Erfassung, eine repräsentative Seite, die zuerst neu gebaut und in vereinbarten Breiten abgenommen wird, danach die übrigen Templates, Formulare und Weiterleitungen. Der Bau selbst ist Webentwicklung mit Astro, die Animationsarbeit ist Creative Development. Diese Website, dardo.studio, läuft mit Astro auf Cloudflare Workers, ihre Inhalte liegen in einem Headless CMS. Das ist das Setup, das wir am häufigsten einsetzen.

Wenn Sie einen Umzug abwägen, schicken Sie uns die Website und was Sie ändern möchten. Wir sagen Ihnen, ob sich ein Neuaufbau lohnt, bevor wir ein Angebot dafür machen.