SEO-кейс: Міграція з WordPress на SPA – виклики та рішення
Компанія спеціалізується на продажу автомобільних дисків і покришок, а також надає послуги з встановлення, заміни та обслуговування коліс через мережу СТО в різних містах Канади. Сайт поєднує функціонал інтернет-магазину та сервісного бізнесу, орієнтуючись на власників автомобілів, які шукають як продукцію, так і професійне обслуговування. У межах розвитку проєкту було здійснено міграцію сайту з WordPress на SPA-архітектуру, що вимагало адаптації SEO-стратегії до нових технічних умов
— Зберегти органічний трафік і позиції сайту під час міграції з WordPress на SPA
— Забезпечити коректну індексацію SPA-сайту пошуковими системами
— Мінімізувати ризики втрати видимості та трафіку після переходу
— Адаптувати SEO-стратегію під нову архітектуру сайту
— Створити основу для подальшого масштабування органічного трафіку
Продаж автомобільних дисків і покришок, а також послуги СТО з обслуговування коліс
З травня 2024 року по теперішній час
Канада
Вихідні дані
У роботі RegisTeam є проєкт, з яким команда тривалий час співпрацює в рамках SEO-просування та демонструє стабільну позитивну динаміку. Детальніше ознайомитися з попереднім етапом розвитку проєкту і нашим кейсом можна за посиланням.
Важливо зазначити, що сайт не є класичним інтернет-магазином. Він функціонує як каталог товарів, де користувачі можуть ознайомитися з асортиментом автомобільних дисків і покришок, але без можливості оформлення покупки онлайн.
На сайті представлені товарні сторінки з описами продукції, однак відсутній повноцінний e-commerce-функціонал (кошик, оформлення замовлення), що впливає на поведінкові фактори та конкурентоспроможність у пошуковій видачі.
Попередні результати динамикі трафика:
Попередня динаміка зростання ключових слів:
Що таке SPA та чому виникають складнощі з SEO?
SPA (Single Page Application) — це тип веб-додатків, у якому весь інтерфейс працює в межах однієї сторінки, а контент динамічно підвантажується за допомогою JavaScript без повного перезавантаження.
З точки зору користувача це забезпечує швидку роботу сайту та плавну навігацію. Проте для пошукових систем така архітектура створює низку технічних складнощів.
Основна проблема полягає в тому, що пошукові боти спочатку отримують базовий HTML, який часто не містить повного контенту. Значна частина інформації з’являється лише після виконання JavaScript, а це ускладнює процес сканування та індексації сторінок.
Серед ключових причин, чому SPA-сайти складніші для SEO:
- контент формується динамічно і може бути недоступний для ботів
- пошукові системи обмежено обробляють JavaScript
- бот не взаємодіє зі сторінкою (не клікає, не скролить)
- можливі затримки або неповний рендеринг сторінок
- складніше реалізувати повноцінну структуру URL і перелінковку
У результаті без додаткової технічної оптимізації SPA-сайти можуть втрачати частину контенту в індексі, що негативно впливає на видимість і позиції в пошуковій видачі.
Рішення перейти на SPA
На певному етапі розвитку проєкту власники прийняли рішення про повноцінний перехід на SPA-архітектуру як основу для подальшого масштабування сайту.
Однією з ключових причин стало обмеження поточної структури каталогу. Раніше одна картка товару об’єднувала в собі інформацію про різні розміри, варіації та типи продукції без можливості вибору конкретного товару або оформлення замовлення. Такий підхід ускладнював як користувацький досвід, так і подальший розвиток сайту.
Приклад попередньої реалізації товароної картки на WordPress:
Для вирішення цього завдання було необхідно розділити товари на окремі сторінки — кожна модель, розмір і варіація повинні були отримати власну картку. Це, у свою чергу, призводило до кратного збільшення кількості сторінок і значного ускладнення структури сайту.
У цьому контексті SPA-архітектура розглядалася як рішення, що дозволяє:
- ефективно працювати з великою кількістю динамічних сторінок
- забезпечити швидке завантаження та взаємодію з каталогом
- реалізувати гнучку фільтрацію, сортування та навігацію
- підготувати основу для подальшого масштабування функціоналу
Крім того, SPA дає змогу створити більш сучасний і зручний інтерфейс, наближений до логіки роботи мобільних застосунків, що є важливим фактором для користувачів у конкурентній ніші.
Попри те, що SPA-архітектура традиційно вважається складнішою для SEO через особливості рендерингу та індексації, у цьому випадку пріоритетом стало створення масштабованого продукту з покращеним користувацьким досвідом. SEO-обмеження при цьому були враховані як окремий виклик, який потребує технічних рішень і адаптації стратегії просування.
Приклад поточної реалізації товарної картки на JS:
Проблематика після переходу на SPA
Після переходу на SPA-архітектуру проєкт зіткнувся з низкою технічних викликів, які безпосередньо вплинули на індексацію, видимість сайту та органічний трафік.
Основна складність полягала в тому, що SPA змінює принцип взаємодії сайту з пошуковими системами контент формується не на сервері, а в браузері користувача через JavaScript. Це створює обмеження для коректного сканування та індексації сторінок.
Проблеми індексації та рендерингу
– Пошукові боти отримували неповний або порожній HTML, оскільки основний контент підвантажувався через JavaScript
– Частина сторінок не індексувалася або індексувалася некоректно
– Виникали затримки рендерингу, через що бот міг не дочекатися повного завантаження сторінки
– При складному або невалідному JavaScript частина контенту не оброблялася
Кількість сторінок вне індексу за данними GSC:
Проблеми з контентом
– Контент був відсутній у вихідному HTML
– Частина важливих SEO-блоків (тексти, мета-теги) підвантажувалася динамічно
– Некоректне відображення контенту для ботів впливало на релевантність сторінок
Проблеми з аналітикою
– Стандартні системи аналітики не фіксували переходи між сторінками
– Дані були неповними через відсутність перезавантаження сторінок
– Потрібна була додаткова натройка через History API або Tag Manager
Динаміка коливання трафіку по різним каналам за даними GA4:
Проблеми продуктивності
– Велика кількість JavaScript уповільнювала завантаження
– При повільному рендерингу бот не отримував повний контент
– Це негативно впливало на SEO та поведінкові фактори
Аналіз продуктивності сторінок за наними GSC:
Перехід на SPA зробив сайт більш гнучким і зручним для користувача, але значно ускладнив взаємодію з пошуковими системами. Без додаткових технічних рішень це призводить до проблем з індексацією, втрати видимості та зниження органічного трафіку.
У результаті після переходу сайт почав швидко втрачати позиції в пошуковій видачі, що напряму вплинуло на падіння органічного трафіку.
Динаміка органічного трафіку за даними Ahrefs:
Динаміка позицій ключових слів за данними SE Ranking:
Динаміка кількості ключів в органічній видачі за даними Ahrefs:
Що ми зробили для вирішення проблем SPA-сайту?
Ключовим завданням стало забезпечення коректної індексації контенту SPA-сайту та відновлення видимості в пошукових системах. Основний акцент було зроблено на зміні підходу до рендерингу та доступності контенту для пошукових ботів.
Впровадження серверного рендерингу (SSR)
Основним рішенням стало впровадження серверного рендерингу (SSR), що дозволило формувати HTML-версію сторінки ще на стороні сервера.
Це дало можливість:
- передавати пошуковим ботам повноцінний HTML з контентом
- забезпечити коректне сканування та індексацію сторінок
- зменшити залежність від виконання JavaScript
- прискорити перше завантаження сторінки
У результаті пошукові системи почали отримувати не «порожній» шаблон, а вже готову сторінку з усіма необхідними SEO-елементами.
Формування контенту в HTML
Було критично важливо перенести ключові елементи сторінок у серверний HTML:
- тексти та основний контент сторінок
- заголовки (H1–Hn)
- мета-теги (Title, Description)
- внутрішні посилання
Це забезпечило:
- доступність контенту без виконання JavaScript
- коректне визначення релевантності сторінок
- покращення індексації нових сторінок
Оптимізація JavaScript
- зменшено обсяг JS
- оптимізовано швидкість виконання скриптів
- усунуто помилки, що заважали рендерингу
Це знизило ризик втрати контенту під час обробки сторінок ботами.
Налаштування аналітики
- впроваджено відстеження через History API
- налаштовано коректну роботу Google Analytics через Tag Manager
Це дозволило отримувати точні дані про поведінку користувачів після переходу на SPA.
Динаміка зростання органічного трафіку за данними GA4:
Результати після впровадження
Органічний трафік
Особливо важливим є відновлення органічного каналу:
- Користувачі з органічного пошуку: 30 708 (+9,92%)
- Нові користувачі: +8,82%
- Середній час взаємодії: +36,58%
- Кількість подій: +389%
Зростання органічного трафіку після падіння підтверджує, що впроваджені технічні рішення дозволили пошуковим системам коректно індексувати сайт і повертати його у видачу.
Динаміка кліків за данними GSC за останні 3 місяці:
Поведінкові фактори
- Користувачі стали проводити більше часу на сайті
- Зросла глибина взаємодії (сеанси та події)
- Покращилась якість трафіку з органіки
Це свідчить не лише про відновлення видимості, а й про покращення користувацького досвіду.
Динаміка зростання ключових слів:
Розподіл ключових слів за позиціями демонструє позитивну динаміку зростання видимості сайту.
Кількість запитів у ТОП-1 зросла до 19 (+13), що свідчить про посилення лідерських позицій за пріоритетними ключами. Також спостерігається зростання у зонах ТОП-2–3 та ТОП-6–10, що вказує на поступове просування запитів у верхню частину видачі.
Особливо важливим є збільшення кількості ключових слів у діапазоні 11–30 позицій (+24) та 31–100 (+44), що формує потенціал для подальшого зростання та виходу цих запитів у ТОП-10.
Загалом, динаміка підтверджує відновлення позицій після технічних змін та створює основу для подальшого масштабування органічного трафіку:
Підсумки
Після впровадження змін спостерігається зростання основних показників трафіку: кількість сесій досягла 1 млн, користувачів — 946,7 тис., а переглядів — 1,9 млн.
Значно зросла кількість залучених сесій (162,4 тис.) та конверсій (27,6 тис.), що свідчить про підвищення ефективності сайту.
Водночас показники залученості (engagement rate та середній час взаємодії) знизилися, що може бути пов’язано зі зміною структури трафіку та збільшенням частки нових користувачів (99,47%).
Загалом динаміка підтверджує масштабування трафіку та зростання бізнес-показників після впровадження технічних рішень.
Динаміка ключових показників сайту за даними Ahrefs:
Дані Ahrefs демонструють різке зростання всіх ключових SEO-показників, що свідчить про активне відновлення та масштабування проєкту після технічних доопрацювань.
Сайт почав отримувати згадки в AI-системах (ChatGPT, Perplexity, Gemini, Copilot), що формує новий канал видимості та підтверджує зростання авторитетності ресурсу.
Посилальний профіль суттєво посилився: кількість беклінків зросла до 594 (+571), а кількість доменів-донорів — до 148 (+142). Це позитивно вплинуло на авторитет сайту (DR +4, UR +9) та загальну довіру з боку пошукових систем.
У пошуковій частині зафіксовано значне зростання: сайт отримав понад 1000 органічних ключових слів, з яких 223 вже знаходяться в ТОП-3, що є сильним сигналом відновлення позицій. Органічний трафік досяг 4K, а його цінність оцінюється в $1.3K.
Загалом, динаміка підтверджує, що технічна SEO-оптимізація, робота з контентом і лінкбілдингом дали комплексний ефект: сайт не лише відновився після просідання, а й почав активно нарощувати авторитет, видимість і точки входу трафіку.
Проєкт наразі перебуває на етапі активного відновлення. Попри досягнуті результати, ще зберігаються окремі проблеми з індексацією, швидкістю роботи сайту та позиціями у видачі.
Водночас поточна динаміка свідчить про правильний напрямок робіт: сайт поступово повертає видимість, нарощує трафік і формує основу для подальшого зростання.
Отримайте такий самий результат із RegisTeam!

