--- title: "Migrar de Framer para Astro sem perder o SEO — Dardo" description: "Migrar de Framer para Astro: o Framer não exporta HTML. O que capturar, como refazer CMS, animações e formulários e como manter URLs e SEO." url: "https://dardo.studio/pt/blog/migrar-de-framer-para-astro/" language: "pt" translations: {"en":"https://dardo.studio/en/blog/framer-to-astro/","es":"https://dardo.studio/es/blog/migrar-de-framer-a-astro/","fr":"https://dardo.studio/fr/blog/migrer-framer-vers-astro/","de":"https://dardo.studio/de/blog/framer-zu-astro-migrieren/","it":"https://dardo.studio/it/blog/migrare-da-framer-ad-astro/","nl":"https://dardo.studio/nl/blog/framer-naar-astro/","sv":"https://dardo.studio/sv/blogg/migrera-framer-till-astro/","pl":"https://dardo.studio/pl/blog/migracja-z-framera-do-astro/","uk":"https://dardo.studio/uk/blog/framer-to-astro/","ru":"https://dardo.studio/ru/blog/framer-to-astro/","ar":"https://dardo.studio/ar/blog/framer-to-astro/","hi":"https://dardo.studio/hi/blog/framer-to-astro/","th":"https://dardo.studio/th/blog/framer-to-astro/","ja":"https://dardo.studio/ja/blog/framer-to-astro/","ko":"https://dardo.studio/ko/blog/framer-to-astro/","zh-Hans":"https://dardo.studio/zh-Hans/blog/framer-to-astro/","zh-Hant":"https://dardo.studio/zh-Hant/blog/framer-to-astro/"} updated: "2026-10-13T00:59:11.988Z" --- [Blog](https://dardo.studio/pt/blog/) # Migrar de Framer para Astro: como mudar um site Framer sem perder o design nem as posições no Google Migrar de Framer para Astro é reconstruir, porque o Framer não exporta HTML. O que capturar primeiro, o que quebra e como manter design, URLs e posições. Por [Nicolás Cerón](https://dardo.studio/pt/estudio/) ·12 de outubro de 2026 ![Uma moldura dourada vazia sobre um cavalete em um ateliê de pintor à noite, com um fio carmesim que sai da moldura, passa por uma janela aberta e sobe por uma trilha na colina até um observatório iluminado sob as estrelas.](https://dardo.studio/_astro/01M4S57PW4TH7D1E7E3RQM4Z4E_Z3SVDC.webp) ## Pontos-chave - O Framer não oferece exportação em HTML para hospedagem própria, então migrar para Astro significa reconstruir o site usando as páginas publicadas no Framer como referência. - Registre cada URL, coleção do CMS, breakpoint e animação antes de reconstruir, porque o Framer carrega conteúdo, imagens e código a partir do próprio CDN e do seu runtime. - Os formulários e os arquivos do CMS do Framer dependem do runtime do Framer; dê a cada formulário um endpoint próprio e leve o conteúdo do CMS para coleções do Astro ou para um headless CMS. - Configure redirecionamentos 301 de 1 para 1 no servidor da sua hospedagem; um build estático do Astro sem adaptador só gera redirecionamentos por meta refresh. - Garanta que nenhuma canonical, entrada do sitemap ou tag Open Graph continue apontando para o endereço antigo do Framer depois do lançamento. ## A resposta curta A central de ajuda do Framer é clara: o Framer não oferece exportação em HTML para hospedar o site por conta própria ([Framer Help](https://www.framer.com/help/articles/can-i-export-my-website-to-html-and-self-host-it/)). Por isso, migrar de Framer para Astro é uma reconstrução, não uma exportação. Você registra o site publicado como referência, reconstrói cada template como componentes Astro, leva o conteúdo do CMS para coleções, recria as animações que realmente importam e dá a cada URL que muda um redirecionamento permanente. Feito nessa ordem, o novo site pode ficar com a mesma aparência, carregar menos JavaScript e manter suas posições no Google. Pule a captura ou o mapa de redirecionamentos e você acaba com um redesign que ninguém pediu e uma queda no tráfego de busca. ## Por que as equipes saem do Framer O Framer é uma boa ferramenta para desenhar e publicar sites de marketing rapidamente. Os motivos para sair costumam ser práticos, não estéticos: - **Hospedagem e propriedade.** Um site no Framer roda nos servidores do Framer. Equipes que querem o código no próprio repositório, na própria hospedagem ou ao lado do próprio backend precisam reconstruir. - **Custo do plano por site.** Na [página de preços do Framer](https://www.framer.com/pricing/), consultada em 12 de outubro de 2026, o plano Basic custa USD 10 por mês e o plano Pro, que inclui redirecionamentos, USD 30 por mês, ambos com cobrança anual. A localização é um complemento pago. - **Limites de redirecionamento.** Os redirecionamentos do Framer só funcionam para caminhos dentro do mesmo domínio ([Framer Help](https://www.framer.com/help/articles/how-to-setup-redirects-to-maintain-seo-ranking/)). - **Formulários, dados e integrações** que precisam de um backend de verdade: um CRM, um sistema de agendamento, conteúdo restrito ou qualquer coisa que tenha de rodar na sua própria infraestrutura. Se a sua equipe de marketing cria e edita páginas visualmente toda semana e o site cumpre o seu papel, continuar no Framer pode ser a decisão certa. Uma migração custa tempo de design e de desenvolvimento; ela precisa trazer algo concreto. ## O que aprendemos criando uma ferramenta de captura para o Framer A Dardo criou uma ferramenta interna que captura uma página publicada no Framer, de um site que pertence a você, e a transforma em um arquivo de referência independente, acompanhado de um controle de migração para Astro com uma linha para cada item a reconstruir. Construí-la nos mostrou onde os sites feitos no Framer escondem sua complexidade: - **Os arquivos ficam no CDN do Framer.** Imagens, fontes e código são carregados de framerusercontent.com e de domínios relacionados. Imagens responsivas pedem o mesmo arquivo em várias larguras (?width=512, ?width=1024), então a captura guarda um único arquivo local por imagem, o maior. - **O JavaScript chega em camadas.** O Framer carrega pequenos módulos que só reexportam o bundle real, então uma única varredura deixa código para trás. A ferramenta repete a varredura até que nenhum módulo novo apareça. - **O conteúdo do CMS é um formato de arquivo à parte.** As coleções do CMS do Framer são entregues como arquivos .framercms que a página busca no CDN em intervalos de bytes. Em uma hospedagem estática comum, essas requisições devolvem o arquivo inteiro, e o módulo que monta as URLs delas aponta de volta para o Framer. - **O runtime reescreve a página depois que ela carrega.** O runtime React do Framer faz a hidratação do HTML e pode reinserir elementos que você removeu. O selo "Made in Framer", por exemplo, é hidratado em um contêiner próprio. - **Os formulários dependem do Framer.** Os formulários capturados não têm atributo action no HTML; os envios só funcionam pelo runtime do Framer no navegador. - **As tags de SEO apontam para o Framer.** Se não forem reescritas, as URLs canonical e Open Graph continuam anunciando o endereço original no Framer. - **Animação é dado.** Os efeitos de entrada ficam armazenados como payloads JSON na página, então a ferramenta os registra junto com os keyframes e o tempo de cada animação em execução. A conclusão que tiramos: a exportação é evidência, não a entrega. Nunca colocamos no ar o HTML capturado nem o runtime do Framer. Eles nos dizem exatamente o que reconstruir. ## De Framer para Astro, passo a passo 1. **Faça o inventário de todas as URLs.** Comece pelo sitemap.xml do site, acrescente todas as páginas do CMS e exporte o relatório Páginas do Google Search Console com o maior período disponível. Anote os redirecionamentos já configurados no Framer, em Site Settings, Hosting. 2. **Exporte o que o Framer permite.** O Framer diz que o conteúdo do CMS pode ser exportado com plugins para formatos como CSV ou JSON ([Framer Help](https://www.framer.com/help/articles/porting-your-data-from-framer/)). Baixe todas as imagens e arquivos e confira a licença de cada fonte antes de hospedá-la por conta própria. 3. **Capture o site publicado como referência.** Registre cada template em todos os breakpoints, além do tempo de cada animação que você quer manter. Nossa ferramenta captura as páginas com 1440, 810 e 390 pixels de largura e, depois, um pixel abaixo, no valor exato e um pixel acima de cada breakpoint que encontra no CSS do site. 4. **Reconstrua os templates como componentes Astro.** Leve as coleções do CMS para [content collections](https://docs.astro.build/en/guides/content-collections/) ou para um headless CMS, as imagens para o [astro:assets](https://docs.astro.build/en/guides/images/) e as páginas traduzidas para o [roteamento de i18n do Astro](https://docs.astro.build/en/guides/internationalization/), com uma URL por idioma. 5. **Recrie as animações que carregam significado.** A maioria dos efeitos do Framer vira transições CSS, keyframes ou um pequeno script. Respeite o prefers-reduced-motion. Em uma das nossas próprias reconstruções de Framer para Astro, um site de 18 rotas que não era projeto de cliente, 217 dos 219 estados de rolagem e de interação ficaram iguais ao original, com até 1% de diferença de pixels. 6. **Dê a cada formulário um endpoint real.** Aponte cada formulário para o seu próprio handler (um Cloudflare Worker, um serviço de formulários ou o seu CRM) e teste a entrega no ambiente de homologação. 7. **Leve junto os metadados de busca.** Títulos, descrições, tags Open Graph, dados estruturados e uma canonical autorreferente em cada página, além de um sitemap XML novo. 8. **Redirecione no servidor, não no HTML.** Um build estático do Astro sem adaptador transforma os redirecionamentos configurados em páginas de meta refresh, sem código de status HTTP ([referência de configuração do Astro](https://docs.astro.build/en/reference/configuration-reference/)). Configure redirecionamentos 301 de 1 para 1 onde o site estiver hospedado, por exemplo em um arquivo \_redirects do Cloudflare ou em um Worker. 9. **Lance e acompanhe.** Troque o DNS, mantenha o projeto no Framer até o novo site ser verificado e acompanhe os relatórios de indexação e de Páginas do Search Console nas semanas seguintes. Nosso [checklist de SEO para migração de site](https://dardo.studio/pt/blog/checklist-seo-migracao-de-site/) cobre o dia do lançamento e os 90 dias seguintes. ## O que muda depois da migração | Área | No Framer | No Astro | | ----------------- | ---------------------------------------------- | ------------------------------------------------------------------ | | Edição | Canvas visual no Framer | Campos do CMS ou código, conforme a sua escolha | | Hospedagem | Servidores do Framer | Qualquer hospedagem estática ou plataforma edge, como o Cloudflare | | Redirecionamentos | Plano Pro; subcaminhos dentro do mesmo domínio | 301 no servidor da sua hospedagem, sem limite de domínio | | Animação | Efeitos e interações nativos | CSS e JavaScript que são seus e que você pode medir | | CMS | Coleções do CMS do Framer | Content collections ou um headless CMS | | Formulários | Gerenciamento de formulários do Framer | Seu próprio endpoint e armazenamento de dados | ## Como manter o SEO intacto As orientações do Google sobre [mudanças de site com alteração de URLs](https://developers.google.com/search/docs/crawling-indexing/site-move-with-url-changes) valem aqui: associe cada URL antiga ao equivalente novo mais próximo, use redirecionamentos permanentes no servidor e mantenha-os por pelo menos um ano. Se as URLs continuarem idênticas, o que uma reconstrução cuidadosa muitas vezes consegue, basta verificar se as novas páginas trazem o mesmo conteúdo e os mesmos metadados. A armadilha específica do Framer é o endereço do Framer que fica para trás. Garanta que nenhuma canonical, entrada do sitemap ou tag Open Graph ainda cite a URL antiga do Framer e que o projeto no Framer seja despublicado ou redirecionado quando o novo site estiver no ar. ## Como a Dardo conduz uma migração do Framer Fazemos migrações do Framer como parte do nosso serviço de [migração de site](https://dardo.studio/pt/servicos/migracao-de-site/): inventário, captura, uma página representativa reconstruída primeiro e revisada nas larguras combinadas e, depois, o restante dos templates, formulários e redirecionamentos. A construção em si é [desenvolvimento web](https://dardo.studio/pt/servicos/desenvolvimento-web/) em Astro, e o trabalho de animação é [desenvolvimento criativo](https://dardo.studio/pt/servicos/desenvolvimento-criativo/). Este site, o dardo.studio, roda em Astro no Cloudflare Workers, com o conteúdo em um headless CMS, a configuração que mais usamos. Se você está avaliando uma migração, [envie o site e o que você quer mudar](https://dardo.studio/pt/contato/?service=website-migration). Vamos dizer se uma reconstrução vale a pena antes de fazer um orçamento. ## Perguntas frequentes **Posso exportar meu site do Framer em HTML?** Não oficialmente. A central de ajuda do Framer diz que não oferece exportação em HTML para hospedagem própria. Existem ferramentas que capturam uma página publicada, mas o resultado continua dependendo do runtime e do CDN do Framer, então trate-o como referência para uma reconstrução, não como algo para colocar no ar. **Vou perder posições no Google se migrar do Framer para o Astro?** Não, se toda URL que gera tráfego continuar funcionando. Mantenha os caminhos idênticos sempre que puder, crie redirecionamentos 301 permanentes para os que mudarem, leve junto títulos, descrições e dados estruturados e acompanhe o Search Console por algumas semanas após o lançamento. **Posso exportar o conteúdo do CMS do Framer?** O Framer diz que o conteúdo do CMS pode ser exportado com plugins para formatos como CSV ou JSON. Baixe também todas as imagens e arquivos, porque os campos das coleções muitas vezes apontam para o CDN do Framer. **Minha equipe vai continuar editando o site sem código depois da migração para o Astro?** Sim, se o novo site usar um headless CMS. Os editores trabalham em uma interface web e o site em Astro é reconstruído a partir desse conteúdo. O dardo.studio funciona assim. **As animações do Framer funcionam no Astro?** Não diretamente. Os efeitos do Framer rodam no runtime dele, então cada animação que você quiser manter é recriada com CSS ou um pequeno script, de preferência com uma versão para movimento reduzido. ## Fontes e leituras adicionais Fontes desta página, com mais detalhes dos publicadores originais. - [Framer Help: posso exportar meu site em HTML e hospedá-lo por conta própria? (em inglês)](https://www.framer.com/help/articles/can-i-export-my-website-to-html-and-self-host-it/) · framer.com - [Framer Help: como levar seus dados para fora do Framer (em inglês)](https://www.framer.com/help/articles/porting-your-data-from-framer/) · framer.com - [Framer Help: como configurar redirecionamentos (em inglês)](https://www.framer.com/help/articles/how-to-setup-redirects-to-maintain-seo-ranking/) · framer.com - [Preços do Framer](https://www.framer.com/pricing/) · framer.com - [Documentação do Astro: Content collections](https://docs.astro.build/en/guides/content-collections/) · docs.astro.build - [Documentação do Astro: Imagens](https://docs.astro.build/en/guides/images/) · docs.astro.build - [Documentação do Astro: Roteamento de internacionalização (i18n)](https://docs.astro.build/en/guides/internationalization/) · docs.astro.build - [Documentação do Astro: Referência de configuração (redirecionamentos)](https://docs.astro.build/en/reference/configuration-reference/) · docs.astro.build - [Google Search Central: Mudanças de site com alteração de URLs](https://developers.google.com/search/docs/crawling-indexing/site-move-with-url-changes) · developers.google.com [Nicolás Cerón](https://dardo.studio/pt/estudio/) Nicolás Cerón é o fundador da Dardo, um estúdio de marca, design e desenvolvimento web em Bogotá, na Colômbia. ## Artigos relacionados - [**Checklist de SEO para migração de site: troque de plataforma ou domínio sem perder posições**As posições raramente caem por causa da nova plataforma, e sim porque URLs que geravam tráfego deixaram de responder. Um checklist do inventário de URLs ao dia 90.](https://dardo.studio/pt/blog/checklist-seo-migracao-de-site/) - [**WordPress ou site sob medida? Como escolher e quando cada um compensa**WordPress ou site sob medida: quando cada um compensa e o meio-termo do WordPress headless, comparados em custo, velocidade, atualizações e propriedade.](https://dardo.studio/pt/blog/wordpress-ou-site-sob-medida/) - [**Migrar de Webflow para Astro: como mudar um site sem perder conteúdo, design nem posições no Google**Migrar de Webflow para Astro: a exportação deixa de fora CMS, formulários, busca e idiomas. O que tirar do Webflow, o que refazer no Astro e como manter o SEO.](https://dardo.studio/pt/blog/migrar-de-webflow-para-astro/) - [**Sites 3D: quando valem a pena e como mantê-los rápidos**Quando um site 3D vale a pena, quando vídeo ou imagens funcionam melhor e como mantivemos rápidos, acessíveis e usáveis os dez mundos 3D do Janus Observatory.](https://dardo.studio/pt/blog/sites-3d/) ## Continue explorando. - [Serviço · **Migração de site sem perder o SEO**](https://dardo.studio/pt/servicos/migracao-de-site/) - [Seu projeto · **Vamos conversar**](https://dardo.studio/pt/contato/)