Оновили і прискорили сайт Roofmarket та зберегли позиції в пошуку
Послуги: Редизайн, розробка кастомної теми WordPress з ACF, перенесення сторінок, технічна SEO-міграція, оптимізація швидкодії
Сайт залежав від конструктора, а мобільний показник PageSpeed тримався приблизно на рівні 20 балів.
Інтерфейс уже не відповідав актуальній подачі покрівельних матеріалів і вимагав цілісної перебудови, а не окремих косметичних змін.
Під час технічної перебудови потрібно було зберегти всі сторінки, їхні адреси та накопичені позиції в пошуку.
Редагування сторінок вимагало роботи безпосередньо з блоками Elementor, що ускладнювало подальшу підтримку сайту.
Оновили дизайн із фокусом на чисту візуальну мову, сучасний стиль і підвищення довіри клієнтів.
Структуровані поля відокремили наповнення сторінок від верстки й спростили щоденне оновлення інформації.
Відтворили сторінки, товарні матеріали та інформаційні розділи в новій темі без скорочення структури сайту.
Міграцію провели без зміни важливих адрес сторінок і втрати вже накопиченої пошукової видимості.
Перебудували візуальну систему, товарну подачу та навігацію відповідно до сучасного сценарію вибору покрівельних матеріалів.
Після переходу на кастомну тему показник PageSpeed на смартфоні зріс із приблизно 20 до 86 балів.
Оновлення без втрати впізнаваності Roofmarket
- Зберегли темну основу та червоні акценти бренду
- Перебудували ієрархію заголовків і комерційних повідомлень
- Скоротили кількість декоративних елементів
- Уніфікували типографіку, відступи та розміри кнопок
Roofmarket уже мав сформований візуальний образ, тому редизайн не починали з чистого аркуша. Впізнавані кольори й характер бренду зберегли, але подачу зробили стриманішою, послідовнішою та зручнішою для розширення сайту.
Що потрібно було зберегти після редизайну
- Звичний поділ асортименту на товарні напрями
- Швидкий доступ до популярних категорій
- Зрозуміле розташування контактів і меню
- Впізнавані елементи бренду
Сайт уже мав постійну аудиторію та накопичену структуру. Редизайн не повинен був змушувати відвідувачів заново вивчати навігацію або шукати звичні розділи в нових місцях.
Що змінили в новому інтерфейсі
- Чіткіше розділили навігацію, контент і товарні пропозиції
- Побудували єдину послідовність заголовків і секцій
- Прибрали візуально перевантажені блоки старої версії
- Закріпили однакові принципи взаємодії на різних сторінках
Категорії, які скорочують шлях до потрібного матеріалу
-
Кожен напрям має окрему точку входу
Покупець починає перегляд із потрібного типу покрівлі, а не із загального переліку товарів.
-
Зображення пояснює категорію до прочитання
Візуальний приклад показує форму й характер матеріалу ще до переходу в каталог.
-
Назви залишаються короткими й однозначними
Відвідувач швидко розрізняє напрями та не витрачає час на розшифрування професійних формулювань.
-
Єдина структура спрощує порівняння
Усі категорії оформлені за спільним принципом, тому наступний крок залишається передбачуваним.
Компонентна система замість окремих макетів Elementor
- Повторювані секції працюють за єдиним шаблоном Заголовки, зображення, списки та кнопки зберігають однакову структуру на різних сторінках.
- Контент не впливає на верстку Заміна тексту або фотографії не порушує відступи, пропорції та розташування сусідніх елементів.
- Нові сторінки збираються з готових компонентів Сайт розширюється без створення окремого дизайну для кожного нового розділу.
- ACF-поля зберігають структуру під час редагування Команда працює з визначеними полями й не змінює макет безпосередньо в конструкторі.
Компонентний підхід об’єднав дизайн і систему керування. Сторінки залишаються візуально послідовними незалежно від обсягу контенту, а подальші оновлення не вимагають щоразу відновлювати структуру вручну.
Довгі SEO-сторінки без перевантаження читача
-
Вступ одразу пояснює тему сторінки
Відвідувач розуміє, який матеріал або послугу розглядає, ще до переходу до деталей.
-
Підзаголовки ділять контент на окремі питання
Великі текстові матеріали читаються частинами, а не виглядають суцільним полотном.
-
Характеристики винесені у структуровані блоки
Технічні параметри не губляться всередині описового тексту й швидко знаходяться під час перегляду.
-
Товарні модулі продовжують інформаційний сценарій
Після пояснення матеріалу відвідувач переходить до відповідної категорії або конкретних позицій.
Звернення вбудоване в логіку вибору
- Кнопки з’являються після ключових аргументів Відвідувача не змушують залишати контакт до знайомства з пропозицією.
- Консультація доповнює самостійний вибір Покупець звертається до менеджера, коли потрібно уточнити характеристики або сумісність матеріалів.
- Форми містять лише необхідні поля Для першого контакту достатньо залишити дані для зворотного зв’язку без довгого опитування.
- Формулювання дій пояснюють наступний крок Відвідувач розуміє, чи переходить він до консультації, розрахунку або уточнення характеристик.
Сайт не намагається замінити технічну консультацію. Він структурує асортимент, показує відмінності між матеріалами та збирає достатньо контексту, щоб подальша комунікація починалася вже з конкретного запиту.
Після переходу на кастомну тему мобільний показник зріс із приблизно 20 до 86 балів.
Увесь наявний контент відтворили в новій темі без скорочення структури сайту.
Під час міграції сайт не втратив чинні адреси сторінок і накопичені позиції в пошуку.
Нові сторінки працюють на власній темі WordPress без універсального конструктора в технічній основі.
Тексти, зображення та параметри редагуються у структурованих полях без втручання у верстку.
Оновлений дизайн об’єднав навігацію, товарну подачу та точки звернення за спільною логікою.
// Як оновити цифровий актив, не починаючи його історію заново
Чинний сайт має цінність, якої не видно на макетах. Це проіндексовані сторінки, накопичені пошукові позиції, опублікований контент і зв’язки між матеріалами. Під час масштабного оновлення все це легко втратити, навіть якщо нова версія виглядає сучасніше й працює швидше.
Саме тому Roofmarket не розглядали як проєкт із чистого аркуша. Завдання полягало в тому, щоб замінити технічну основу, не обнуливши вже створений ресурс. Нова версія мала продовжити історію чинного сайту, а не відкрити її заново.
Роботу будували навколо принципу безперервності. Для пошукових систем, контенту та структури це залишався той самий сайт, але всередині він переходив на іншу модель розробки й керування. Такий підхід зняв головний ризик повного перезапуску — втрату результатів, накопичених до початку робіт.
Візуальне оновлення стало зовнішнім шаром глибшої перебудови. Новий дизайн уже не залежить від випадкового набору блоків і окремих рішень на кожній сторінці. Він працює як єдина система, яку можна послідовно розширювати без розривів у стилі та логіці.
Після міграції сайт отримав контрольовану технічну основу. Команда може працювати з контентом окремо від верстки, а нові розділи не вимагають щоразу відтворювати структуру вручну. Це скорочує технічний борг і спрощує подальший розвиток проєкту.
Головний результат Roofmarket — збережений цифровий капітал із новим запасом міцності. Сайт продовжив працювати зі своєю історією, контентом і пошуковою видимістю, але вже на основі, розрахованій на наступні етапи розвитку.
// Рішення, використані для оновлення Roofmarket
Замість сотень пунктів меню і зайвих полів — тільки те що потрібно вашій команді. Кожна роль бачить свій інтерфейс, масові дії виконуються за кліки, а не за хвилини
Зображення стискаються на 60–80% без втрати якості, сторінки вантажаться миттєво, Google ранжує вище — і все це без участі менеджера
Модуль генерує унікальні SEO-сторінки для пріоритетних комбінацій фільтрів каталогу — «купити червоні кросівки Nike розмір 42» стає окремою сторінкою що ранжується в пошуку
