При перенесенні сайту на Webflow часто виникають типові проблеми: DNS-записи не прописуються, SSL-сертифікат не випускається, а SEO-метадані не індексуються. Клієнти втрачають до 30% трафіку через неправильні редиректи або дублі сторінок. Ми налаштовуємо Webflow-сайти під ключ з ранніх версій платформи. За цей час виконано понад 50 проєктів — від лендінгів до багатосторінкових каталогів з CMS та інтеграціями. Webflow у 3 рази швидше завантажує сторінки порівняно з традиційним хостингом завдяки вбудованій CDN Fastly. Це знижує показник відмов на 15-20% і покращує поведінкові фактори.
У цій статті розберемо ключові етапи налаштування: підключення домену, SEO, аналітика, форми, інтеграції та кастомізація. Ви отримаєте чек-лист, який дозволить запустити проєкт за 1–6 днів без сюрпризів. Зв'яжіться з нами, якщо потрібна допомога з налаштуванням або хочете замовити розробку сайту на Webflow під ключ.
Кожен проєкт починається з аудиту поточного сайту або прототипу. Потім налаштовується хостинг, домен та SSL, інтегруються системи аналітики та CRM, впроваджується кастомний код і проводиться фінальне тестування. На виході ви отримуєте повністю готовий до просування сайт.
Як налаштувати домен та SSL в Webflow?
Webflow хостить сайт на власній CDN (Fastly). Підключення домену — через DNS-налаштування:
A @ → 75.2.70.75
A @ → 99.83.190.102
CNAME www → proxy-ssl.webflow.com
Після додавання у DNS-провайдері: Project Settings → Hosting → Custom Domains → Add Domain. SSL через Let's Encrypt випускається автоматично.
Для naked-домену без www — у Webflow налаштовується редирект domain.com → www.domain.com (або навпаки) через Project Settings → Hosting.
Email на домені — Webflow не надає email-хостинг. Використовуйте Google Workspace або Zoho Mail, налаштувавши MX-записи у DNS-провайдера незалежно від Webflow.
Як правильно налаштувати SEO для Webflow?
Project Settings → SEO:
- Title tag format: {Page Name} | {Site Name} — шаблон для всіх сторінок
- Default meta image (og:image за замовчуванням)
- Webflow branding (noindex) — вимкнути для кастомного домену
Для кожної сторінки (Page Settings → SEO Settings):
- SEO Title — унікальний, 50–60 символів
- Meta Description — 140–160 символів
- Open Graph Image — 1200×630px
- Canonical URL — якщо є ризик дублів
- Indexing: Allow / Disallow (noindex, nofollow)
CMS Collection Templates: У налаштуваннях шаблону — SEO-поля прив'язуються до полів колекції:
- Title → {{SEO Title}} або {{Name}} | Назва сайту
- Description → {{SEO Description}}
- og:image → {{Featured Image}}
Sitemap.xml — генерується автоматично за адресою domain.com/sitemap.xml. Налаштування пріоритетів — через Page Settings → SEO → Priority.
301 Redirects — Project Settings → SEO → Redirects. CSV-імпорт для масових редиректів (при міграції зі старого сайту):
/old-page,/new-page
/old-services/design,/services/ux-ui
/blog/old-post,/blog/post-name
| Налаштування | Рівень | Де задається |
|---|---|---|
| Title Tag | Глобальний + посторінковий | Project Settings → SEO → Title Tag Format + Page Settings → SEO Title |
| Meta Description | Посторінковий | Page Settings → Meta Description |
| OG Image | Глобальний + посторінковий | Project Settings → Default OG Image + Page Settings → OG Image |
| Canonical URL | Посторінковий | Page Settings → Canonical URL |
| Sitemap priority | Посторінковий | Page Settings → Priority |
Стандартні налаштування описані в офіційному керівництві Webflow з SEO.
Як інтегрувати Google Analytics 4 та Яндекс.Метрику?
Google Analytics 4: Project Settings → Integrations → Google Analytics → Measurement ID (G-XXXXXXXXXX). Webflow автоматично надсилає page_view. Для кастомних подій — кастомний JS:
<script>
document.querySelectorAll('[data-track-cta]').forEach(btn => {
btn.addEventListener('click', () => {
gtag('event', 'cta_click', {
cta_label: btn.dataset.trackCta,
page_location: window.location.pathname,
});
});
});
window.addEventListener('message', function(event) {
if (event.data.type === 'webflow.form.success') {
gtag('event', 'generate_lead', {
form_id: event.data.form,
});
}
});
</script>
Яндекс.Метрика: Project Settings → Custom Code → вставити код лічильника в
.Як налаштувати форми та інтеграції?
Webflow Forms обробляються платформою: дані зберігаються в Dashboard → Forms. Сповіщення на email — Project Settings → Integrations → Email Notifications.
Для кастомної обробки форму можна перехоплювати через JavaScript і відправляти на свій API. Також використовуйте готові інтеграції через Zapier або Make: Trigger «Form Submission» → actions у CRM, Slack, Google Sheets.
Webflow API для автоматизації CMS:
curl -X POST "https://api.webflow.com/v2/collections/{collection_id}/items" \
-H "Authorization: Bearer {API_TOKEN}" \
-H "Content-Type: application/json" \
-d '{
"fieldData": {
"name": "Новий пост",
"slug": "new-post",
"content": "Текст статті",
"_draft": false,
"_archived": false
}
}'
Це корисно для автоматичного створення контенту із зовнішніх систем: вакансії з HR-платформи, оголошення з ERP, прес-релізи з PR-інструменту.
Memberstack: закриті сторінки, особистий кабінет, платні підписки. Встановлюється як JS-скрипт + атрибути на елементи.
Finsweet Attributes — безкоштовна JS-бібліотека розширень для Webflow:
<div fs-cmsfilter-element="filters">
<button fs-cmsfilter-field="category" fs-cmsfilter-value="all">Всі</button>
<button fs-cmsfilter-field="category" fs-cmsfilter-value="design">Дизайн</button>
</div>
<div fs-cmsfilter-element="list">
<!-- Collection List -->
</div>
- fs-cmsfilter — фільтрація CMS-колекції без JS-коду (через data-атрибути)
- fs-cmssort — сортування колекції
- fs-cmsnest — вкладені колекції (Multi-reference items)
- fs-cmsload — infinite scroll / load more
Що входить в роботу?
| Етап | Тривалість | Що входить |
|---|---|---|
| Аудит та планування | 1–2 дні | Аналіз поточного сайту, прототипу, складання чек-листа з налаштувань |
| Базове налаштування | 1 день | Адміністрування домену, SSL, первинна SEO-конфігурація, встановлення GA4, налаштування форм та сповіщень |
| Інтеграції та кастомізація | 3–4 дні | Підключення CRM через Zapier/Make, кастомні події GA4, GTM, Memberstack, кастомний CSS/JS |
| Тестування та запуск | 1 день | Перевірка всіх сторінок, редиректів, метаданих, продуктивності; передача доступів та навчання редакторів |
Додатково надаємо:
- Документацію з описом всіх налаштувань
- Доступи до адмінки Webflow, DNS-провайдеру, інтегрованим сервісам
- Коротке навчання для редакторів (до 1 години)
- Гарантію 30 днів на коректну роботу налаштувань — у разі помилок виправляємо безкоштовно
Типові терміни
| Тип налаштування | Тривалість | Склад робіт |
|---|---|---|
| Базова | 1 робочий день | Домен, SSL, GA4, форма зі сповіщеннями, sitemap, редиректи |
| Розширена | 3–4 дні | Все з базової + інтеграції (CRM через Zapier, кастомні події GA4, GTM, Memberstack) |
| Повна | 4–6 днів | Все з розширеної + кастомні анімації, Finsweet Attributes, SEO для CMS, навчання редакторів |
Вартість розраховується індивідуально залежно від обсягу робіт та складності інтеграцій. Якщо хочете замовити налаштування Webflow-сайту або отримати консультацію — напишіть нам. Ми оцінимо ваш проєкт і запропонуємо оптимальне рішення протягом 1 дня.