Содержание кейса
Медиа
Начальные данные
Цели работ
- /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.
Основными и нестандартными решениями при разработке сайта были:
- Картинки галереи, к определенным областям которых можно было привязать товар, и при наведении на область появлялось небольшое превью товара с картинкой, названием и ценой, чтобы можно было сразу перейти и ознакомиться с ним. Этот функционал нужен для тех, кто хочет покупать «готовые» решения и не искать потом аксессуары в ванную отдельно, а плитку отдельно.
- Из-за того, что магазин продает плитку не поштучно, а пачками, нужно было разработать функционал пересчета площади плитки в пачки и штуки, правильно это все считать в середине админки. Но особенность в том, что в товаре не было прописанных характеристик. Характеристики упаковки были разработаны отдельной сущностью, чтобы можно было их присваивать ко многим товарам и не заполнять одно и то же постоянно.
- Также нестандартный и интересный функционал реализовали для отображения категорий по списку товаров и по коллекциям, к которым эти товары относятся. Функционально через переключатель был сделан каталог с товаром и каталог с коллекциями. И все это объединено фактически под одним адресом, но с учетом всех SEO-требований.
- И, наверное, вишенкой на торте стала разработка каталога и интернет-магазина на одной админке с одной базой с возможностью гибкого управления товарами на обоих «сайтах». То есть, фактическая база данных у двух сайтов одна, просто настройками по каждому конкретному товару можно сделать его отображение и наличие разным. Также на обоих сайтах реализована мультиязычность на 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-обзорах.
- Ведение блога – регулярное создание статей, обзоров и полезных материалов для поддержания привлечения органического трафика и расширения тематического охвата.
В результате комплексных мер ожидается увеличение видимости сайта, привлечение большего количества целевого трафика и, как следствие, рост количества заказов и продаж.
