Вебсайт на Strapi CMS + Next.js з розширеною SEO архітектурою
Зростаючому бізнесу потрібен був швидкий, насичений контентом маркетинговий вебсайт, де їхня нетехнічна маркетингова команда могла б самостійно керувати сторінками, публікаціями в блогах та цільовими сторінками, забезпечуючи при цьому конкурентоспроможне ранжування сайту в органічному пошуку з першого дня.
Обговоріть Ваш Проєкт
Виклик
Існуючий вебсайт був побудований на монолітній CMS, що створювало накопичувані проблеми:
- Низька продуктивність — Сторінки, що рендерилися на сервері, з роздутими плагінами в середньому завантажувалися 4-6 секунд, що негативно впливало на Core Web Vitals
- Вузьке місце для розробників — Кожна зміна контенту (нова цільова сторінка, макет блогу, оновлення CTA) вимагала втручання розробника в файли шаблонів
- Слабка SEO основа — Відсутність структурованих даних, непослідовні мета-теги, відсутність канонічних URL-адрес та відсутність програмної карти сайту призводили до низької органічної видимості
- Негнучка модель контенту — Додавання нового типу контенту (кейс-стаді, FAQ, біографії команди) вимагало міграції схеми та переписування шаблонів
- Відсутність попереднього перегляду — Редактори публікували контент наосліп — без можливості попереднього перегляду змін перед публікацією
- Потреби локалізації — Майбутнє розширення на кілька мов вимагало CMS, яка підтримувала б i18n нативно
Наше Рішення
Ми побудували headless архітектуру на Strapi + Next.js з гнучким шаром моделювання контенту в Strapi, статично згенерований Next.js інтерфейс з ISR для майже миттєвих оновлень та комплексну SEO систему, що охоплює технічну, внутрішню та структуровану оптимізацію даних.
Архітектура
- CMS: Strapi (самохостинговий) з власними типами контенту та Dynamic Zones
- Frontend: Next.js з App Router, React Server Components, TypeScript
- Стилізація: Tailwind CSS з токенами дизайн-системи
- SEO Шар: Next.js Metadata API, генератори JSON-LD, автоматична карта сайту/robots.txt
- Медіа: Бібліотека медіафайлів Strapi з провайдером Cloudinary для оптимізованої доставки
- Хостинг: Vercel (frontend), cloud-hosted Strapi backend, Cloudinary (media CDN)
- База даних: PostgreSQL для зберігання контенту Strapi
- Кеш: ISR з ревалідацією за запитом через вебхуки Strapi
Моделювання контенту в Strapi
Типи контенту
CMS була структурована навколо типів контенту, що охоплюють усі бізнес-потреби: маркетингові сторінки, публікації в блогах з категоріями та авторами, цільові сторінки кампаній, пропозиції послуг/продуктів, біографії членів команди, FAQ, відгуки та синглтон глобальних налаштувань для конфігурації всього сайту.
Dynamic Zones (Конструктор сторінок)
Strapi Dynamic Zones дозволяють редакторам компонувати контент сторінок з повторно використовуваних компонентів — кожен запис зони відображається на React компоненті на frontend'і. Доступні блоки включають герої, сітки функцій, макети текст-із-зображенням, розділи відгуків, CTA банери, FAQ акордеони, лічильники статистики, таблиці цін, сітки логотипів, вбудовані елементи, виділення блогів та контактні форми — охоплюючи всі типові патерни маркетингових сторінок.
SEO компонент (багаторазовий)
Спільний SEO компонент, приєднаний до кожного типу контенту, надає поля для власного мета-заголовка, мета-опису, перевизначення канонічного URL, зображення Open Graph, директив індексування, ключового слова фокусу та опціонального перевизначення структурованих даних — забезпечуючи послідовне управління SEO для всього контенту.
Архітектура frontend на Next.js
Структура компонентів
Frontend має шарову архітектуру:
- Блочні компоненти безпосередньо відображаються на записи Strapi Dynamic Zone
- UI примітиви забезпечують послідовні елементи дизайн-системи
- Компоненти макета обробляють верхній колонтитул, нижній колонтитул та навігацію
- SEO утиліти генерують структуровані дані та мета-теги
Центральний рендерер Dynamic Zone ітерує масив блоків зі Strapi та рендерить відповідний React компонент для кожного запису.
Стратегія отримання даних
Всі маршрути використовують Incremental Static Regeneration (ISR) з ревалідацією за запитом, що запускається вебхуками Strapi. Коли редактор публікує або оновлює контент, Strapi запускає вебхук, який ініціює ревалідацію конкретної зачепленої сторінки, забезпечуючи, що оновлення стають доступними за лічені секунди без повного перезбирання.
Впровадження SEO
Технічне SEO
- Метадані для кожної сторінки — Теги Title, description, canonical URL, Open Graph та Twitter Card генеруються з полів Strapi SEO з інтелектуальними запасними варіантами
- Автоматична карта сайту — Програмно генерується з усього опублікованого контенту з відповідними значеннями частоти змін та пріоритету
- Robots.txt — Генерація з урахуванням середовища (production дозволяє сканування, staging блокує його)
- Канонічні URL-адреси — Автоматично генеруються з нормалізацією кінцевого слеша, що можуть бути перевизначені з CMS
Структуровані дані (JSON-LD)
Автоматична генерація схеми охоплює:
- Організація — Схема для всього сайту з глобальних налаштувань
- Стаття — Публікації в блогах із заголовком, автором, датами та видавцем
- FAQ — Автоматично генерується, коли на сторінці використовуються блоки FAQ
- Хлібні крихти — Автоматично генерується з ієрархії шляху URL
- Послуга — Сторінки послуг із зазначенням постачальника та зони обслуговування
- Місцевий бізнес — Опціонально, для бізнесів з фізичними локаціями
Продуктивність SEO (Core Web Vitals)
- LCP — Зображення героїв попередньо завантажено, автоформат Cloudinary (WebP/AVIF), критичний CSS вбудований, Server Components усувають непотрібний клієнтський JS
- CLS — Явні розміри зображень з медіа-бібліотеки, оптимізоване завантаження шрифтів з size-adjust, плейсхолдери-скелети, контейнери для вбудованих елементів з фіксованими розмірами
- INP — Мінімальний клієнтський JavaScript, легкі інтерактивні обробники, розділення коду для кожного маршруту
Інструменти для внутрішнього SEO
CMS включає рекомендації для редакторів з індикаторами кількості символів для мета-полів, обов'язкову перевірку полів, що гарантує відсутність публікації сторінок без SEO метаданих, та автоматичне заповнення SEO полів з заголовків та уривків контенту з опціями ручного перевизначення.
Медіа-конвеєр
Зображення, завантажені в Strapi, зберігаються на Cloudinary CDN, при цьому frontend на Next.js запитує оптимізовані варіанти з автоматичним вибором формату, адаптивним розміром, кешуванням на периферії та відкладеним завантаженням з розмитими плейсхолдерами для пріоритетного завантаження видимих елементів.
Основні функції
- Конструктор сторінок 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
Результати
Технологічний Стек
caseStudyDetail.more Кейси
Ознайомтесь з іншими нашими технічними впровадженнями
Безголовий WordPress CMS з Next.js, ACF та архітектурою багаторазових компонентів
Бізнесу потрібен був високопродуктивний, SEO-оптимізований маркетинговий вебсайт з гнучкістю редагування контенту WordPress, але зі швидкістю та досвідом розробників сучасного React фронтенду — без обмежень традиційних тем WordPress.
Обробка рахунків-фактур за допомогою AI, OCR та інтеграції з QuickBooks
Середній бізнес, який щомісяця обробляє сотні рахунків-фактур від постачальників, потребував усунення ручного введення даних шляхом автоматичного вилучення даних рахунків-фактур за допомогою AI/OCR та їх прямої синхронізації з QuickBooks для ведення бухгалтерського обліку та відстеження платежів.
Готові Трансформувати Свій Бізнес?
Давайте обговоримо, як ми можемо застосувати подібні рішення для ваших завдань.