Migracja z Framera do Astro: jak przenieść stronę bez utraty designu i pozycji w Google

Krótka odpowiedź

Centrum pomocy Framera mówi wprost, że Framer nie oferuje eksportu HTML do samodzielnego hostingu (Framer Help). Dlatego migracja z Framera do Astro to przebudowa, a nie eksport. Zapisujesz opublikowaną stronę jako punkt odniesienia, odtwarzasz każdy szablon jako komponenty Astro, przenosisz treści z CMS do kolekcji, odtwarzasz animacje, których naprawdę potrzebujesz, i dajesz każdemu zmienionemu adresowi URL stałe przekierowanie.

W tej kolejności nowa strona może wyglądać tak samo, ładować mniej JavaScriptu i zachować pozycje w Google. Jeśli pominiesz zapis strony albo mapę przekierowań, skończysz z redesignem, o który nikt nie prosił, i spadkiem ruchu z wyszukiwarki.

Dlaczego firmy odchodzą z Framera

Framer to dobre narzędzie do szybkiego projektowania i publikowania stron marketingowych. Powody, by z niego odejść, są zwykle praktyczne, a nie estetyczne:

• Hosting i własność. Strona na Framerze działa na serwerach Framera. Zespoły, które chcą mieć kod we własnym repozytorium, na własnym hostingu albo obok własnego backendu, potrzebują przebudowy.
• Koszt planu za każdą stronę. Według cennika Framera, sprawdzonego 12 października 2026 r., plan Basic kosztuje 10 USD miesięcznie, a plan Pro, który dodaje przekierowania, 30 USD miesięcznie, w obu przypadkach przy rozliczeniu rocznym. Lokalizacja to płatny dodatek.
• Ograniczenia przekierowań. Przekierowania we Framerze działają tylko dla ścieżek w obrębie tej samej domeny (Framer Help).
• Formularze, dane i integracje, które wymagają prawdziwego backendu: CRM, system rezerwacji, treści dostępne po zalogowaniu albo wszystko, co musi działać na Twojej własnej infrastrukturze.

Jeśli Twój zespół marketingu co tydzień buduje i edytuje strony wizualnie, a strona spełnia swoje zadanie, pozostanie na Framerze może być dobrą decyzją. Migracja kosztuje czas projektantów i programistów, więc powinna dawać coś konkretnego.

Czego nauczyło nas budowanie narzędzia do zapisu stron z Framera

Dardo zbudowało wewnętrzne narzędzie, które zapisuje opublikowaną stronę z Framera (witrynę, której jesteś właścicielem) i zamienia ją w samodzielny plik referencyjny oraz tracker migracji do Astro z jednym wierszem na każdy element do odbudowania. Przy jego budowie zobaczyliśmy, gdzie strony na Framerze ukrywają swoją złożoność:

• Zasoby są na CDN Framera. Obrazy, fonty i kod ładują się z framerusercontent.com i powiązanych domen. Obrazy responsywne pobierają ten sam plik w kilku szerokościach (?width=512, ?width=1024), więc narzędzie zachowuje jeden lokalny plik na obraz, ten największy.
• JavaScript przychodzi warstwami. Framer ładuje małe moduły, które jedynie reeksportują właściwy bundle, więc jedno przejście pomija część kodu. Narzędzie skanuje stronę ponownie, dopóki nie pojawi się żaden nowy moduł.
• Treści z CMS to osobny format plików. Kolekcje CMS Framera są dostarczane jako pliki .framercms, które strona pobiera z CDN fragmentami (byte ranges). Na zwykłym hostingu statycznym te żądania zwracają cały plik, a moduł, który buduje ich adresy URL, wskazuje z powrotem na Framera.
• Runtime przepisuje stronę po załadowaniu. Reactowy runtime Framera hydratuje HTML i może ponownie wstawić usunięte elementy. Na przykład plakietka „Made in Framer” jest hydratowana we własnym kontenerze.
• Formularze zależą od Framera. Zapisane formularze nie mają w HTML atrybutu action; zgłoszenia działają wyłącznie przez runtime Framera po stronie klienta.
• Tagi SEO wskazują na Framera. Jeśli ich nie przepiszesz, adresy canonical i Open Graph nadal będą wskazywać pierwotny adres na Framerze.
• Animacje to dane. Efekty pojawiania się (appear effects) są zapisane w stronie jako dane JSON, dlatego narzędzie zapisuje je razem z klatkami kluczowymi i czasem trwania każdej uruchomionej animacji.

Wniosek, jaki z tego wyciągnęliśmy: eksport jest materiałem dowodowym, a nie produktem końcowym. Nigdy nie wdrażamy zapisanego HTML-a ani runtime'u Framera. Pokazują nam za to dokładnie, co trzeba odbudować.

Migracja z Framera do Astro krok po kroku

1. Spisz każdy adres URL. Zacznij od pliku sitemap.xml strony, dodaj każdą podstronę z CMS i pobierz raport Strony z Google Search Console dla najdłuższego dostępnego zakresu dat. Zanotuj przekierowania ustawione już we Framerze w Site Settings, Hosting.
2. Wyeksportuj to, na co pozwala Framer. Framer podaje, że treści z CMS można wyeksportować za pomocą wtyczek do formatów takich jak CSV czy JSON (Framer Help). Pobierz każdy obraz i plik oraz sprawdź licencję każdego fontu, zanim zaczniesz hostować go samodzielnie.
3. Zapisz opublikowaną stronę jako punkt odniesienia. Zarejestruj każdy szablon w każdym breakpoincie oraz czas trwania każdej animacji, którą chcesz zachować. Nasze narzędzie zapisuje strony przy szerokości 1440, 810 i 390 pikseli, a potem przy każdym breakpoincie znalezionym w CSS strony: piksel poniżej, dokładnie w nim i piksel powyżej.
4. Odbuduj szablony jako komponenty Astro. Przenieś kolekcje CMS do content collections albo do headless CMS, obrazy do astro:assets, a wersje językowe do routingu i18n w Astro, z jednym adresem URL na każdy język.
5. Odtwórz animacje, które niosą znaczenie. Większość efektów z Framera staje się przejściami CSS, animacjami keyframes albo krótkim skryptem. Respektuj prefers-reduced-motion. W jednej z naszych własnych przebudów z Framera do Astro, 18-podstronowej witryny, która nie była projektem dla klienta, 217 z 219 stanów przewijania i interakcji zgadzało się z oryginałem w granicach 1% różnicy pikseli.
6. Daj każdemu formularzowi prawdziwy endpoint. Podłącz każdy formularz do własnego handlera (Cloudflare Worker, usługa obsługi formularzy albo Twój CRM) i przetestuj dostarczanie zgłoszeń na środowisku testowym.
7. Przenieś metadane dla wyszukiwarek. Tytuły, opisy, tagi Open Graph, dane strukturalne i samoodwołujący się tag canonical na każdej podstronie oraz nowa mapa witryny XML.
8. Przekierowuj na serwerze, nie w HTML. Statyczny build Astro bez adaptera zamienia skonfigurowane przekierowania w strony meta refresh, które nie mają kodu statusu HTTP (opis konfiguracji Astro). Ustaw przekierowania 301 jeden do jednego tam, gdzie strona jest hostowana, na przykład w pliku _redirects w Cloudflare albo w Workerze.
9. Uruchom, a potem obserwuj. Przełącz DNS, zachowaj projekt we Framerze, dopóki nowa strona nie zostanie sprawdzona, i śledź raporty indeksowania i Strony 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

Poradnik Google o przenoszeniu witryny ze zmianą adresów URL ma tu pełne zastosowanie: przypisz każdy stary adres URL do najbliższego nowego odpowiednika, używaj stałych przekierowań po stronie serwera i utrzymuj je co najmniej przez rok. Jeśli adresy URL pozostaną identyczne, co przy starannej przebudowie często się udaje, wystarczy sprawdzić, czy nowe podstrony mają tę samą treść i metadane.

Pułapka typowa dla Framera to pozostawiony stary adres na Framerze. Upewnij się, że żaden tag canonical, wpis w mapie witryny ani tag Open Graph nie wskazuje już starego adresu URL na Framerze, a projekt we Framerze zostanie wycofany z publikacji lub przekierowany, gdy nowa strona zacznie działać.

Jak Dardo prowadzi migrację z Framera

Przeprowadzki z Framera realizujemy w ramach usługi migracji strony internetowej: inwentaryzacja, zapis strony, najpierw jedna reprezentatywna podstrona odbudowana i sprawdzona w uzgodnionych szerokościach, potem pozostałe szablony, formularze i przekierowania. Sama budowa to tworzenie stron internetowych w Astro, a praca nad animacjami to kreatywny development. Ta strona, dardo.studio, działa na Astro na Cloudflare Workers, a jej treści są w headless CMS. To konfiguracja, której używamy najczęściej.

Jeśli rozważasz przeprowadzkę, wyślij nam adres strony i napisz, co chcesz zmienić. Zanim przygotujemy wycenę, powiemy, czy przebudowa się opłaca.