Міграція з Framer на Astro: як перенести сайт без втрати дизайну й позицій у пошуку

Коротка відповідь

У довідковому центрі 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 — це окремий формат файлів. Колекції Framer CMS постачаються як файли .framercms, які сторінка завантажує з CDN частинами (byte ranges). На звичайному статичному хостингу ці запити повертають увесь файл, а модуль, що формує їхні URL, знову вказує на Framer.
• Runtime переписує сторінку після завантаження. React-runtime Framer гідратує HTML і може повторно вставити елементи, які ви видалили. Наприклад, бейдж «Made in Framer» гідратується у власний контейнер.
• Форми залежать від Framer. У збережених формах немає HTML-атрибута action; надсилання працює лише через клієнтський runtime Framer.
• SEO-теги вказують на Framer. Якщо їх не переписати, canonical та URL в Open Graph і далі рекламують початкову адресу на Framer.
• Анімація — це дані. Ефекти появи зберігаються на сторінці як JSON, тож інструмент записує їх разом із ключовими кадрами й таймінгом кожної активної анімації.

Висновок, який ми зробили: експорт — це доказ, а не результат роботи. Ми ніколи не розгортаємо збережений HTML чи runtime 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 у content collections або headless CMS, зображення — в astro:assets, а локалізовані сторінки — в i18n-маршрутизацію Astro, по одному URL на кожну мову.
5. Відтворіть анімацію, яка несе зміст. Більшість ефектів Framer стають CSS-переходами, ключовими кадрами або невеликим скриптом. Враховуйте prefers-reduced-motion. В одній із наших власних перебудов із Framer на Astro (сайт на 18 маршрутів, який не був клієнтським проєктом) 217 із 219 станів прокручування та взаємодії збіглися з оригіналом із різницею в пікселях до 1%.
6. Дайте кожній формі справжній endpoint. Спрямуйте кожну форму на власний обробник (Cloudflare Worker, сервіс форм або вашу CRM) і перевірте доставку на staging.
7. Перенесіть пошукові метадані. Заголовки, описи, теги Open Graph, структуровані дані та canonical, що вказує сам на себе, на кожній сторінці, а також нову XML-карту сайту.
8. Робіть редиректи на сервері, а не в HTML. Статична збірка Astro без адаптера перетворює налаштовані редиректи на сторінки з meta refresh, які не мають HTTP-коду статусу (довідник конфігурації Astro). Налаштуйте редиректи 301 за схемою 1:1 там, де розміщено сайт, наприклад у файлі _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 — таку конфігурацію ми використовуємо найчастіше.

Якщо ви зважуєте переїзд, надішліть нам сайт і опишіть, що хочете змінити. Ми скажемо, чи варта перебудова зусиль, ще до того, як назвемо ціну.