Вебсайт на Strapi CMS + Next.js з розширеною архітектурою SEO
Зростаючому бізнесу потрібен був швидкий, насичений контентом маркетинговий вебсайт, де їхня нетехнічна маркетингова команда могла б самостійно керувати сторінками, публікаціями в блогах і цільовими сторінками — забезпечуючи при цьому конкурентоспроможність сайту в органічному пошуку з першого дня.
Обговоріть Ваш Проєкт
Виклик
Існуючий вебсайт був побудований на монолітній CMS, що створювало ряд проблем:
- Низька продуктивність — Сторінки, що рендерились на сервері, з роздутими плагінами мали середній час завантаження 4-6 секунд, що негативно впливало на Core Web Vitals
- Вузьке місце у розробці — Кожна зміна контенту (нова цільова сторінка, макет блогу, оновлення CTA) вимагала втручання розробника у файли шаблонів
- Слабка основа SEO — Відсутність структурованих даних, непослідовні meta tags, відсутні canonical URLs та відсутність програмно згенерованої карти сайту призводили до низької органічної видимості
- Негнучка модель контенту — Додавання нового типу контенту (кейсів, FAQs, біографій команди) вимагало міграції схеми та переписування шаблонів
- Відсутність попереднього перегляду — Редактори публікували контент наосліп — без можливості попереднього перегляду змін перед публікацією
- Потреби локалізації — Майбутнє розширення на кілька мов вимагало CMS, яка б підтримувала i18n нативно
Наше Рішення
Ми побудували безмакетну архітектуру Strapi + Next.js з гнучким шаром моделювання контенту в Strapi, статично згенерованим Next.js фронтендом з ISR для майже миттєвих оновлень та комплексною системою SEO, що охоплює технічну оптимізацію, оптимізацію на сторінці та структурованих даних.
Архітектура
- CMS: Strapi (self-hosted) з кастомними типами контенту та Dynamic Zones
- Фронтенд: Next.js з App Router, React Server Components, TypeScript
- Стилізація: Tailwind CSS з токенами системи дизайну
- SEO-шар: Next.js Metadata API, генератори JSON-LD, автоматизований sitemap/robots.txt
- Медіа: Strapi Media Library з провайдером Cloudinary для оптимізованої доставки
- Хостинг: Vercel (фронтенд), хмарний Strapi бекенд, Cloudinary (медіа CDN)
- База даних: PostgreSQL для зберігання контенту Strapi
- Кеш: ISR з ревалідацією за вимогою через Strapi webhooks
Моделювання контенту в Strapi
Типи контенту
CMS була структурована навколо типів контенту, що охоплюють усі бізнес-потреби: маркетингові сторінки, публікації в блогах з категоріями та авторами, цільові сторінки кампаній, пропозиції послуг/продуктів, біографії членів команди, FAQs, відгуки та синглтон глобальних налаштувань для конфігурації всього сайту.
Dynamic Zones (Конструктор сторінок)
Strapi Dynamic Zones дозволяють редакторам компонувати контент сторінок з багаторазових компонентів — кожен запис зони відображається на React компоненті на фронтенді. Доступні блоки включають Hero-секції, сітки функцій, макети "текст-із-зображенням", розділи відгуків, CTA-банери, FAQ-акордеони, лічильники статистики, таблиці цін, сітки логотипів, вбудовані елементи (embeds), виділення з блогів та контактні форми — охоплюючи всі типові шаблони маркетингових сторінок.
SEO-компонент (багаторазовий)
Спільний SEO-компонент, прикріплений до кожного типу контенту, надає поля для власного meta title, meta description, перевизначення canonical URL, зображення Open Graph, директив індексування, ключового слова фокусу та опціонального перевизначення структурованих даних — забезпечуючи послідовне управління SEO для всього контенту.
Архітектура фронтенду Next.js
Структура компонентів
Фронтенд слідує багатошаровій архітектурі:
- Блочні компоненти безпосередньо відображаються на записи Strapi Dynamic Zone
- Примітиви інтерфейсу користувача забезпечують послідовні елементи системи дизайну
- Компоненти макета обробляють заголовок, футер та навігацію
- SEO-утиліти генерують структуровані дані та meta tags
Центральний рендерер Dynamic Zone перебирає масив блоків зі Strapi та рендерить відповідний React компонент для кожного запису.
Стратегія отримання даних
Усі маршрути використовують Incremental Static Regeneration (ISR) з ревалідацією за вимогою, що запускається Strapi webhooks. Коли редактор публікує або оновлює контент, Strapi запускає webhook, який ініціює ревалідацію конкретної сторінки, що постраждала, забезпечуючи, що оновлення стають доступними протягом секунд без повних перезбірок.
Впровадження SEO
Технічне SEO
- Метадані для кожної сторінки — Title, description, canonical URL, Open Graph та Twitter Card теги, згенеровані з SEO-полів Strapi з інтелектуальними запасними варіантами
- Автоматизована карта сайту — Програмно генерується з усього опублікованого контенту з відповідною частотою змін та значеннями пріоритету
- Robots.txt — Генерація з урахуванням середовища (production дозволяє сканування, staging блокує його)
- Canonical URLs — Автоматично генеруються з нормалізацією кінцевого слеша, можуть бути перевизначені з CMS
Структуровані дані (JSON-LD)
Автоматична генерація схеми охоплює:
- Організація — Схема для всього сайту з глобальних налаштувань
- Стаття — Публікації в блогах із заголовком, автором, датами та видавцем
- FAQ — Автоматично генерується при використанні FAQ-блоків на сторінці
- Хлібні крихти (Breadcrumb) — Автоматично генеруються з ієрархії шляху URL
- Сервіс — Сторінки послуг з постачальником та областю обслуговування
- Місцевий бізнес — Опціонально, для бізнесів з фізичними розташуваннями
Performance SEO (Core Web Vitals)
- LCP — Hero-зображення попередньо завантажені, Cloudinary автоформат (WebP/AVIF), критичний CSS вбудований, Server Components усувають зайвий клієнтський JS
- CLS — Явні розміри зображень з медіатеки, оптимізоване завантаження шрифтів з size-adjust, скелетні плейсхолдери, контейнери для вбудованих елементів з фіксованими розмірами
- INP — Мінімальний клієнтський JavaScript, легкі інтерактивні обробники, розділення коду для кожного маршруту
Інструменти On-Page SEO
CMS включає підказки для редактора з індикаторами кількості символів для meta fields, валідацію обов'язкових полів, що гарантує, що жодна сторінка не буде опублікована без SEO-метаданих, та автоматичне заповнення SEO-полів з заголовків та уривків контенту з можливістю ручного перевизначення.
Медіа-конвеєр
Зображення, завантажені в Strapi, зберігаються на Cloudinary CDN, при цьому Next.js фронтенд запитує оптимізовані варіанти з автоматичним вибором формату, адаптивним розміром, кешуванням на межі та ледачим завантаженням з розмитими плейсхолдерами для above-fold пріоритетного завантаження.
Ключові особливості
- Конструктор сторінок Dynamic Zone — 12+ компонувальних блоків для створення сторінок без залучення розробника
- Багаторазовий SEO-компонент — Прикріплений до кожного типу контенту для послідовного управління метаданими
- Автоматизовані структуровані дані — JSON-LD для Organization, Article, FAQ, Breadcrumb, Service
- ISR + Webhooks — Оновлення контенту стають доступними за лічені секунди без повних перезбірок
- Програмна карта сайту — Автоматично генерується з усього опублікованого контенту Strapi
- Медіа-конвеєр Cloudinary — Автоматичний формат, адаптивне розмірування, доставка через CDN
- Оптимізовано для Core Web Vitals — Server Components, попереднє завантаження зображень, оптимізація шрифтів, мінімальний JS
- Попередній перегляд чернетки — Кнопка попереднього перегляду Strapi рендерить чернетковий контент у Next.js перед публікацією
- Готово до i18n — Вбудована інтернаціоналізація Strapi для майбутнього розширення на кілька мов
- Направляючі для редактора — Підрахунок символів, обов'язкові поля та підказки щодо ключових слів в адмін-панелі Strapi
Результати
Технологічний Стек
Готові Трансформувати Свій Бізнес?
Давайте обговоримо, як ми можемо застосувати подібні рішення для ваших завдань.