Перенос сайта с Framer на Astro: как сменить платформу и не потерять дизайн и позиции

Коротко

Справочный центр Framer прямо говорит, что Framer не предлагает экспорт в HTML для размещения сайта на собственном хостинге (Справка Framer). Поэтому переход с Framer на Astro — это пересборка, а не экспорт. Вы сохраняете опубликованный сайт как эталон, пересобираете каждый шаблон в виде компонентов Astro, переносите контент CMS в коллекции, воссоздаёте ту анимацию, которая действительно нужна, и настраиваете постоянный редирект для каждого URL, который меняется.

Если делать всё в этом порядке, новый сайт может выглядеть так же, загружать меньше JavaScript и сохранить позиции в поиске. Если пропустить снимок сайта или карту редиректов, получится редизайн, о котором никто не просил, и просадка поискового трафика.

Почему команды уходят с Framer

Framer — хороший инструмент, чтобы быстро проектировать и публиковать маркетинговые сайты. Причины уйти с него обычно практические, а не эстетические:

• Хостинг и владение. Сайт на Framer работает на серверах Framer. Командам, которые хотят держать код в собственном репозитории, на своём хостинге или рядом со своим бэкендом, нужна пересборка.
• Стоимость тарифа за каждый сайт. На странице тарифов Framer, проверенной 12 октября 2026 года, тариф Basic стоит 10 USD в месяц, а тариф Pro, в котором появляются редиректы, — 30 USD в месяц, оба при оплате за год. Локализация — платное дополнение.
• Ограничения редиректов. Редиректы во Framer работают только для путей в пределах одного домена (Справка Framer).
• Формы, данные и интеграции, которым нужен настоящий бэкенд: CRM, система бронирования, закрытый контент или всё, что должно работать на вашей собственной инфраструктуре.

Если ваша маркетинговая команда каждую неделю визуально собирает и правит страницы, а сайт справляется со своей задачей, остаться на Framer может быть правильным решением. Миграция требует времени на дизайн и разработку, и она должна дать что-то конкретное.

Что мы узнали, создавая инструмент для снимков сайтов на Framer

Мы в Dardo создали внутренний инструмент, который делает снимок опубликованной страницы Framer (для сайта, которым вы владеете) и превращает его в автономный эталонный файл и трекер миграции на Astro, где каждая строка — это то, что нужно пересобрать. Работа над ним показала, где сайты на Framer прячут свою сложность:

• Ресурсы лежат на CDN Framer. Изображения, шрифты и код загружаются с framerusercontent.com и связанных доменов. Адаптивные изображения запрашивают один и тот же файл в нескольких размерах (?width=512, ?width=1024), поэтому при снимке для каждого изображения сохраняется один локальный файл — самый большой.
• JavaScript приходит слоями. Framer загружает небольшие модули, которые лишь реэкспортируют настоящий бандл, поэтому за один проход часть кода теряется. Инструмент сканирует страницу повторно, пока не перестанут появляться новые модули.
• Контент CMS — это отдельный формат файлов. Коллекции CMS Framer поставляются как файлы .framercms, которые страница загружает с CDN диапазонами байтов. На обычном статическом хостинге такие запросы возвращают файл целиком, а модуль, который формирует их URL, указывает обратно на Framer.
• Рантайм переписывает страницу после загрузки. React-рантайм Framer выполняет гидратацию HTML и может снова вставить удалённые вами элементы. Например, значок «Made in Framer» гидратируется в собственный контейнер.
• Формы зависят от Framer. У сохранённых форм нет атрибута action в HTML; отправка работает только через клиентский рантайм Framer.
• SEO-теги указывают на Framer. Если их не переписать, canonical и URL в Open Graph продолжают указывать на исходный адрес Framer.
• Анимация — это данные. Эффекты появления хранятся на странице в виде JSON, поэтому инструмент записывает их вместе с ключевыми кадрами и таймингом каждой запущенной анимации.

Вывод, который мы сделали: экспорт — это доказательная база, а не результат работы. Мы никогда не публикуем сохранённый HTML или рантайм Framer. Они точно показывают, что нужно пересобрать.

Перенос с Framer на Astro: пошагово

1. Составьте список всех URL. Начните с sitemap.xml сайта, добавьте все страницы CMS и выгрузите отчёт «Страницы» из Google Search Console за максимально доступный период. Запишите редиректы, уже настроенные во Framer в разделе Site Settings, Hosting.
2. Экспортируйте то, что позволяет Framer. По словам Framer, контент CMS можно экспортировать с помощью плагинов в такие форматы, как CSV или JSON (Справка Framer). Скачайте все изображения и файлы и проверьте лицензию каждого шрифта, прежде чем размещать его на своём хостинге.
3. Сохраните опубликованный сайт как эталон. Зафиксируйте каждый шаблон на каждом брейкпоинте, а также тайминг каждой анимации, которую хотите сохранить. Наш инструмент снимает страницы при ширине 1440, 810 и 390 пикселей, а затем на каждом брейкпоинте, найденном в CSS сайта, и на пиксель ниже и выше него.
4. Пересоберите шаблоны в виде компонентов Astro. Перенесите коллекции CMS в коллекции контента или headless CMS, изображения — в astro:assets, а локализованные страницы — в i18n-маршрутизацию Astro, по одному URL на каждый язык.
5. Воссоздайте анимацию, которая несёт смысл. Большинство эффектов Framer превращаются в CSS-переходы, ключевые кадры или небольшой скрипт. Учитывайте prefers-reduced-motion. В одной из наших собственных пересборок с Framer на Astro — сайте из 18 маршрутов, который не был клиентским проектом, — 217 из 219 состояний прокрутки и взаимодействия совпали с оригиналом с расхождением в пределах 1% пикселей.
6. Дайте каждой форме настоящий обработчик. Направьте каждую форму на собственный обработчик (Cloudflare Worker, сервис форм или вашу CRM) и проверьте доставку на тестовом сервере.
7. Перенесите поисковые метаданные. Title, description, теги Open Graph, структурированные данные и canonical, указывающий на саму страницу, — на каждой странице, а также новый XML-sitemap.
8. Делайте редиректы на сервере, а не в HTML. Статическая сборка Astro без адаптера превращает настроенные редиректы в страницы с meta refresh, у которых нет HTTP-кода ответа (справочник по конфигурации Astro). Настройте редиректы 301 один к одному там, где размещён сайт, например в файле _redirects на Cloudflare или в Worker.
9. Запустите сайт и наблюдайте. Переключите DNS, сохраняйте проект во Framer, пока новый сайт не будет проверен, и следите за отчётами Search Console об индексировании и страницах в течение следующих нескольких недель. Наш SEO-чек-лист миграции сайта охватывает день запуска и 90 дней после него.

Что меняется после переезда

Как сохранить SEO

Здесь применимо руководство Google по переезду сайта со сменой URL: сопоставьте каждый старый URL с ближайшим новым аналогом, используйте постоянные серверные редиректы и сохраняйте их не менее года. Если URL остаются прежними, а аккуратная пересборка часто позволяет этого добиться, достаточно проверить, что на новых страницах тот же контент и те же метаданные.

Ловушка, характерная именно для Framer, — оставшийся адрес Framer. Убедитесь, что ни canonical, ни запись в sitemap, ни тег Open Graph не указывают на старый URL Framer и что после запуска нового сайта проект во Framer снят с публикации или перенаправлен.

Как Dardo проводит миграцию с Framer

Переезды с Framer мы проводим в рамках услуги миграции сайта: инвентаризация, снимок сайта, сначала одна типовая страница, пересобранная и проверенная на согласованных значениях ширины, затем остальные шаблоны, формы и редиректы. Сама сборка — это веб-разработка на Astro, а анимация — креативная разработка. Этот сайт, dardo.studio, работает на Astro и Cloudflare Workers, а его контент хранится в headless CMS — такую связку мы используем чаще всего.

Если вы обдумываете переезд, пришлите нам сайт и расскажите, что хотите изменить. Ещё до того, как оценивать пересборку, мы скажем, стоит ли она того.