Інтернет-магазин на OpenCart під ключ для бджільництва

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

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

З’ясувалися такі проблемні моменти:

• Спочатку проєкт був зібраний на Opencart і мав лише російську версію (на скріні — зовнішній вигляд магазину з Вебархіву);

• Під час оновлення магазину програміст реалізував псевдодвомовність: контент у системі існував двома мовами в адмінці, однак кожна мовна версія сторінки не мала власного URL. При цьому, згідно з вимогами законодавства, основною мовною версією сайту була зроблена українська, тому Google бачив лише український контент.
• При зміні мови редиректи не були налаштовані, а всі URL повністю змінилися. У результаті в пошуку індексувався лише україномовний контент, і всі накопичені позиції проєкту були просто втрачені. Сторінки російською мовою, не маючи власних URL, не могли ні зберегти старі позиції, ні зайняти нові.
• Потрібно було виправляти швидкість сайту, оскільки ряд сторінок був у червоній зоні, що погано як для контекстної реклами, так і для SEO.
• Фільтрації в магазині, як і в його попередній версії, не було — усе робилося за рахунок категорій, тому користуватися сайтом було не зовсім зручно, хоча кілька топових конкурентів у ніші роблять аналогічно;

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

Вибір CMS для інтернет-магазину - важливе і непросте завдання. Клієнт розглядав зміну движку з 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- і так далі. Жодних додаткових налаштувань або складних сегментів для цього не потрібно.st- и так далее. Никаких дополнительных настроек или сложных сегментов для этого не потребуется.

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

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

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

Оплата:

• Приват24
• Післяплата
• Оплата за рахунком
• Оплата QR-кодом
• Оплата частинами

Доставка

• Нова пошта (відділення, кур’єр, поштомат)
• Делівері
• Укрпошта

Додаткових інтеграцій, наприклад із CRM або ERP системами, клієнту не потребує..

Розумний фільтр

Як уже зазначалося, фільтрація товарів у цій ніші - рідкість, однак ті конкуренти, у яких вона є, помітно виграють у зручності використання сайту. Саме тому клієнту з самого початку було запропоновано впровадити фільтрацію, причому на основі SEO-фільтра. Це рішення закриває одразу дві задачі: користувачі отримують зручний інструмент для пошуку потрібних товарів, а SEO-спеціаліст - можливість у майбутньому створювати додаткові посадкові сторінки під різні поєднання параметрів, наприклад «Категорія + Бренд» або «Категорія + Фільтр», якщо це буде потрібно для просування.

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

Ми неодноразово мали змогу переконатися в цьому, розробляючи та просуваючи сайти на OpenCart, наприклад - інтернет-магазин будівельної тематики. Це успішний приклад SEO-просування проекту практично з нуля з перенесенням проєкту на OpenCart та ефективним використанням 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. Достатньо продуманої архітектури, чистого коду і грамотного акценту на маркетингових інструментах.