SEO на етапі розробки сайту та співпраця з розробниками: запуск магазину Choicy

Компаніям, які інвестують в онлайн-продажі, надважливо швидко пройти етап розробки та запуску проєкту. Але щоб новий сайт отримав свій перший перехід із Google, потрібно, щоб над ним попрацювала команда фахівців. І швидкість виходу в ТОП залежить від того, чи зможуть об’єднатися розробники та SEO-спеціалісти. І спільна робота над проєктом — створення та просування інтернет-магазину  Choicy.com.ua — показала, наскільки необхідною є синергія між цими двома командами.

Фахівці Elit-Web зайшли в проєкт і почали працювати паралельно із розробниками з  Lonch.digital. Така співпраця сприяла тому, що був створений онлайн-майданчик Choicy.com.ua, готовий до індексації, швидкого зростання та конкурентної боротьби у ніші.

Чому важливо готувати сайт на етапі розробки

Дуже часто робота SEO-спеціаліста полягає в тому, що йому доводиться вносити технічні корективи у готові проєкти. Відповідно, це вимагає більше ресурсу. Набагато ефективніше працювати з розробниками й обговорювати разом, якою буде структура сайту, як пропрацювати параметри юзабіліті та вирішити одразу багато інших питань.

Під час запуску Choicy.com.ua ця різниця відчувалась із першого робочого дня. Особливість проєкту полягала в тому, що компанія пропонувала споживачам багато товарів в абсолютно різних категоріях. Саме тому SEO-фахівцям було необхідно на старті спланувати таку структуру, яку можна легко масштабувати чи змінювати (наприклад, додавати нові розділи). Також потрібно було ретельно опрацювати фільтри, щоб не втрачати трафік і досягти збільшення продажів.

Найголовнішим завданням команди Elit-Web стало закладання грамотної структури та технічної бази так, щоб потім нічого не довелося виправляти. Бо лише на перший погляд здається, що легко змінювати структуру категорій або перелаштовувати навігацію. Але індексація сайту в пошуку та поведінкові фактори напряму залежать від цих параметрів.

Ще одна вагома причина, чому важливо займатися SEO на етапі розробки, — це оптимізація бюджету. Замість того щоб через пів року займатися внутрішньою технічною оптимізацією, бізнес один раз готує якісну основу й отримує довгострокову економію.

І третя причина — темпи зростання. Сайт, який був одразу створений під вимоги Google, стартує зовсім по-іншому. У Choicy ми побачили, що сторінки почали потрапляти в індекс одразу після запуску. До того ж SEO на етапі розробки робить сайт зручним для людей. Бо якщо користувач легко знаходить товар, безпомилково рухається по структурі й отримує швидку відповідь, він повертається. А значить — зростають продажі.

Особливості проєкту Choicy.com.ua

Choicy.com.ua — це сучасний торговий майданчик, побудований навколо ідеї відповідального споживання та надання продукції другого життя. Компанія працює у сфері відновлених електронних пристроїв і робить їх доступними для українців, водночас зменшуючи кількість відходів. Проєкт має чітку місію — змінити культуру використання ґаджетів і показати, що якісна техніка не обов’язково має бути новою, щоб служити довго.

Основною задачею проєкту стало створення платформи, яка здатна презентувати філософію бренду та забезпечити зростання онлайн-продажів. Від спеціалістів очікували, що на вебресурсі користувач зможе швидко знайти потрібний пристрій, оцінити його характеристики, ознайомитися з умовами Trade-In, замовити та купити ґаджет.

Перед командами розробників і SEO-фахівців були поставлені такі цілі:

• підкреслити відповідальну місію компанії та її внесок у зменшення електронних відходів;
• показати прозорість і високу якість перевірених ґаджетів;
• розкрити широкий асортимент техніки й особливості сервісу компанії;
• створити інтуїтивно зрозумілий шлях користувача;
• продемонструвати експертність бренду та чесні умови співпраці.

Для реалізації цих завдань над Choicy працювали разом дві команди. Розробники з агенції Lonch.digital займалися створенням сучасного сайту, який поєднав би інтуїтивний інтерфейс, естетику та сервісну логіку. А SEO-спеціалісти Elit-Web супроводжували проєкт на етапі розробки. Команда відповідала за технічну оптимізацію, формування шаблону метатегів для всіх типів сторінок, збір семантичного ядра, розробку шаблонів контенту та підготовку майданчика до просування одразу після запуску.

У результаті Choicy.com.ua отримав платформу, яка вже на старті відповідала вимогам Google та відображала суть бренду.

Як розробники Lonch.digital реалізували проєкт

Розробка проєкту Choicy.com.ua стала для фахівців Lonch.digital багаторівневим процесом, у якому команда поступово вибудовувала фундамент майбутнього інтернет-магазину з потенціалом розвитку до маркетплейсу.

Основні етапи роботи команди розробників

Робота почалася із фази Discovery, у процесі якої розробники зібрали бізнес-вимоги, сформували детальний wireframe та підготували технічне завдання.

Після цього команда перейшла до основної розробки та реалізувала ключові модулі відповідно до технічного завдання. Паралельно створювався і додатковий функціонал, який виходив за рамки початкового ТЗ, але був критичним для зручної роботи Choicy. Одним із важливих складників цього етапу стало написання технічної API-документації, необхідної для коректної інтеграції сайту з CRM-системою замовника.

Одночасно команда взяла на себе координацію роботи зовнішніх спеціалістів і окремих фахівців із дизайну. Після розвитку основних модулів розробники забезпечили наповнення сайту контентом.
Далі команда продовжила працювати над окремими завданнями з основного ТЗ, які не були критичними для роботи магазину.

Технологічний стек проєкту

Для забезпечення стабільності, швидкості та масштабованості було використано сучасний технологічний стек.

Back-end:

• Laravel 11 (PHP 8.4);
• Livewire 3;
• основні пакети — Spatie Permission, Spatie Sitemap, Astrotomic Translatable, mcamara Localization, Intervention Image, Imagick, Firebase JWT, Socialite + Apple Provider, Doctrine DBAL.

Фронтенд:

• Blade + Livewire;
• Vite (збірка JS/CSS).

База даних і кеш:

• MySQL — основна база даних;
• Redis — кеш і черги.

Інфраструктура та деплой:

• Docker — контейнеризація сервісів;
• Dokploy — CI/CD, керування деплоєм, secrets/env;
• Ubuntu 24.04 — базовий runtime для застосунку;
• Nginx — основний вебсервер;
• PHP-FPM 8.4 — виконання PHP-коду.

Хмарні бекапи:

• Wasabi Cloud (S3-compatible) — зберігання бекапів, snapshot-архівів і файлів storage,
• інтеграція через S3 API / rclone.

Сервіси й утиліти:

• Imagick і Ghostscript — обробка зображень і PDF;
• Apache2-utils (.htpasswd) — Basic Auth для службових доступів;
• Guzzle (Laravel HTTP Client) — API-інтеграції.

Автоматизація:

• entrypoint.sh — міграції, optimize, очищення кешу, storage:link, копіювання robots.txt;
• composer scripts — автоконфігурації, dev-режим;
• npm/Vite — збірка фронтенду.

Особлива частина проєкту — інтеграція API з CRM

Найцікавішою, найвідповідальнішою та найскладнішою для команди розробників була задача побудови та реалізації інтеграції API з CRM. Це рішення дозволило синхронізувати всі процеси, пов’язані з товарами, замовленнями, статусами та їх координацією без необхідності змін в адмінпанелі сайту. Систему побудували так, щоб сайт продовжував стабільно працювати навіть при тимчасовій втраті зв’язку з CRM.

Такі рішення команда втілювала не вперше. Цей блок став водночас фундаментом усього проєкту, а також досить об’ємною та цікавою задачею.

У результаті замовник отримав:

• повноцінний інтернет-магазин з можливістю масштабування проєкту до маркетплейсу, захищений внутрішніми системами безпеки framework Laravel (у перспективі команда забезпечить більше захисту);
• детальну технічну документацію по API-інтеграції з CRM.

Як висновок — перші продажі та перші схвальні відгуки про зручне користування.

Базові SEO-роботи на етапі створення сайту

Робота SEO-фахівців з нашої компанії розділилася на кілька напрямів.

Аналітика й участь у проєктуванні майбутньої структури

Перш за все наші спеціалісти проаналізували основних конкурентів у ніші, а також визначили їхні сильні та слабкі сторони. На основі цього підготували рекомендації щодо:

• розробки оптимальної структури сайту, яка враховувала специфіку товарів, майбутні розділи за категоріями та потенційне зростання проєкту до масштабного маркетплейсу;
• параметрів юзабіліті;
• технічної оптимізації;
• впровадження додаткового функціоналу на сайті;
• реалізації мультимовності сайту.

Технічна підготовка та формування семантики

Після етапу проєктування ми перейшли до технічної основи. Було створено:

• robots.txt, адаптований під майбутню структуру;
• sitemap.xml, що охоплював усі ключові типи сторінок;
• карту XML для контролю індексації;
• рекомендації щодо додаткового функціоналу.

У міру того, як розробники впроваджували правки, SEO-фахівці постійно контролювали коректність реалізації. Це дозволило уникнути переробок і переписування модулів уже після запуску.

Паралельно з технічним контролем наші спеціалісти почали працювати зі змістом. Було зібрано семантичне ядро та підготовлено технічні завдання на тексти для перших 20 сторінок (по 10 протягом кожного місяця).

Оптимізація індексації та метаданих

На рівні архітектури було визначено:

• канонічні URL;
• правила індексації сторінок пагінації;
• структуру та логіку хлібних крихт.

Також наші спеціалісти підготували та частково реалізували:

• шаблони метатегів для всіх типів сторінок;
• окремі метатеги для службових і пріоритетних сторінок (у межах бонусу).

Це дозволило запустити проєкт без порожніх Title та Description.

Перед запуском проєкту наші фахівці провели фінальну діагностику:

• додали та налаштували Google Webmaster та Google Analytics;
• перевірили коректність всіх редиректів;
• протестували індексацію, перелінкування та роботу фільтрів;
• провели остаточну перевірку параметрів юзабіліті.

Щомісяця замовник отримував детальні звіти, які відображали прогрес робіт, статус реалізації рекомендацій і готовність сайту.

Які вигоди отримала компанія Choicy завдяки інтеграції SEO на етапі розробки

Перші результати співпраці команди розробників та SEO-фахівців з’явилися одразу після запуску. Сайт швидко пройшов індексацію, а також не було технічних збоїв, які часто переслідують нові проєкти. Споживачі заходили на сайт, користуючись зручним інтерфейсом і логічною структурою. Це одразу позначилося на поведінкових метриках.

Оскільки базові SEO-вимоги були враховані ще на стадії розробки, Choicy не довелося витрачати додаткові бюджети на доробку сайту. Технічний фундамент був закладений правильно.

Серед ключових вигод, які отримав проєкт:

• стабільне зростання органічного трафіку;
• помітна економія бюджету;
• довіра аудиторії та перші схвальні відгуки;
• міцний фундамент для масштабування.

По суті, SEO на етапі розробки стало для Choicy точкою прискорення. Таким чином правильні рішення, ухвалені на старті, визначили успіх проєкту.