Migracja z Webflow do Astro: jak przenieść stronę bez utraty treści, designu i pozycji w Google

Krótka odpowiedź

Z Webflow łatwiej odejść niż z Framera, który w ogóle nie eksportuje HTML, ale tylko do pewnego stopnia. W płatnych planach Workspace możesz wyeksportować HTML, CSS, JavaScript i obrazy strony, a potem hostować je gdziekolwiek. Centrum pomocy Webflow równie jasno mówi, co zostaje w środku: treści z CMS, obsługa formularzy, wyszukiwarka na stronie, ochrona hasłem, wersje językowe i code components nie trafiają do eksportu, a Collection lists pokazują stan pusty (Webflow Help).

Dlatego migracja z Webflow do Astro to po części eksport, a po części przebudowa. Eksportujesz to, co daje Webflow, wyciągasz treści z CMS jako CSV albo przez API, odbudowujesz każdy szablon jako komponenty Astro, zastępujesz formularze i wyszukiwarkę, odtwarzasz interakcje, które chcesz zachować, i dajesz każdemu zmienionemu adresowi URL stałe przekierowanie. W tej kolejności nowa strona zachowuje design, treści i pozycje w Google.

Dlaczego firmy przechodzą z Webflow na Astro

Webflow to mocny kreator wizualny i wiele zespołów marketingu powinno na nim zostać. Powody, by odejść, dotyczą zwykle własności i kosztów, a nie designu:

• Stroną zaczynają zarządzać programiści. Gdy większość zmian wprowadza zespół techniczny, kod we własnym repozytorium jest wygodniejszy w pracy niż wizualne płótno i może leżeć obok Twojego produktu, backendu i testów.
• Koszt planu za każdą stronę. Według cennika Webflow, sprawdzonego 13 października 2026 r., plan Basic dla jednej strony kosztuje 15 USD miesięcznie, a Premium, czyli plan z Webflow CMS, 25 USD miesięcznie, w obu przypadkach przy rozliczeniu rocznym. Lokalizacja to dodatek od 9 USD miesięcznie.
• Funkcje, które wymagają prawdziwego backendu: formularze zapisujące dane w Twoim CRM, treści dostępne po zalogowaniu, wyszukiwanie w więcej niż jednej witrynie albo wszystko, co musi działać na Twojej własnej infrastrukturze.
• Sam eksport nie wystarczy, żeby odejść. Eksport kodu wymaga płatnego planu Workspace, a nie tylko planu strony, i pomija CMS. Czyste wyjście i tak trzeba zaplanować.

Jeśli Twój zespół marketingu co tydzień publikuje strony w edytorze wizualnym, a strona spełnia swoje zadanie, pozostanie na Webflow jest rozsądnym wyborem. Migracja powinna dawać coś konkretnego.

Co obejmuje eksport kodu z Webflow, a co pomija

Źródło: artykuł w centrum pomocy Webflow o eksporcie kodu strony.

Co zobaczyliśmy, analizując opublikowane strony na Webflow

13 października 2026 r. pobraliśmy strony główne siedmiu witryn zbudowanych w Webflow, w tym samej webflow.com, i sprawdziliśmy, co musiałaby przenieść migracja:

• Wszystkie siedem witryn ładuje jQuery i obrazy z serwerów Webflow. Obrazy pochodzą z cdn.prod.website-files.com, a samo centrum pomocy Webflow zaznacza, że pola obrazów i plików wyeksportowane do CSV to linki do hostingu pierwotnego projektu, które przestają działać, gdy ten projekt zostanie usunięty (Webflow Help). Każdy zasób trzeba pobrać i hostować na nowo.
• Wszystkie siedem serwuje z Webflow także obraz do udostępniania w mediach społecznościowych. O obrazie Open Graph łatwo zapomnieć, a podglądy linków na LinkedInie czy w WhatsAppie tracą obraz, gdy stary projekt zostanie zamknięty.
• Wszystkie siedem renderuje listy z CMS bezpośrednio w opublikowanym HTML, od 3 do 19 Collection lists na stronę główną. To dobra wiadomość. Stronę na Framerze, jak pokazujemy w przewodniku migracji z Framera do Astro, runtime odbudowuje dopiero po załadowaniu. Opublikowana strona na Webflow jest za to pełnym punktem odniesienia: widać na niej, jaka treść trafia w które miejsce, choć eksport kodu zostawia te listy puste.
• Pięć z siedmiu korzysta z Webflow Interactions, oznaczonych atrybutami data-w-id, na jednej ze stron głównych aż na 109 elementach. Każda interakcja to mały fragment zachowania do odtworzenia albo decyzja, by z niego zrezygnować.

Migracja z Webflow do Astro krok po kroku

1. Spisz każdy adres URL. Webflow automatycznie generuje plik /sitemap.xml, gdy ta opcja jest włączona (Webflow Help). Dodaj każdą podstronę kolekcji (Collection page), pobierz raport Strony z Google Search Console dla najdłuższego dostępnego zakresu dat i wyeksportuj istniejące przekierowania 301 do CSV w Site settings, Publishing (Webflow Help).
2. Wyeksportuj treści. Wyeksportuj każdą kolekcję CMS do CSV z panelu CMS, osobno dla każdego języka, jeśli korzystasz z Localize, i zachowaj kolumnę Item ID. CSV spłaszcza dane: pola referencji trafiają do niego jako zwykły tekst, multi-referencje jako tekst rozdzielony przecinkami, a rich text jako HTML. Przy wszystkim, co zawiera referencje, Webflow Data API zwraca elementy razem z ich polami i wersjami językowymi, co zwykle jest czystszym rozwiązaniem niż ponowne sklejanie plików CSV.
3. Pobierz każdy zasób. Obrazy, pliki PDF, fonty, których licencja pozwala na samodzielny hosting, obrazy Open Graph i favicon. Nie zamykaj projektu w Webflow, dopóki nowa strona nie przestanie odwoływać się do website-files.com.
4. Wyeksportuj kod jako punkt odniesienia. Jeśli masz płatny plan Workspace, wyeksportuj HTML i CSS. Nie wdrażaj go jako nowej strony: zawierałby webflow.js, jQuery i puste listy CMS. Użyj go, by odczytać dokładne odstępy, breakpointy i strukturę klas.
5. Zamodeluj treści w Astro. Zamień każdą kolekcję w content collection Astro albo w model w headless CMS, zachowując referencje jako referencje, a następnie odbuduj każdy szablon jako komponenty Astro i przenieś obrazy do astro:assets.
6. Odtwórz interakcje, które niosą znaczenie. Większość Webflow Interactions staje się przejściami CSS, animacjami keyframes albo kilkoma linijkami JavaScriptu. Przy cięższych animacjach możesz sięgnąć po GSAP, który jest darmowy do użytku komercyjnego od kwietnia 2025 r., kiedy udostępnił go tak Webflow (Webflow). W każdym przypadku respektuj prefers-reduced-motion.
7. Zastąp formularze, wyszukiwarkę i strony chronione hasłem. Daj każdemu formularzowi prawdziwy endpoint (Cloudflare Worker, usługa obsługi formularzy albo Twój CRM), dodaj statyczny indeks wyszukiwania, na przykład Pagefind, jeśli strona potrzebuje wyszukiwarki, i przenieś ochronę hasłem do hostingu albo aplikacji.
8. Porządnie odbuduj wersje językowe. Eksport kodu zawiera tylko język główny, więc zbuduj każdy język z routingiem i18n w Astro, z jednym adresem URL na język i tagami hreflang między wersjami.
9. Dopasuj format adresów URL. Webflow serwuje strony bez końcowego ukośnika i przekierowuje /pricing/ na /pricing. Ustaw w Astro opcje trailingSlash i build.format tak, by nowa strona generowała te same adresy (opis konfiguracji Astro); każda niezgodność oznacza zbędne przekierowanie.
10. Przekierowuj na serwerze, potem uruchom stronę i obserwuj. Statyczny build Astro bez adaptera zamienia skonfigurowane przekierowania w strony meta refresh, więc ustaw przekierowania 301 jeden do jednego tam, gdzie strona jest hostowana, na przykład w pliku _redirects w Cloudflare. Przełącz DNS, zachowaj projekt w Webflow, dopóki nowa strona nie zostanie sprawdzona, i śledź raporty indeksowania w Search Console przez kolejne tygodnie. Nasza checklista SEO przy migracji strony obejmuje dzień startu i 90 dni po nim.

Co zmienia się po przeprowadzce

Jak zachować SEO

Wytyczne Google dotyczące przenoszenia witryny ze zmianą adresów URL mają tu pełne zastosowanie: przypisz każdy stary adres URL do najbliższego nowego odpowiednika, użyj stałych przekierowań po stronie serwera i utrzymuj je co najmniej przez rok. Jeśli adresy URL pozostają identyczne, co przy starannej przebudowie z Webflow często się udaje, wystarczy w zasadzie sprawdzić, czy tytuły, opisy, tagi canonical, dane strukturalne i obrazy Open Graph zostały przeniesione.

Pułapki typowe dla Webflow to pozostałości: obraz Open Graph albo plik PDF nadal serwowany z website-files.com, testowy adres na webflow.io, który wciąż jest zaindeksowany, albo podstrona z CMS, której slug zmienił się podczas przeprowadzki. Sprawdź wszystkie trzy rzeczy, zanim zamkniesz projekt w Webflow.

Jak Dardo przeprowadza migrację z Webflow

Przeprowadzki z Webflow realizujemy w ramach usługi migracji strony internetowej: inwentaryzacja adresów URL i treści, eksport CMS, najpierw jedna reprezentatywna strona odbudowana i sprawdzona w uzgodnionych szerokościach ekranu, a potem pozostałe szablony, formularze i przekierowania. Sama budowa to tworzenie stron internetowych w Astro, a animacje to kreatywny development. Ta strona, dardo.studio, działa na Astro w Cloudflare Workers, a jej treści są w headless CMS, przez który piszemy i publikujemy też tego bloga.

Jeśli rozważasz przeprowadzkę, wyślij nam adres strony i napisz, co chcesz zmienić. Zanim przygotujemy wycenę, powiemy, czy odejście z Webflow ma sens.