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

Die kurze Antwort

Von Webflow kommen Sie leichter los als von Framer, das überhaupt keinen HTML-Export hat, aber nur zum Teil. Mit einem kostenpflichtigen Workspace-Tarif können Sie HTML, CSS, JavaScript und Bilder Ihrer Website exportieren und überall hosten. Ebenso deutlich sagt Webflows Hilfecenter, was zurückbleibt: CMS-Inhalte, Formularverarbeitung, die Website-Suche, der Passwortschutz, lokalisierte Seiten und Code Components sind nicht im Export enthalten, und Collection Lists zeigen ihren leeren Zustand (Webflow Help).

Der Umzug von Webflow zu Astro ist deshalb teils Export, teils Neuaufbau. Sie exportieren, was Webflow Ihnen gibt, holen das CMS als CSV oder über die API heraus, bauen jedes Template als Astro-Komponenten neu, ersetzen Formulare und Suche, setzen die Interaktionen neu um, die Sie behalten möchten, und geben jeder URL, die sich ändert, eine permanente Weiterleitung. In dieser Reihenfolge behält die neue Website ihr Design, ihre Inhalte und ihre Rankings.

Warum Teams von Webflow zu Astro wechseln

Webflow ist ein starker visueller Website-Builder, und viele Marketingteams sollten dabei bleiben. Die Gründe für einen Wechsel haben meist mit Eigentum und Kosten zu tun, nicht mit dem Design:

• Die Website geht in die Verantwortung der Entwicklung über. Wenn Entwickler die meisten Änderungen vornehmen, arbeitet es sich in einer Codebasis im eigenen Repository schneller als auf einer visuellen Arbeitsfläche, und sie kann neben Ihrem Produkt, Ihrem Backend und Ihren Tests liegen.
• Tarifkosten pro Website. Laut Webflows Preisseite, abgerufen am 13. Oktober 2026, kostet der Site-Tarif Basic 15 USD im Monat und Premium, der Tarif mit dem Webflow CMS, 25 USD im Monat, beide bei jährlicher Abrechnung. Lokalisierung ist ein Add-on ab 9 USD im Monat.
• Funktionen, die ein echtes Backend brauchen: Formulare, die in Ihr CRM schreiben, geschützte Inhalte, eine Suche über mehr als eine Website oder alles, was auf Ihrer eigenen Infrastruktur laufen muss.
• Der Export allein bringt Sie nicht hinaus. Der Code-Export setzt einen kostenpflichtigen Workspace-Tarif voraus, nicht nur einen Site-Tarif, und er lässt das CMS weg. Ein sauberer Ausstieg braucht so oder so Planung.

Wenn Ihr Marketingteam jede Woche visuell Seiten veröffentlicht und die Website ihren Zweck erfüllt, ist es eine vernünftige Entscheidung, bei Webflow zu bleiben. Eine Migration sollte Ihnen etwas Konkretes bringen.

Was Webflows Code-Export enthält und was nicht

Quelle: Webflows Hilfeartikel zum Exportieren des Website-Codes.

Was wir bei der Analyse veröffentlichter Webflow-Websites gesehen haben

Am 13. Oktober 2026 haben wir die Startseiten von sieben mit Webflow gebauten Websites heruntergeladen, darunter webflow.com selbst, und geprüft, was eine Migration übernehmen müsste:

• Alle sieben laden jQuery und ihre Bilder von Webflows Servern. Die Bilder kommen von cdn.prod.website-files.com, und Webflows eigenes Hilfecenter weist darauf hin, dass als CSV exportierte Bild- und Dateifelder Links auf das Hosting des ursprünglichen Projekts sind, die nicht mehr funktionieren, wenn dieses Projekt gelöscht wird (Webflow Help). Jedes Asset muss heruntergeladen und neu gehostet werden.
• Alle sieben liefern auch ihr Social-Share-Bild über Webflow aus. Das Open-Graph-Bild wird leicht vergessen, und Linkvorschauen auf LinkedIn oder WhatsApp verlieren ihr Bild, sobald das alte Projekt geschlossen ist.
• Alle sieben rendern ihre CMS-Listen direkt im veröffentlichten HTML, zwischen 3 und 19 Collection Lists pro Startseite. Das ist eine gute Nachricht: Anders als eine Framer-Website, die nach dem Laden von einer Runtime neu aufgebaut wird, wie unser Leitfaden zur Migration von Framer zu Astro zeigt, ist eine veröffentlichte Webflow-Seite eine vollständige Referenz dafür, welcher Inhalt wohin gehört, auch wenn der Code-Export diese Listen leer lässt.
• Fünf der sieben nutzen Webflow Interactions, erkennbar an data-w-id-Attributen auf bis zu 109 Elementen einer einzigen Startseite. Jede davon ist ein kleines Stück Verhalten, das neu umgesetzt werden muss, oder eine Entscheidung, darauf zu verzichten.

Von Webflow zu Astro migrieren, Schritt für Schritt

1. Jede URL erfassen. Webflow erzeugt die /sitemap.xml automatisch, wenn diese Option aktiviert ist (Webflow Help). Ergänzen Sie jede Collection-Seite, exportieren Sie den Bericht „Seiten“ der Google Search Console für den längsten verfügbaren Zeitraum und exportieren Sie Ihre bestehenden 301-Weiterleitungen als CSV unter Site settings, Publishing (Webflow Help).
2. Die Inhalte exportieren. Exportieren Sie jede CMS-Collection im CMS-Panel als CSV, bei Nutzung von Localize einmal pro Sprache, und behalten Sie die Spalte Item ID. Die CSV-Datei macht alles flach: Referenzfelder werden zu reinem Text, Mehrfachreferenzen zu kommagetrenntem Text und Rich Text zu HTML. Für alles mit Referenzen listet die Webflow Data API die Items mit ihren Feldern und Sprachen auf, was meist sauberer ist, als CSV-Dateien wieder zusammenzusetzen.
3. Jedes Asset herunterladen. Bilder, PDFs, Schriften, die Sie laut Lizenz selbst hosten dürfen, die Open-Graph-Bilder und das Favicon. Schließen Sie das Webflow-Projekt erst, wenn die neue Website nicht mehr auf website-files.com verweist.
4. Den Code als Referenz exportieren. Wenn Sie einen kostenpflichtigen Workspace-Tarif haben, exportieren Sie HTML und CSS. Stellen Sie den Export nicht als neue Website online: Er würde webflow.js, jQuery und leere CMS-Listen mitbringen. Nutzen Sie ihn, um exakte Abstände, Breakpoints und die Klassenstruktur abzulesen.
5. Die Inhalte in Astro modellieren. Machen Sie aus jeder Collection eine Content Collection in Astro oder ein Modell in einem Headless CMS, wobei Referenzen Referenzen bleiben. Bauen Sie dann jedes Template als Astro-Komponenten neu und überführen Sie die Bilder in astro:assets.
6. Die Interaktionen neu umsetzen, die eine Bedeutung tragen. Die meisten Webflow Interactions werden zu CSS-Transitions, Keyframes oder ein paar Zeilen JavaScript. Für aufwendigere Animationen ist GSAP auch für die kommerzielle Nutzung kostenlos, seit Webflow es im April 2025 freigegeben hat (Webflow). Berücksichtigen Sie in jedem Fall prefers-reduced-motion.
7. Formulare, Suche und geschützte Seiten ersetzen. Geben Sie jedem Formular einen echten Endpunkt (einen Cloudflare Worker, einen Formulardienst oder Ihr CRM), ergänzen Sie einen statischen Suchindex wie Pagefind, wenn die Website eine Suche braucht, und verlagern Sie jeden Passwortschutz zu Ihrem Hoster oder in Ihre App.
8. Lokalisierte Seiten sauber neu bauen. Der Code-Export enthält nur die Hauptsprache. Bauen Sie deshalb jede Sprache mit Astros i18n-Routing auf, mit einer URL pro Sprache und hreflang-Verweisen zwischen ihnen.
9. Das URL-Format beibehalten. Webflow liefert Seiten ohne abschließenden Slash aus und leitet /pricing/ auf /pricing weiter. Stellen Sie trailingSlash und build.format in Astro so ein, dass die neue Website dieselben Adressen erzeugt (Astro-Konfigurationsreferenz); jede Abweichung ist eine Weiterleitung, die Sie nicht gebraucht hätten.
10. Auf dem Server weiterleiten, dann launchen und beobachten. Ein statischer Astro-Build ohne Adapter macht aus konfigurierten Weiterleitungen Meta-Refresh-Seiten. Richten Sie deshalb 1:1-Weiterleitungen per 301 dort ein, wo die Website gehostet wird, zum Beispiel in einer _redirects-Datei bei Cloudflare. Stellen Sie das DNS um, behalten Sie das Webflow-Projekt, bis die neue Website geprüft ist, und verfolgen Sie in den folgenden Wochen die Indexierungsberichte 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 bei Webflow oft erreicht, müssen Sie vor allem prüfen, ob Titel, Beschreibungen, Canonical-Tags, strukturierte Daten und Open-Graph-Bilder vollständig übernommen wurden.

Die Webflow-typischen Fallen sind Überbleibsel: ein Open-Graph-Bild oder ein PDF, das noch von website-files.com ausgeliefert wird, eine noch indexierte Staging-Adresse unter webflow.io oder eine CMS-Seite, deren Slug sich beim Umzug geändert hat. Prüfen Sie alle drei, bevor Sie das Webflow-Projekt schließen.

Wie Dardo eine Webflow-Migration umsetzt

Webflow-Umzüge setzen wir im Rahmen unserer Leistung Website-Migration um: Bestandsaufnahme von URLs und Inhalten, CMS-Export, 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, und über dieses CMS schreiben und veröffentlichen wir auch diesen Blog.

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