Зміст кейсу
Медіа
Початкові дані
Цілі роботи
- /01Створення інтернет-магазину з урахуванням SEO
- /02Перехід на іншу CMS зі старої MODX
- /03Створення порталу - візитка + каталог + інтернет-магазин
- /04Перенесення товарів
Основні задачі та стратегія
Задачі, які стояли перед командою
- Часткове збереження автентичного дизайну старого сайту.
- Формування прототипів на кожен тип сторінки.
- Розширення структури сайту додатковими сторінками про компанію.
- Розробка структури сайту через Бренд – Колекцію – Товар.
- Розробка вигляду каталогу через Колекції і Товари.
- Розробка інтернет-магазину з візуалом, як у каталогу.
- Розробка «стандартних форматів пакування» для плитки з прив’язкою до товарів.
- Розробка функціоналу прив’язки товарів до картинок в галереї.
- Розробка функціоналу калькулятора з перерахунку кількість плиток, квадратних метрів і пачок на основі пакувальних даних.
- Розробка картка товару для «штучних» товарів.
- Підключення і налаштування SEO-фільтрів.
- Підключення і налаштування функціоналу для фідів і первинної аналітики + e-commerce.
- Формування ТЗ на технічну оптимізацію + генерація метаданих.
- Формування ТЗ на індексацію сайту.
- Перенесення частини товарів.
- Зробити 4 мови сайту – UA, EN, PL, ru.
- Додаткові налаштування функціоналу сайту в залежності від регіону перегляду.
- Сформувати роботу каталогу, візитки, інтернет-магазину через 1 базу даних.
- Зробити простий імпорт цін і акцій через файл за існуючими пропозиціями.
Стратегія і послідовність робіт
Стратегію роботи з даним проєктом було змінено кардинально від простого копіювання та підключення кошик до створення окремого інтернет-порталу з візиткою-каталогом і окремим інтернет-магазином на піддомені. Тому далі будуть описані саме основні напрямки роботи вже по кінцевому варіанту сайту.
Однією з найголовніших задач було правильне розділення сайту за напрямками, організація роботи реклами, пошукового просування і первинна оптимізація сайту під подальше SEO. І це було найскладнішим, оскільки нам треба було не просто розробити магазин, а правильно і логічно розділити структуру сайту, щоб інтернет-магазин ранжувався за своїми ключами, і там працювала реклама, основний сайт-каталог ранжувався по своїм ключам. Це все мало функціонувати як єдина система з однієї бази. Тому найперше, що було зроблено – це продуманий весь функціонал.
Далі була низка важливих задач з розробки структури сторінок:
- товарів для каталогу і для інтернет-магазину;
- категорій в режимі товарів і колекцій;
- сторінок колекції і виробника.
І це все необхідно було розробити з урахуванням всіх останніх тенденцій і трендів, сторінок конкурентів та необхідного функціоналу для ефективного подальшого пошукового просування, щоб в майбутньому кількість доопрацювань була мінімальною.
Також окремо була виконана розробка нестандартних функціональних одиниць:
- калькулятор м2-пачки-штуки на основі даних, вписаних у товар;
- фото галерей з виводом прив’язаних до них товарів у вигляді прев’ю – фото/ціна/назва;
- функціонал стандартних пакувань, які прив’язувались до товару;
- окремо був розроблений функціонал товарів, які продавалися не пачками як плитка, а поштучно;
- ну, і, звичайно, куди ж без seo-фільтру.
На основі цього всього було сформоване ТЗ для програміста на більш, ніж 50 сторінок чисто із функціонування сайту + додаткове ТЗ на врахування нюансів з технічної оптимізації та індексації на 20+ сторінок.
Що було зроблено
SEO на етапі розробки
Все почалося з того, що були проаналізовані конкуренти, щоб зрозуміти основні «тренди» в ніші. Також було проведено дуже детальне брифування клієнта, щоб зрозуміти, який функціонал повинен бути на сторінках і як він повинен працювати. Далі були зібрані всі рекомендації з наявності необхідних блоків на всіх сторінках для просування, їх потенційний вигляд, функціональність, принцип роботи і формування. І на основі цього були зроблені попередні мокапи, чорно-білі прототипи на всі типи шаблонів і передані дизайнерам в роботу.
Наступний напрямок робіт – це формування ТЗ для програміста на базову технічну оптимізацію. В даному ТЗ вказані 90% основних технічних помилок, які ми зустрічаємо на сайтах, і які треба врахувати та не допустити на новому сайті – редіректи, формування і функціонування сторінок пагінації, перелінкування і багато чого іншого. Сюди ж було додане ТЗ для покращення індексації сайту – правильне формування карти сайту, внутрішнього перелінкування, robots.txt і т.д.
Далі були проведені роботи з формування основних задач із базових налаштувань роботи сео-фільтра по основним параметрам, складання списку редіректів зі старого сайту на новий, генерацій мета-тегів на сайті по товарам, категоріям і статичним фільтрам.
Окремим напрямом робіт було формування ТЗ на функціонування всього сайту. Фактично, це ТЗ, на основі якого був об’єднаний Front-end і Back-end. Були описані всі шаблони сторінок за своєю функціональністю. Описані всі необхідні поля всередині адмінки, які повинні бути, щоб користуватися сайтом з точки зору зручності адміністрування і функціонування.
Дизайн
Базовий дизайн сайту був взятий з попереднього сайту, який мав достатньо актуальний і свіжий дизайн, оскільки робився не так давно. Але в старому дизайні було дуже багато непрацюючого і неактуального функціоналу, який був непотрібним. Також в нинішньому дизайні не було великої кількості нових сторінок і блоків, які повинні були реалізовані за новою концепцією. До речі, деякі блоки були перероблені візуально для більш зручного сприйняття.
Спочатку була намальована десктопна версія з урахуванням адаптивності – був обговорений весь функціонал і анімація. Потім сформували мобільну версію з урахуванням максимальної зручності саме для замовлення через мобільний телефон. Після того, як обидві версії були відредаговані і погоджені, був створений проміжний планшетний варіант.
Верстання
На основі готового дизайну було зроблена верстка всіх шаблонних сторінок сайту з повною анімацією і мінімальним функціоналом переходів, щоб відобразити первинну функціональність. Було зроблено 3 розмірних екрани і весь дизайн адаптовано до нестандартних розмірів екранів.
Програмування і Back-end
На основі готової верстки, ТЗ на функціонування сайту, завдань з оптимізації і т.д. було реалізовано роботу сайту на основі CMS OpenCart.
Основними і нестандартними рішення під час розробки сайту були:
- Картинки галереї, на певні області яких можна було прив’язати товар і під час наведення на область було невелике прев’ю товару з картинкою, назвою і ціною, щоб можна було відразу перейти і ознайомитись з ним. Цей функціонал потрібен для тих, хто хоче купувати «готові» рішення і не шукати потім аксесуари в ванну окремо, а плитку окремо.
- Через те, що магазин продає плитку не поштучно, а пачками, потрібно було розробити функціонал перерахунку площі плитки в пачки і штуки, правильно це все рахувати в середині адмінки. Але особливість в тому, що в товарі не було прописаних характеристик. Характеристики пакування були розроблені окремою сутністю, щоб можна було їх присвоювати до багатьох товарів і не заповнювати одне й теж саме постійно.
- Також нестандартний і цікавий функціонал реалізували для відображення категорій по списку товарів і по колекціям, до яких ці товари належать. Функціонально через перемикач було зроблено каталог з товаром і каталог з колекціями. І це все об’єднано під фактично однією адресою, але з урахуванням всіх сеошних вимог.
- І, напевно, вишенькою на торті стала розробка каталогу і інтернет-магазину на одній адмінці з однією базою з можливістю гнучкого управління товарами на обох «сайтах». Тобто, фактична база даних у двох сайтів одна, просто налаштуваннями по кожному конкретному товару можна зробити його відображення та наявність різною. Також на обох сайтах реалізована мультимовність на 3 і 4 мови. Каталог/візитка – українська, англійська, німецька, а на інтернет-магазині додана ще російська (лише для того, щоб органічно і рекламно охопити людей, які шукають російською мовою).
Нижче в таблиці будуть вказані показники з ранжування сайту за ключовими запитами, але треба врахувати, що після розробки на сайті була проведена первинна оптимізація і написання контенту на 10-20 основних категорії. Інші роботи з наповнення відгуками, закупівлі посилань, точкової оптимізації під ключі не було. Тому тут можна вважати, що просування сайту було самостійним.
Результати
На етапі розробки сайту виконано комплексну роботу з урахуванням SEO, дизайну та програмування. Спершу проведено аналіз конкурентів та детальне брифування клієнта, щоб визначити необхідний функціонал сторінок. Створено мокапи і прототипи всіх типів шаблонів для подальшої роботи дизайнерів.
У дизайні враховано адаптивність для десктопу, планшету та мобільних пристроїв, оптимізовано інтерфейси для зручності користувача та перегляду товарів. Верстання виконано з повною анімацією та підготовкою до інтерактивного функціоналу.
На рівні програмування реалізовано нестандартні рішення: інтерактивні галереї з прив’язкою товарів, калькуляція плитки в пачках і штуках, комбінований каталог товарів та колекцій, спільна база для каталогу та інтернет-магазину з різними налаштуваннями відображення. Додано мультимовність (українська, англійська, німецька та російська).
SEO на етапі розробки включало формування технічного ТЗ, редіректи, налаштування карти сайту, внутрішню перелінковку, robots.txt, генерацію метатегів та базову оптимізацію контенту для 10–20 ключових категорій. Решта робіт з контенту та просування будуть проводитися після запуску сайту.
| Параметри | До інтернет-магазину | Через пів року після розробки | Різниця |
|---|---|---|---|
| Ранжованих ключів | |||
| Ранжованих ключів | 0 | 9040 | +9040 ключів |
| Ключів в ТОП-3 | |||
| Ключів в ТОП-3 | 0 | 578 | +578 ключів |
| Ключів в ТОП-10 | |||
| Ключів в ТОП-10 | 0 | 1905 | +1905 ключів |
| Ключів в ТОП-50 | |||
| Ключів в ТОП-50 | 0 | 6405 | +6405 ключів |
Після запуску сайту основна робота буде зосереджена на підвищенні його ефективності та залученні цільового трафіку. Передбачено:
- Наповнення сайту оптимізованим контентом – створення текстів, які відповідають SEO‑вимогам і пошуковим намірам користувачів, оновлення описів товарів та категорій, додавання релевантних ключових запитів.
- Доопрацювання технічних аспектів – перевірка роботи редіректів, внутрішнього перелінкування, швидкості завантаження, коректності мікророзмітки та інших параметрів для безперешкодного індексування сайту.
- Закупівля посилань – робота над авторитетністю сайту через зовнішні ресурси, що покращує позиції у пошукових системах та підвищує довіру користувачів.
- Робота з ранжуванням у LLM і AI‑сервісах – оптимізація контенту для відображення у генеративних пошукових системах, рекомендаціях і AI‑оглядах.
- Ведення блогу – регулярне створення статей, оглядів та корисних матеріалів для підтримки залучення органічного трафіку та розширення тематичного охоплення.
Як наслідок комплексних заходів, очікується збільшення видимості сайту, залучення більшої кількості цільового трафіку та, як результат, зростання кількості замовлень та продажів.
