Migrare da Framer ad Astro: come spostare il sito senza perdere design e posizionamento

La risposta breve

Il centro assistenza di Framer lo dice chiaramente: Framer non offre l'esportazione in HTML per l'hosting autonomo (Framer Help). Passare da Framer ad Astro, quindi, è una ricostruzione, non un'esportazione. Si cattura il sito pubblicato come riferimento, si ricostruisce ogni template come componenti Astro, si spostano i contenuti del CMS in collezioni, si ricreano le animazioni che servono davvero e si assegna un redirect permanente a ogni URL che cambia.

Se segui quest'ordine, il nuovo sito può avere lo stesso aspetto, caricare meno JavaScript e mantenere il posizionamento. Se salti la cattura o la mappa dei redirect, ti ritrovi con un redesign che nessuno ha chiesto e un calo del traffico dalla ricerca.

Perché i team lasciano Framer

Framer è un buon strumento per progettare e pubblicare rapidamente siti di marketing. I motivi per lasciarlo di solito sono pratici, non estetici:

• Hosting e proprietà. Un sito Framer gira sui server di Framer. I team che vogliono il codice nel proprio repository, sul proprio hosting o accanto al proprio backend devono ricostruirlo.
• Il costo del piano per ogni sito. Sulla pagina dei prezzi di Framer, consultata il 12 ottobre 2026, il piano Basic costa 10 USD al mese e il piano Pro, che aggiunge i redirect del sito, 30 USD al mese, entrambi con fatturazione annuale. La localizzazione è un componente aggiuntivo a pagamento.
• Limiti dei redirect. I redirect di Framer funzionano solo per percorsi all'interno dello stesso dominio (Framer Help).
• Moduli, dati e integrazioni che richiedono un vero backend: un CRM, un sistema di prenotazione, contenuti riservati o qualsiasi cosa debba girare sulla tua infrastruttura.

Se il tuo team marketing crea e modifica pagine in modo visuale ogni settimana e il sito fa il suo lavoro, restare su Framer può essere la scelta giusta. Una migrazione costa tempo di design e di sviluppo; deve portare un vantaggio preciso.

Cosa abbiamo imparato costruendo uno strumento di cattura per Framer

Dardo ha sviluppato uno strumento interno che cattura una pagina Framer pubblicata, di un sito di tua proprietà, e la trasforma in un file di riferimento autonomo più un tracker della migrazione ad Astro, con una riga per ogni elemento da ricostruire. Costruirlo ci ha mostrato dove i siti Framer nascondono la loro complessità:

• Gli asset stanno sul CDN di Framer. Immagini, font e codice vengono caricati da framerusercontent.com e da domini collegati. Le immagini responsive richiedono lo stesso file a più larghezze (?width=512, ?width=1024), quindi la cattura conserva un solo file locale per immagine, il più grande.
• Il JavaScript arriva a strati. Framer carica piccoli moduli che si limitano a riesportare il vero bundle, quindi un solo passaggio lascia fuori del codice. Lo strumento ripete la scansione finché non compaiono più nuovi moduli.
• I contenuti del CMS sono un formato a sé. Le collezioni del CMS di Framer vengono distribuite come file .framercms che la pagina scarica dal CDN per intervalli di byte. Su un normale hosting statico queste richieste restituiscono l'intero file, e il modulo che ne costruisce gli URL punta di nuovo a Framer.
• Il runtime riscrive la pagina dopo il caricamento. Il runtime React di Framer idrata l'HTML e può reinserire elementi che avevi rimosso. Il badge "Made in Framer", per esempio, viene idratato in un proprio contenitore.
• I moduli dipendono da Framer. I moduli catturati non hanno un attributo action nell'HTML; gli invii funzionano solo attraverso il runtime client di Framer.
• I tag SEO puntano a Framer. Se non vengono riscritti, gli URL canonical e Open Graph continuano a indicare l'indirizzo Framer originale.
• Le animazioni sono dati. Gli effetti di comparsa sono salvati nella pagina come payload JSON, quindi lo strumento li registra insieme ai keyframe e alle tempistiche di ogni animazione in esecuzione.

La conclusione che ne abbiamo tratto: l'export è una prova, non il prodotto da consegnare. Non mettiamo mai online l'HTML catturato né il runtime di Framer. Ci dicono esattamente cosa ricostruire.

Da Framer ad Astro, passo dopo passo

1. Fai l'inventario di ogni URL. Parti dalla sitemap.xml del sito, aggiungi ogni pagina del CMS ed esporta il report Pagine di Google Search Console sull'intervallo più lungo disponibile. Annota i redirect già impostati in Framer, in Site Settings, Hosting.
2. Esporta ciò che Framer consente. Framer indica che i contenuti del CMS si possono esportare con dei plugin in formati come CSV o JSON (Framer Help). Scarica ogni immagine e ogni file, e controlla la licenza di ogni font prima di ospitarlo in autonomia.
3. Cattura il sito pubblicato come riferimento. Registra ogni template a ogni breakpoint, insieme alle tempistiche di ogni animazione che vuoi mantenere. Il nostro strumento cattura le pagine a 1440, 810 e 390 pixel di larghezza, poi un pixel sotto, esattamente su e un pixel sopra ogni breakpoint che trova nel CSS del sito.
4. Ricostruisci i template come componenti Astro. Sposta le collezioni del CMS nelle content collections o in un CMS headless, le immagini in astro:assets e le pagine localizzate nel routing i18n di Astro, con un URL per ogni lingua.
5. Ricrea le animazioni che hanno un significato. La maggior parte degli effetti di Framer diventa transizioni CSS, keyframe o un piccolo script. Rispetta prefers-reduced-motion. In una delle nostre ricostruzioni da Framer ad Astro, un sito di 18 route che non era un progetto per un cliente, 217 stati di scroll e di interazione su 219 corrispondevano all'originale con una differenza di pixel entro l'1%.
6. Dai a ogni modulo un vero endpoint. Collega ogni modulo a un tuo handler (un Cloudflare Worker, un servizio per i moduli o il tuo CRM) e verifica la consegna in staging.
7. Riporta i metadati per la ricerca. Title, description, tag Open Graph, dati strutturati e un canonical autoreferenziale su ogni pagina, più una nuova sitemap XML.
8. Fai i redirect sul server, non nell'HTML. Una build statica di Astro senza adapter trasforma i redirect configurati in pagine meta refresh prive di codice di stato HTTP (riferimento di configurazione di Astro). Imposta redirect 301 uno a uno dove il sito è ospitato, per esempio in un file _redirects di Cloudflare o in un Worker.
9. Lancia, poi monitora. Cambia il DNS, conserva il progetto Framer finché il nuovo sito non è verificato e segui i report di indicizzazione e Pagine di Search Console nelle settimane successive. La nostra checklist SEO per la migrazione di un sito copre il giorno del lancio e i 90 giorni successivi.

Cosa cambia dopo la migrazione

Mantenere intatta la SEO

Le indicazioni di Google sugli spostamenti di siti con cambio di URL valgono anche qui: associa ogni vecchio URL all'equivalente nuovo più vicino, usa redirect permanenti lato server e mantienili per almeno un anno. Se gli URL restano identici, cosa che una ricostruzione accurata spesso permette, devi solo verificare che le nuove pagine abbiano gli stessi contenuti e metadati.

La trappola tipica di Framer è l'indirizzo Framer dimenticato. Assicurati che nessun canonical, voce della sitemap o tag Open Graph citi ancora il vecchio URL Framer, e che il progetto Framer venga tolto dalla pubblicazione o reindirizzato una volta online il nuovo sito.

Come Dardo gestisce una migrazione da Framer

Gestiamo i passaggi da Framer all'interno del nostro servizio di migrazione del sito web: inventario, cattura, una pagina rappresentativa ricostruita per prima e revisionata alle larghezze concordate, poi il resto dei template, i moduli e i redirect. La realizzazione vera e propria è sviluppo web in Astro, e le animazioni rientrano nello sviluppo creativo. Questo sito, dardo.studio, gira su Astro su Cloudflare Workers con i contenuti in un CMS headless, la configurazione che usiamo più spesso.

Se stai valutando un passaggio, inviaci il sito e cosa vuoi cambiare. Ti diremo se una ricostruzione vale la pena prima di farti un preventivo.