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

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

Піти з Webflow простіше, ніж із Framer, який узагалі не має експорту в HTML, але лише частково. На платних тарифах Workspace можна експортувати HTML, CSS, JavaScript і зображення сайту та розмістити їх на будь-якому хостингу. Довідковий центр Webflow так само чітко пояснює, що залишається позаду: контент CMS, обробка форм, пошук по сайту, захист паролем, локалізовані сторінки та code components до експорту не потрапляють, а Collection lists показують порожній стан (Довідка Webflow).

Тож міграція з Webflow на Astro — це частково експорт, частково перебудова. Ви експортуєте те, що віддає Webflow, вивантажуєте CMS у CSV або через API, перебудовуєте кожен шаблон як компоненти Astro, замінюєте форми й пошук, відтворюєте взаємодії, які хочете зберегти, і даєте кожному URL, що змінюється, постійний редирект. Якщо робити все в такому порядку, новий сайт збереже дизайн, контент і позиції в пошуку.

Чому команди переходять із Webflow на Astro

Webflow — сильний візуальний конструктор, і багатьом маркетинговим командам варто на ньому залишитися. Причини піти зазвичай пов'язані з володінням і вартістю, а не з дизайном:

• Сайтом починають керувати розробники. Коли більшість змін вносять розробники, з кодом у власному репозиторії працювати швидше, ніж із візуальним полотном, і він може жити поруч із вашим продуктом, бекендом і тестами.
• Вартість тарифу за кожен сайт. На сторінці тарифів Webflow, яку ми перевірили 13 жовтня 2026 року, тариф Basic для сайту коштує 15 USD на місяць, а Premium, тариф із Webflow CMS, — 25 USD на місяць, обидва з оплатою за рік. Локалізація — доповнення від 9 USD на місяць.
• Функції, яким потрібен справжній бекенд: форми, що записують дані у ваш CRM, закритий контент, пошук по кількох сайтах або будь-що, що має працювати на вашій власній інфраструктурі.
• Сам експорт не означає, що ви вже пішли. Експорт коду потребує платного тарифу Workspace, а не лише тарифу сайту, і не містить CMS. Чистий вихід у будь-якому разі треба планувати.

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

Що містить експорт коду з Webflow, а чого в ньому немає

Джерело: стаття довідкового центру Webflow про експорт коду сайту.

Що ми побачили, проаналізувавши опубліковані сайти на Webflow

13 жовтня 2026 року ми завантажили головні сторінки семи сайтів, створених у Webflow, зокрема самого webflow.com, і подивилися, що довелося б переносити під час міграції:

• Усі сім сайтів завантажують jQuery і свої зображення із серверів Webflow. Зображення надходять із cdn.prod.website-files.com, а довідковий центр Webflow сам зазначає, що поля зображень і файлів, експортовані в CSV, — це посилання на хостинг початкового проєкту, які перестануть працювати, якщо цей проєкт видалити (Довідка Webflow). Кожен ресурс треба завантажити й розмістити заново.
• Усі сім також віддають із Webflow зображення для поширення в соцмережах. Про зображення Open Graph легко забути, а прев'ю посилань у LinkedIn чи WhatsApp втрачають картинку, щойно старий проєкт закриють.
• Усі сім рендерять списки CMS прямо в опублікованому HTML, від 3 до 19 Collection lists на головну сторінку. Це добра новина. Сайт на Framer, як показано в нашому посібнику з міграції з Framer на Astro, після завантаження перебудовує runtime. Опублікована сторінка Webflow натомість — повний еталон того, який контент де розміщено, хоча експорт коду залишає ці списки порожніми.
• П'ять із семи використовують Webflow Interactions, позначені атрибутами data-w-id, на одній із головних сторінок — аж на 109 елементах. Кожна взаємодія — це невеликий фрагмент поведінки, який треба відтворити, або рішення від нього відмовитися.

Міграція з Webflow на Astro крок за кроком

1. Складіть перелік усіх URL. Webflow автоматично генерує /sitemap.xml, якщо цю опцію ввімкнено (Довідка Webflow). Додайте кожну сторінку колекції (Collection page), вивантажте звіт «Сторінки» з Google Search Console за найдовший доступний період і експортуйте наявні редиректи 301 у CSV у Site settings, розділ Publishing (Довідка Webflow).
2. Експортуйте контент. Експортуйте кожну колекцію CMS у CSV з панелі CMS, окремо для кожної мови, якщо користуєтеся Localize, і збережіть стовпець Item ID. CSV «сплющує» дані: поля reference виходять звичайним текстом, multi-reference — текстом через кому, а rich text — як HTML. Для всього, що має такі посилання, Webflow Data API повертає елементи разом із полями та мовними версіями, і зазвичай це чистіше, ніж знову зшивати CSV-файли.
3. Завантажте всі ресурси. Зображення, PDF, шрифти, ліцензія яких дозволяє власний хостинг, зображення Open Graph і favicon. Не закривайте проєкт у Webflow, доки новий сайт не перестане звертатися до website-files.com.
4. Експортуйте код як еталон. Якщо у вас платний тариф Workspace, експортуйте HTML і CSS. Не розгортайте їх як новий сайт: він тягнув би за собою webflow.js, jQuery і порожні списки CMS. Використовуйте експорт, щоб зчитати точні відступи, брейкпоінти й структуру класів.
5. Змоделюйте контент в Astro. Перетворіть кожну колекцію на content collection Astro або на модель у headless CMS, зберігши зв'язки між записами, потім перебудуйте кожен шаблон як компоненти Astro і перенесіть зображення в astro:assets.
6. Відтворіть взаємодії, які несуть зміст. Більшість Webflow Interactions перетворюються на CSS-переходи, keyframes або кілька рядків JavaScript. Для складнішої анімації є GSAP: він безкоштовний для комерційного використання з квітня 2025 року, коли його зробив таким Webflow (Webflow). У будь-якому разі враховуйте prefers-reduced-motion.
7. Замініть форми, пошук і захищені сторінки. Дайте кожній формі справжній endpoint (Cloudflare Worker, сервіс форм або ваш CRM), додайте статичний пошуковий індекс, наприклад Pagefind, якщо сайту потрібен пошук, і перенесіть захист паролем на хостинг або в застосунок.
8. Правильно перебудуйте мовні версії. Експорт коду містить лише основну мову, тож створіть кожну мовну версію з i18n-маршрутизацією Astro: один URL на мову та hreflang між ними.
9. Збережіть формат URL. Webflow віддає сторінки без кінцевого слеша й перенаправляє /pricing/ на /pricing. Налаштуйте trailingSlash і build.format в Astro так, щоб новий сайт генерував ті самі адреси (довідник конфігурації Astro); кожна розбіжність — це зайвий редирект.
10. Налаштуйте редиректи на сервері, запустіть сайт і стежте за ним. Статична збірка Astro без адаптера перетворює налаштовані редиректи на сторінки з meta refresh, тож задайте редиректи 301 один до одного там, де розміщено сайт, наприклад у файлі _redirects у Cloudflare. Перемкніть DNS, не закривайте проєкт у Webflow, доки новий сайт не перевірено, і стежте за звітами про індексування в Search Console наступні кілька тижнів. Наш SEO-чеклист для міграції сайту охоплює день запуску й 90 днів після нього.

Що змінюється після переїзду

Як зберегти SEO

Тут діють рекомендації Google щодо переїзду сайту зі зміною URL: зіставте кожен старий URL із найближчим новим відповідником, використовуйте постійні серверні редиректи й тримайте їх щонайменше рік. Якщо URL залишаються ідентичними, а з Webflow ретельна перебудова часто цього досягає, здебільшого достатньо перевірити, чи перенеслися заголовки, описи, canonical-теги, структуровані дані та зображення Open Graph.

Пастки, характерні саме для Webflow, — це залишки: зображення Open Graph або PDF, які досі віддаються з website-files.com, тестова адреса на webflow.io, що й далі в індексі, або сторінка CMS, slug якої змінився під час переїзду. Перевірте всі три пункти, перш ніж закривати проєкт у Webflow.

Як Dardo проводить міграцію з Webflow

Переїзди з Webflow ми виконуємо в межах послуги міграції сайту: інвентаризація URL і контенту, експорт CMS, спершу одна репрезентативна сторінка, перебудована й перевірена на погоджених ширинах екрана, а потім решта шаблонів, форми й редиректи. Сама розробка — це веброзробка на Astro, а анімація — креативна розробка. Цей сайт, dardo.studio, працює на Astro в Cloudflare Workers, його контент зберігається в headless CMS, і саме через цю CMS ми пишемо й публікуємо цей блог.

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