Migrera från Webflow till Astro: så flyttar du en Webflow-sajt utan att tappa innehåll, design eller ranking

Det korta svaret

Webflow är lättare att lämna än Framer, som inte har någon HTML-export alls, men exporten tar dig bara en bit på vägen. Med en betald Workspace-plan kan du exportera webbplatsens HTML, CSS, JavaScript och bilder och hosta dem var du vill. Webflows hjälpcenter är lika tydligt med vad som blir kvar: CMS-innehåll, formulärhantering, sökfunktion, lösenordsskydd, lokaliserade sidor och code components ingår inte i exporten, och Collection lists visar sitt tomma läge (Webflow Help).

Att migrera från Webflow till Astro är alltså delvis export, delvis nybygge. Du exporterar det Webflow ger dig, tar ut CMS-innehållet som CSV eller via API:et, bygger om varje mall som Astro-komponenter, ersätter formulär och sökfunktion, återskapar de interaktioner du vill behålla och ger varje URL som ändras en permanent omdirigering. Gör du det i den ordningen behåller den nya webbplatsen sin design, sitt innehåll och sin ranking.

Varför team flyttar från Webflow till Astro

Webflow är ett starkt visuellt verktyg, och många marknadsteam gör rätt i att stanna kvar. Skälen att lämna handlar oftast om ägande och kostnad snarare än design:

• Webbplatsen blir utvecklarnas ansvar. När utvecklare gör de flesta ändringarna går det snabbare att arbeta i en kodbas i ditt eget repository än på en visuell canvas, och kodbasen kan ligga bredvid din produkt, din backend och dina tester.
• Kostnad per webbplats. På Webflows prissida, kontrollerad den 13 oktober 2026, kostar webbplatsplanen Basic 15 USD i månaden och Premium, planen med Webflows CMS, 25 USD i månaden, båda med årsfakturering. Lokalisering är ett tillägg från 9 USD i månaden.
• Funktioner som kräver en riktig backend: formulär som skriver till ditt CRM, låst innehåll, sökning över fler än en webbplats eller något annat som måste köras på din egen infrastruktur.
• Exporten räcker inte för att komma loss. Kodexport kräver en betald Workspace-plan, inte bara en webbplatsplan, och CMS:et följer inte med. En ren flytt kräver planering i vilket fall som helst.

Om ditt marknadsteam publicerar sidor visuellt varje vecka och webbplatsen gör sitt jobb är det ett rimligt val att stanna kvar på Webflow. En migrering ska ge något konkret tillbaka.

Vad Webflows kodexport innehåller och vad som saknas

Källa: Webflows hjälpartikel om att exportera webbplatsens kod.

Vad vi såg när vi granskade publicerade Webflow-sajter

Den 13 oktober 2026 laddade vi ner startsidorna för sju webbplatser byggda med Webflow, däribland webflow.com, och tittade på vad en migrering skulle behöva föra över:

• Alla sju laddar jQuery och sina bilder från Webflows servrar. Bilderna kommer från cdn.prod.website-files.com, och Webflows eget hjälpcenter påpekar att bild- och filfält som exporteras till CSV är länkar till det ursprungliga projektets hosting, som slutar fungera om projektet raderas (Webflow Help). Varje fil måste laddas ner och hostas på nytt.
• Alla sju hämtar också sin delningsbild för sociala medier från Webflow. Open Graph-bilden är lätt att glömma, och länkförhandsvisningar på LinkedIn eller WhatsApp tappar sin bild när det gamla projektet stängs.
• Alla sju renderar sina CMS-listor direkt i den publicerade HTML-koden, mellan 3 och 19 Collection lists per startsida. Det är goda nyheter: till skillnad från en Framer-sajt, som enligt vår guide för att migrera från Framer till Astro byggs upp av en runtime efter att sidan har laddats, är en publicerad Webflow-sida en komplett referens för vilket innehåll som ska ligga var, även om kodexporten lämnar de listorna tomma.
• Fem av de sju använder Webflow Interactions, som syns på data-w-id-attribut på upp till 109 element på en och samma startsida. Varje interaktion är ett litet beteende att återskapa, eller ett beslut att stryka det.

Från Webflow till Astro, steg för steg

1. Inventera varje URL. Webflow genererar /sitemap.xml automatiskt när det alternativet är påslaget (Webflow Help). Lägg till varje Collection-sida, hämta rapporten Sidor från Google Search Console för den längsta tillgängliga perioden och exportera dina befintliga 301-omdirigeringar som CSV under Site settings, Publishing (Webflow Help).
2. Exportera innehållet. Exportera varje CMS-samling till CSV från CMS-panelen, en gång per språk om du använder Localize, och behåll kolumnen Item ID. CSV-filen plattar till strukturen: referensfält blir vanlig text, multireferenser kommaseparerad text och rich text blir HTML. För allt som har referenser listar Webflow Data API objekten med deras fält och språk, vilket oftast blir renare än att foga ihop CSV-filer igen.
3. Ladda ner varje fil. Bilder, PDF-filer, typsnitt som din licens låter dig hosta själv, Open Graph-bilderna och favikonen. Stäng inte Webflow-projektet förrän den nya webbplatsen inte längre pekar på website-files.com.
4. Exportera koden som referens. Har du en betald Workspace-plan kan du exportera HTML och CSS. Publicera inte exporten som den nya webbplatsen: den skulle ta med webflow.js, jQuery och tomma CMS-listor. Använd den för att läsa av exakta avstånd, brytpunkter och klasstruktur.
5. Modellera innehållet i Astro. Gör varje samling till en content collection i Astro eller en modell i ett headless CMS, där referenser förblir referenser. Bygg sedan om varje mall som Astro-komponenter och flytta bilderna till astro:assets.
6. Återskapa de interaktioner som bär betydelse. De flesta Webflow Interactions blir CSS-övergångar, keyframes eller några rader JavaScript. För tyngre rörelse är GSAP gratis för kommersiellt bruk sedan Webflow gjorde det gratis i april 2025 (Webflow). Respektera prefers-reduced-motion i vilket fall som helst.
7. Ersätt formulär, sökfunktion och skyddade sidor. Ge varje formulär en riktig endpoint (en Cloudflare Worker, en formulärtjänst eller ditt CRM), lägg till ett statiskt sökindex som Pagefind om webbplatsen behöver sökning och flytta eventuellt lösenordsskydd till webbhotellet eller appen.
8. Bygg om lokaliserade sidor ordentligt. Bara huvudspråket följer med i kodexporten, så bygg varje språk med Astros i18n-routning, med en URL per språk och hreflang mellan dem.
9. Matcha URL-formatet. Webflow serverar sidor utan avslutande snedstreck och omdirigerar /pricing/ till /pricing. Ställ in trailingSlash och build.format i Astro så att den nya webbplatsen ger samma adresser (Astros konfigurationsreferens); varje avvikelse är en omdirigering du inte hade behövt.
10. Omdirigera på servern, lansera och bevaka. Ett statiskt Astro-bygge utan adapter gör om konfigurerade omdirigeringar till meta refresh-sidor, så sätt upp 1:1-omdirigeringar med 301 där webbplatsen hostas, till exempel i en _redirects-fil på Cloudflare. Byt DNS, behåll Webflow-projektet tills den nya webbplatsen är verifierad och följ Search Consoles indexeringsrapporter under de närmaste veckorna. Vår SEO-checklista för webbplatsmigrering täcker lanseringsdagen och de 90 dagarna efter den.

Vad som ändras efter flytten

Så behåller du din SEO

Googles riktlinjer för webbplatsflyttar med URL-ändringar gäller även här: mappa varje gammal URL till dess närmaste nya motsvarighet, använd permanenta omdirigeringar på serversidan och behåll dem i minst ett år. Om URL:erna förblir identiska, vilket ett noggrant nybygge ofta kan åstadkomma med Webflow, behöver du främst kontrollera att titlar, beskrivningar, canonical-taggar, strukturerad data och Open Graph-bilder har följt med.

Fällorna som är specifika för Webflow är det som blir kvar: en Open Graph-bild eller PDF som fortfarande hämtas från website-files.com, en staging-adress på webflow.io som fortfarande är indexerad, eller en CMS-sida vars slug ändrades i flytten. Kontrollera alla tre innan du stänger Webflow-projektet.

Så genomför Dardo en Webflow-migrering

Vi genomför flyttar från Webflow inom vår tjänst för webbplatsmigrering: inventering av URL:er och innehåll, export av CMS-innehållet, en representativ sida som byggs om först och granskas i överenskomna bredder, och sedan resten av mallarna, formulären och omdirigeringarna. Själva bygget är webbutveckling i Astro, och rörelsearbetet är kreativ utveckling. Den här webbplatsen, dardo.studio, körs på Astro på Cloudflare Workers med innehållet i ett headless CMS, och vi skriver och publicerar den här bloggen via det CMS:et.

Om du funderar på en flytt, skicka oss webbplatsen och berätta vad du vill ändra. Vi säger om det är värt att lämna Webflow innan vi lämnar en offert.