Интернет-магазин на Opencart под ключ по пчеловодству

Аудит проекта

Прежде чем приступить к работе, мы тщательно изучили текущий магазин клиента и проанализировали две предыдущие версии сайта. В открытом веб-архиве Wayback Machine удалось найти лишь главную страницу даже не прошлой версии сайта, а варианта сайта до нее, и отдельные снимки за 2022 и более ранние годы, а полноценного архива последней версии, той самой, после обновления которой начались проблемы, там не оказалось.

Основной и наиболее ценный анализ мы провели на живых копиях обеих предыдущих версий, которые на момент аудита ещё сохранялись на хостинге клиента. Это дало нам возможность изучить проект в его реальном состоянии, а не по фрагментарным снимкам. К моменту подготовки кейса эти копии были уже удалены, после того как новый сайт успешно занял их место.

Выяснились следующие проблемные моменты:

• Изначально проект был собран на Opencart, и имел только русскую версию (на скрине - внешний вид магазина из Вебархива);

• При обновлении магазина программист реализовал псевдодвуязычность: контент в системе существовал на двух языках в админке, однако каждая языковая версия страницы не имела собственного URL. При этом, согласно требованиям законодательства, основной языковой версией сайта была сделана украинская, поэтому Google видел только украинский контент.
• При смене языка, не были настроены редиректы, а все URL полностью изменились. В результате в поиске индексировался только украиноязычный контент, и все накопленные позиции проекта были попросту утеряны. Страница на русском языке, не имея собственных URL, не могли ни сохранить старые позиции, ни занять новые.
• Нужно было исправлять скорость сайта, так как ряд страниц был в красной зоне, что плохо как для контекстной рекламы, так и для SEO.
• Фильтрации в магазине, как и в его предыдущей версии, не было - все делалась за счет категорий, поэтому пользоваться сайтом было не совсем удобно, хотя несколько топовых конкурентов в нише делают аналогично;

• Дополнительно с точки зрения SEO нужно было делать много правок: замена шаблонов метаданных, настройки правильного формирования страниц пагинации, и много других технических мелочей.
• У проекта были ошибки в верстке адаптивной версии сайта, и нужно было внимательно высматривать это на основных диагоналях экрана и точечно исправлять проблемы;
• Самая критическая проблема клиентского интернет-магазина на Опенкарте, которая мешала продажам - неправильная работа Корзины. При добавлении товара в корзину его количество менялось хаотично и непредсказуемо: вместо одной позиции в корзину могло попасть пять, в следующий раз - десять, и никакой видимой логики в этом не было. Пользователи видели неверное количество товаров, не понимали, что делать, и уходили, не оформив заказ.

Выбор СMS для интернет-магазина - важная и непростая задача. Клиент рассматривал смену движка с OpenCart на Prestashop, если вдруг понадобится все таки разработка с нуля. Однако в магазине всего 1000 товаров, и увеличивать ассортимент в десятки раз не планировалось. Учитывая, что старт разработки на Presta обходится заметно дороже, смена движка была признана нецелесообразной.

В итоге было решено делать новый магазин на Opencart, как и его исходная версия. Эта CMS в связке с проверенными модулями и накопленными нами наработками - это оптимальный баланс между скоростью запуска и широкими возможностями для SEO-продвижения.

Целевая аудитория проекта

Мы выделили три основных сегмента целевой аудитории.

• Пчеловоды-любители - владельцы небольших пасек от 2 до 10 ульев, для которых пчеловодство является хобби или источником дополнительного дохода. Они ценят готовые решения, понятные описания товаров и надежность базового оборудования: ульев, дымарей, вощины.
• Профессиональные пчеловоды (фермеры) - владельцы средних и крупных пасек, для которых это основной бизнес. Их интересует производительное оборудование - автоматические медогонки, декристаллизаторы мёда и подобное, - а также возможность оптовых закупок препаратов для пчёл.
• Начинающие - люди, которые только планируют войти в пчеловодство и ищут комплекты оборудования под ключ, а также обучающие материалы. Именно для этой аудитории на сайте реализован раздел «Блог».

Общие особенности аудитории

• Возраст - преимущественно 35-65 лет. Это люди, которые ценят функциональность и простоту в поиске нужной информации.
• Язык - аудитория в Украине двуязычная, поэтому полноценная реализация сайта на двух языках здесь не просто желательна, а необходима. Одноязычная версия в этом случае заметно снижает продажи и трафик на сайт.
• Ценности - надёжность оборудования, простота оформления заказа, удобные способы доставки и оплаты.
• Технологическая грамотность - средняя. Пользователи привыкли к стандартам крупных маркетплейсов вроде Rozetka и Prom, где есть покупка в один клик, оформление заказа в один шаг и подсказки во внутреннем поиске.

Варианты решения проблем, выявленных в процессе аудита

По итогам анализа мы сформулировали три возможных варианта дальнейшей работы.

• Аудит и исправление текущего сайта - провести детальный аудит существующей конфигурации и устранять проблемы на основе почасовой оплаты. Главный минус этого подхода в том, что объем работ заранее оценить невозможно - проект собирался другим подрядчиком, и реальный масштаб проблем выясняется только в процессе. При этом исправление таких критичных вещей, как скорость загрузки и некорректная работа корзины, вполне может потребовать бюджета, сопоставимого со стоимостью разработки нового сайта.
• Разработка нового сайта с профессиональным дизайном - создать магазин с нуля, с коммерческим дизайном, адаптированным под цветовую палитру текущего бренда, и проверенным набором функционала для SEO и контекстной рекламы.
• Разработка нового сайта с сохранением текущего дизайна - также создать сайт заново, но за основу взять существующий дизайн, переверстав его под новую конфигурацию, и дополнив необходимым функционалом для SEO и контекстной рекламы.

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

Кроме этого изначально обсудили, что делаем магазин как на русском, так и на украинском, чтобы обе версии могли привлекать трафик.

Выбранная конфигурация

Клиент выбрал второй вариант - он решил отказаться от своего дизайна и текущей версии сайта и взять быстрый универсальный премиум-шаблон OpenCart (из категории легких многофункциональных тем, оптимизированных под скорость и стабильность). Эта тема уже из коробки имеет многое, что нужно для создания современного магазина на Опенкарт с нуля. К этой основе оставалось лишь подключить выбранные клиентом способы оплаты и доставки, а также добавить необходимый функционал для SEO и рекламы. Из всех рассмотренных вариантов этот оказался наиболее понятным, предсказуемым по бюджету и экономичным - именно то, что было нужно в данной ситуации.

Клиенту предложили на выбор два адаптивных многофункциональных шаблона для инетернет-магазинов на OpenCart, с которыми агентство уже работало прежде. Это означало полную уверенность в отсутствии подводных камней - ни по скорости, ни по корректности адаптивной версии, ни по функционалу. При этом оба шаблона имеют из коробки вполне достойный дизайн и богатый набор возможностей. В каждом их них есть:

• Современное мега-меню или многоуровневое меню на выбор;
• Одностраничная корзина и покупка в один клик;
• Просмотренные товары и Избранное;
• Стикеры для товаров (акции, новинки, хиты);
• Отзывы о магазине и о товарах одновременно;
• Блог;
• Возможность гибкой настройки для управления цветами, шрифтами и блоками.

Контент было решено просто экспортировать с предыдущей версии сайта вместе с отзывами и картинками.

Это не первый опыт нашего агентства работы с платными покупными шаблонами. Такой вариант мы обычно рекомендуем, когда важно оптимизировать бюджет на разработку сайта.

Мы предлагаем на выбор темы, которые мы уже хорошо изучили или успешно реализовывали на наших проектах. Мы не рекомендуем самостоятельно покупать любую понравившуюся тему с маркетплейсов (ThemeForest, TemplateMonster и других), поскольку, по нашему опыту, многие визуально привлекательные шаблоны впоследствии плохо оптимизируются по скорости загрузки или требуют серьезных доработок для реализации необходимого функционала. Мы всегда настаиваем на консультации клиента с разработчиками перед окончательным выбором шаблона. Это помогает избежать многих проблем с сайтом в будущем, решение которых обычно стоит недешево.

Кроме того, некоторые темы сильно зашифрованы разработчиками для защиты от копирования, что существенно усложняет, а иногда и делает практически невозможной дальнейшую доработку сайта.

Оксана Артюшенко, SEO-специалист проекта

Этапы создания интернет-магазина на OpenCart

На базе выбранного варианта мы и развернули конфигурации магазина, его настройки и функционал.

Перенос контента и доработка структуры

Контент переносили с прошлого варианта конфигурации на новый прямо через базу, буквально за несколько часов, без ручной работы контент-менеджера. Все товары выгрузили в Google Таблицы, где вручную назначили каждой товарной позиции основную и второстепенные категории, после чего готовые данные импортировали обратно в магазин. В результате все товары сразу оказались на своих местах, а клиент сэкономил значительное количество часов и денег - работа через админку заняла бы несоразмерно больше ресурсов.

В процессе переноса контента обнаружилась типичная проблема: значительная часть материалов содержала «мусорный» код - лишние теги стилей, случайные переносы строк, избыточные теги span и тому подобное. Такой код не только замедляет сайт и искажает отображение контента, но и нередко становится причиной отклонения товаров в Google Shopping из-за некорректного считывания данных.

Чтобы решить проблему, весь контент был автоматически очищен от лишнего кода - насколько это возможно в автоматическом режиме. А чтобы подобная ситуация не повторялась в будущем, для клиента записали обучающее видео с рекомендациями по правильному заполнению карточек товаров - без копирования форматирования из Word и других источников, приводящего к засорению кода.

Исходная структура сайта была практически линейная, и меню имело примерно такой вид:

Все категории в исходном магазине находились на одном уровне, что делало навигацию неудобной, и плохо ложилось на структуру современного меню. После анализа нескольких магазинов в этой нише клиенту было предложено перейти на многоуровневую вложенность категорий. Это позволило разгрузить первый уровень меню и сделать навигацию по разделам сайта заметно удобнее для покупателей.

Вот так выглядит сейчас один из разделов сайта в многоуровневом меню после нашей переработки:

В процессе работы были пересмотрены все разделы и товарные наименования: часть категорий переименована, часть создана заново - под правильную и логичную структуру каталога.

Помимо этого, была разработана система фильтров и товарных свойств для одной категории первого уровня со всеми её подкатегориями. Это делалось в качестве наглядного примера для клиента - чтобы показать, как правильно заполнять свойства товаров с точки зрения удобства пользователей и SEO-оптимизации. Ниже представлен фрагмент этой структуры:

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

Чтобы клиент мог самостоятельно продолжить работу, был записан скринкаст с пошаговым объяснением - как именно заполнять свойства и фильтры товаров в админке, опираясь на подготовленную майнд-карту. Само заполнение свойств в демонстрационной категории клиент взял на себя. Прорабатывать таким же образом все остальные категории в рамках текущего этапа не стали - это потребовало бы значительного времени, и было решено, что оставшиеся ветки каталога будут последовательно прорабатываться уже в процессе SEO-продвижения.

Важно отметить, что ни в одной из предыдущих конфигураций сайта свойства и фильтры у товаров попросту отсутствовали. Именно поэтому полноценная фильтрация в категориях стала возможной только после того, как каждому товару были назначены соответствующие свойства:

Ключевые технические решения

Первое, на что мы обратили внимание при анализе сайта - неэффективная структура URL у товаров и категорий.

В самой первой версии сайта URL товаров включал полный путь категории. Это создавало серьёзную проблему: стоило сменить товару категорию - менялся весь адрес страницы, а по старому URL возвращалась 404 ошибка. Пример такого адреса: https://site.com/valcy-dlya-voshchiny/valci-gladkie-mashinnie--vm11.html. Здесь /valcy-dlya-voshchiny/ - фрагмент URL категории, а /valci-gladkie-mashinnie--vm11.html - уникальный идентификатор товара. При переходе на многоуровневую структуру с вложенными категориями такие адреса становились громоздкими и неудобными: https://site.com/category-1/category-2/category-3/valci-gladkie-mashinnie--vm11.html

Во второй версии сайта программист избавился от этой проблемы, и URL товаров приобрели более чистый вид: https://site.com//super-protein-pattie-450g.html

Однако остались другие сложности. Во-первых, URL товаров и категорий не имели уникальных слагов, и отличить одно от другого по адресу было невозможно. Во-вторых, никто не предусмотрел ситуацию, когда клиент изначально называет разные товары одинаково - в таких случаях часть товаров оставалась без корректного ЧПУ из-за дублирования названий.

В случае настройки ЧПУ для OpenCart мы придерживаемся следующих правил:

• Для каждого типа страниц задаем единые, но отличимые префиксы в URL: например, /prod- для товаров, /cat- для категорий и /post- для статей блога. Это позволяет мгновенно определить тип страницы по её адресу.
• Чтобы исключить ситуацию с дублирующимися URL, в адрес каждого товара и категории добавляется SKU или внутренний ID. Благодаря этому система гарантированно генерирует уникальный URL для каждой страницы - даже если клиент присвоит двум товарам или категориям одинаковые названия.

Уникализация ЧПУ за счёт ID или SKU - это вынужденное, но оправданное решение. Не каждый клиент готов и способен с самого начала грамотно называть товары и отслеживать возможные дубли по всему ассортименту. Там, где клиент это делает осознанно - достаточно один раз объяснить правила, и проблема не возникает. Но в остальных случаях куда надёжнее заложить автоматическую уникализацию на уровне системы, чем потом вручную выискивать проблемные адреса по всему сайту.

Эта логика была реализована в данном проекте:

• ЧПУ категорий были сформированы так - https://site.com/cat-medogonki-6/ и https://site.com/cat-medogonki-i-komplektuyushie-15/
• ЧПУ товаров так - https://site.com/prod-medogonka-4h-ramochnaya-nerzhaveyushaya-povorotnaya-rks-aisi-304-kasseta-i-rotor-nerzh-kran-nzh/ и https://site.com/prod-medogonka-2h-ramochnaya-povorotnaya-aisi-430-kasseta-svarnaya-kran-plastikovyj-26/
• Аналогично было сделано и для других типов страниц.

Таким образом если маркетологу или самому клиенту понадобится проанализировать трафик по конкретному типу страниц, достаточно просто использовать соответствующий префикс как фильтр в Google Analytics или Search Console - и система мгновенно выведет все категории по /cat-, все товары по /prod-, все статьи по /post- и так далее. Никаких дополнительных настроек или сложных сегментов для этого не потребуется.

Поскольку проект существует на двух языках, была реализована полноценная двуязычность в соответствии со всеми требованиями Google - то, чего в предыдущей версии магазина попросту не было. Теперь каждая страница на каждом языке имеет собственный URL и полностью доступна как для поисковых систем, так и для пользователей. Основным языком сайта была выбрана русская версия - это упрощает SEO-продвижение на старте. Украиноязычная версия при этом размещена в отдельной подпапке и полностью открыта для индексации. Тот факт, что в предыдущей версии сайта на этих страницах был украинский контент было решено не принимать во внимание - прошлая версия всё равно не была полностью проиндексирована из-за проблем на сайте.

В перспективе можно подключить pop-up баннер с предложением выбрать язык при первом визите - это было бы удобным и ненавязчивым решением. В крайнем случае возможна автоматическая переадресация пользователей из Украины на украиноязычную версию по IP-адресу.

На сайте магазина был настроен весь необходимый функционал оплаты и доставки:

• Оплата:
  • Приват 24
  • Наложенный платеж
  • Оплата по счету
  • Оплата QR кодом
  • Оплата частями
• Доставка:
  • Новая почта (отделение, курьер, почтомат)
  • Деливери
  • Укрпочта

Дополнительных интеграция например с CRM или ERP системами клиенту не требовалось.

Умный фильтр

Как уже отмечалось, фильтрация товаров в этой нише - редкость, однако те конкуренты, у которых она есть, заметно выигрывают в удобстве использования сайта. Именно поэтому клиенту с самого начала было предложено внедрить фильтрацию, причём на основе SEO-фильтра. Это решение закрывает сразу две задачи: пользователи получают удобный инструмент для поиска нужных товаров, а SEO-специалист - возможность в дальнейшем создавать дополнительные посадочные страницы под различные сочетания параметров, например «Категория + Бренд» или «Категория + Фильтр», если это потребуется для продвижения.

Из всех доступных решений для OpenCart наш выбор пал на OCFilter - платный сторонний модуль с давней историей развития. За это время он обрёл достаточный функционал, чтобы просто установить и использовать без доработок. Разумеется, подобное решение можно разработать с нуля, но в рамках небольшого проекта это нецелесообразно - готовый модуль вполне справляется со своей задачей, совместим с большинством тем и модулей, эффективен и при этом стоит недорого. Мы неоднократно могли убедиться в этом, разрабатывая и продвигая сайты на Опенкарт, например - интернет-магазин строительной тематики. Это успешный кейс SEO-продвижения практически с нуля с переводом на OpenCart CMS, и эффективным использованием OCFilter.

Умный поиск

Отдельного внимания заслуживает тема внутреннего поиска. При каталоге около 1000 товаров даже при идеально выстроенном дереве категорий многим пользователям проще воспользоваться поиском, чем искать нужный раздел через меню. Однако стандартный поиск OpenCart работает только при точном совпадении запроса с названием товара, а реальная картина совсем другая. Люди пишут с опечатками, используют единственное или множественное число, вводят названия брендов то на русском, то латиницей. В таких случаях стандартный поиск раз за разом возвращает пустой результат, хотя пользователи давно привыкли к тому, как работает поиск на крупных маркетплейсах, где система находит товар даже при опечатках, и сразу подсказывает подходящие категории.

Необходимый функционал для контекстной рекламы и таргета

Исходя из дальнейшей стратегии развития проекта, было важно с самого старта подготовить сайт к работе PPC и таргет-специалистов. В рамках этого направления мы настроили на сайте:

• Google Tag Manager, Google Analytics 4 и Google Enhanced Ecommerce, что позволило передавать данные о продажах в аналитику, и видеть суммы там по продажам;

• Подключена передача данных о конверсиях в Facebook и Google Ads;
• Настроены товарные фиды для Facebook и Google Merchant.

Всё это позволило приступить к настройке рекламы сразу после переноса сайта на рабочий домен.

Отдельно стоит упомянуть один нюанс: получить доступ к предыдущему аккаунту Google Analytics не удалось, поэтому пришлось создавать его заново - к сожалению, вся накопленная статистика при этом была утеряна. С Facebook ситуация сложилась лучше: бизнес-кабинет находился на стороне клиента, поэтому исторические данные по проекту удалось сохранить в полном объёме.

Стартовая SEO-конфигурация интернет-магазина на ОпенКарт

С самого начала с клиентом была согласована чёткая стратегия: сайт должен быть изначально создан и настроен таким образом, чтобы вся дальнейшая SEO-работа сводилась к развитию необработанных веток структуры, написанию контента для категорий и посадочных страниц, а также ссылочному продвижению. Именно поэтому все базовые SEO-моменты были проработаны и настроены еще на этапе запуска - чтобы специалист, который придет заниматься продвижением, мог сразу сосредоточиться на содержательной работе, а не на исправлении технических ошибок.

Также на старте были выполнены следующие важные задачи:

• Сгенерированы уникальные и SEO-оптимизированные метатеги для каждого типа страниц сайта. При этом внедрена удобная возможность вручную прописывать собственные метатеги, которые будут автоматически подменять шаблонные, если они заполнены.
• Настроена вся необходимая микроразметка Schema.org для интернет-магазина: товаров, организации, статей, списков товаров и других сущностей.
• Поскольку проект предусматривал полную смену структуры URL, был проведён парсинг старой и новой конфигурации сайта. Все адреса предыдущей версии были сопоставлены с новыми, после чего настроены корректные 301-редиректы. Это позволило избежать потери трафика из-за «битых» страниц после запуска нового сайта.
• Особое внимание было уделено скорости загрузки страниц — критически важному фактору как для SEO, так и для эффективности рекламы. Мы изначально рекомендовали шаблон, который не имел серьезных проблем с производительностью (в отличие от многих покупных шаблонов). Дополнительно были выполнены работы по оптимизации: настроено серверное и браузерное кэширование страниц и запросов, сжатие ресурсов и другие технические улучшения. Всё это позволило добиться отличных показателей скорости работы сайта:

Мы видим отличные результаты по основным веб-показателям: все метрики (LCP, INP, CLS, FCP и TTFB) находятся в зеленой зоне по всем типам страниц. Показатели Google PageSpeed Insights также впечатляют: от 90 до 99 баллов как для мобильной, так и для десктопной версии сайта по всем типам страниц.

Кроме этого, был выполнен стандартный must-have пакет для всех современных SEO-оптимизированных сайтов:

• Сгенерирована и настроена XML-карта сайта (sitemap.xml);
• Правильно настроен файл robots.txt;
• Исключены прямые ссылки на страницы, закрытые от индексации, по всему проекту;
• Реализована удобная возможность добавления и редактирования SEO-текстов на страницах категорий;
• Подключен и настроен Google Search Console;
• Подготовлены корректные и информативные страницы: «Оплата и доставка», «Оферта», «О магазине» и другие юридически важные разделы.

Удобство использования и независимость от программистов

На каждом этапе разработки результаты итерации передавались клиенту для оперативной обратной связи и внесения правок в реальном времени. Это касалось верстки, настройки внешнего вида страниц и добавления нового функционала.

Одна из главных проблем при смене сайта — страх клиента «не разобраться» в новой административной панели. Чтобы магазин мог работать полностью автономно, мы подготовили персональную библиотеку скринкастов:

• Как добавить товар в админке;
• Как правильно очищать код в описании товара перед публикацией;
• Как устанавливать и заменять акционные цены.

Благодаря этому клиент сэкономил десятки часов на самостоятельном освоении системы и полностью избавился от необходимости постоянно обращаться к разработчику по мелким вопросам.

Результаты разработки и настройки интернет-магазина на OpenCart для пчеловодов

Весь процесс создания и настройки сайта занял 4 недели, из которых 2 недели ушли на саму разработку, и еще 2 - на настройку электронной торговли, опций оплаты и доставки, функционала под контекстную и таргетированную рекламу, и перенос контента.

В результате всего через месяц клиент получил современную, высокопроизводительную и SEO-оптимизированную платформу, полностью готовую к активному продвижению и эффективной работе с любыми источниками трафика.

Уже в первые месяцы после запуска нового сайта (без какой-либо активной рекламы и SEO-продвижения) были достигнуты следующие результаты:

• Около 2000 страниц из 2500 успешно проиндексированы поисковыми системами;
• Поступило 25 заказов с минимального остаточного трафика (органика + брендовые запросы составляли всего 25–30 переходов в месяц).
• Критическая ошибка корзины полностью устранена — теперь сайт уверенно конвертирует даже без активной рекламы.

Таким образом, новый магазин полностью готов к запуску контекстной рекламы и SEO-продвижению. Благодаря заранее настроенной системе аналитики GA4 с Enhanced Ecommerce, наличию товарных фидов и отслеживанию конверсий, клиент смог сразу приступить к настройке и запуску рекламных кампаний.

Этот проект наглядно доказал: для успешного нишевого e-commerce не нужны огромные бюджеты и тяжёлые CMS. Достаточно продуманной архитектуры, чистого кода и грамотного акцента на маркетинговых инструментах.