замовити дзвінок
+38 057 755-48-00
Starting a new project?
отримати консультацію
SEO - пошукове просування
23
1

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

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

Які питання користувачів вирішує картка товару:

  • будь-які питання з візуальної та технічної частини продукту (блоки "Фото та відео", "Характеристики товару");
  • ліквідація можливих заперечень та страхів відвідувачів (розділ "Питання та відгуки");
  • переконаність у вірному виборі й посилення мотивації до покупки (відгуки й відеоогляди користувачів);
  • проста процедура оформлення замовлення (продуманий UI/UX-дизайн сторінки);
  • гарантії та сервіс (оплата, доставка, повернення).

Карточка товара

Схема здійснення повторної покупки

Правильно оформлена товарна карта - інструмент відкладених конверсій. Користувач швидше повернеться до чіпляючої сторінки, що запам'яталася (дизайном, зрозумілим описом продукту, зручним сервісом).

Потреби власників магазинів, досягненню яких сприяє продуктова карта:

  • просування товару за запитами будь-якої частотності - зокрема, СЧ та НЧ;
  • збільшення числа сторінок, що переглядаються через впровадження перелінковки;
  • відбудова від конкурентів (фото/відео/опис);
  • підвищення конверсії.

З чого починається заповнення картки товару? З впровадження SEO-рекомендацій. Так сторінки товарів відразу будуть оптимізовані та готові до просування. Розглянемо основні блоки товарної карти.


1. URL, назва (+ метатеги Title, Н1, Description)

1) URL – людинозрозуміла адреса сторінки.

Складові URL:

  • повна назва продукту на латиниці;
  • назва категорії/підкатегорії, до якої належить товар;
  • використання “-” замість “_” в назві продукту.

Блог карточка товара

Рис. 1 – Приклад людинозрозумілої адреси

Для кожного товару своя унікальна адреса URL.

2) Хлібні крихти.

Це навігаційний ланцюжок користувача від Головної сторінки до шуканого товару.

Блог карточка товара

Рис. 2 – Приклад хлібних крихт

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

3) Назва (h1).

Місце розташування – зліва над фото продукту (пам’ятаємо про F та Z патерни перегляду сторінки).

Що пишемо?

  • назву продукту;
  • хто виробник;
  • модель (важливо для запитів, що включають номер моделі товару, + додаткова унікалізація метатега);
  • характеристики.

Маска для назви:

Назва товару – Бренд – Колекція/Підвид/Модель – Тех. характеристики (не обов’язково) – Колір – Артикул (опціонально)

Блог карточка товара

Рис. 3 – Приклад маски для назви товару

1 – назва товару “Конструктор”;
2 – бренд “Lego”;
3 – колекція “Duplo”;
4 – тип “Поезд Считай и играй 23 детали”;
5 – артикул товарної одиниці.

4) Title, Description та мікророзмітка в сніпеті

Title дублює назву продукту.

Description може бути єдиним, а назва продукту може змінюватися. На ранжування це не впливає.

Блог карточка товара

Рис. 4 – Приклад вірної мікророзмітки в сніпеті

Що вказується в метаописі:

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

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


2. Фото та відеоконтент

Вимоги до зображень:

  • прописаний тег Alt для основної фотографії;
  • висока якість зображень та відеоконтенту;

Блог карточка товара

Рис. 5 – Приклад відображення наявності відеоконтенту в картці товару

  • можливість збільшення (лупа);

Блог карточка товара

Рис. 6 – Приклад використання лупи для товару

  • ракурси зйомки (включаючи “виворіт” виробу – зображення товару всередині, якщо це галантерея (сумка, гаманець, косметичка, і т. д.));

Блог карточка товара

Рис. 7 – Наявність різних ракурсів предмету

  • перегляд в панорамному режимі 360;

Загальний вигляд:

Блог карточка товара

Рис. 8 – Приклад перегляду товару в панорамному режимі

І режим 360:

Блог карточка товара

Рис. 9 – Приклад перегляду в режимі 360

  • деталізація продукту (шви вироби, особливості конструкції);

Блог карточка товара

Рис. 10 – Приклад деталізації перегляду виробу

  • фото для кожного колірного варіанту продукту;

Блог карточка товара

Рис. 11 – Варіанти зображення товару кожного представленого кольору

Сервіси, які допоможуть стиснути зображення:

  • Imagecompressor;
  • Kraken.

З боку юзабіліті:

  • іконка/ярлик із зазначенням “Топ продажів”/”Акція”/”Новинка”/”Безкоштовна доставка” і т. д .;

Блог карточка товара

Рис. 12 – Приклад поліпшення юзабіліті карти товару

  • користувацькі відеоогляди високої якості;

Блог карточка товара

Рис. 13 – Приклад відеоогляду UGC в карті товару

  • фото в контексті (масштаб продукту в інтер’єрі).

Блог карточка товара

Рис. 14 – Приклад демонстрації товару

Попутно для більшої наочності до сумки чи заплічника можна помістити будь-які повсякденні речі: телефон, гаманець, ключницю, блокнот, косметичку, пляшку води та ін.. Або вказати поруч цю інформацію.

Блог карточка товара

Рис. 15 – Приклад демонстрації місткості товару

Відео:

  • тривалість ролика – до 1-5 хвилин (в залежності від товару);
  • Блог карточка товара 16

    Рис. 16 – Загальна тривалість відеодемонстрації

    У відеоогляді перераховані характеристики товару, а також одразу видно, як кеди виглядають на нозі.

    Техніка:

    Блог карточка товара

    Рис. 17 – Реалізація демонстрації реального масштабу товару

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

    Детальніше про важливість наявності відеоконтенту ми писали в статті “Як наявність відео впливає на просування“.


3. Коротка інформація про товар

Розташовується праворуч від фотографії.
Це ті параметри, які відразу впадають в очі при відкритті сторінки:

  • назва виробу;
  • характеристики;
  • інформація про наявність/кількість (якщо продукту немає в наявності, то при поставці розсилається повідомлення всім користувачам, що додали товар до виш-листа);
  • ціна (калькулятор вартості,% та сума, яку можна заощадити, “До закінчення акції ** днів”);

Блог карточка товара 18

Рис. 18 – Приклад реалізації калькулятора вироби

  • варіанти оплати (кредит, розстрочка);
  • об’єм (варіанти пакування);
  • способи покупки (розстрочка, кредит);
  • варіанти доставки та приблизна дата отримання;
  • інформація про гарантії/повернення.

Блог карточка товара 19

Рис. 19 – Приклад продуманої карти товару

  • зазначення кількості днів до завершення акції.

Блог карточка товара 20

Рис. 20 – Приклад реалізації терміну закінчення акції

Що стосується ціни з т. з. юзабіліті:

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

Блог карточка товара 21

Рис. 21 – Інформація з повідомленням про наявність товару

Це були бажані пункти для включення до короткої інформації про товар.


4. Характеристики продукту та форма замовлення

Якщо процедура замовлення передбачає вибір кольору/розміру і т. д. виробу, інформація може надаватися наочно.
Поруч розміщені кнопки “Купити/Додати до кошика”.

Причому кнопку СТА добре видно, вона легко візуалізується на сторінці та зручна для кліку.

Блог карточка товара 22

Рис. 22 – Продумане меню зі швидким замовленням

Процедура замовлення проста й легка. Після кліка на кнопку “Додати товар до кошика” може спливати вікно “Продовжити покупки” або “Оформити замовлення”.

Блог карточка товара 23

Рис. 23 – Варіанти подальшого кроку користувача

У цьому пункті робимо упор на надані варіантів швидкої угоди або наступного кроку відвідувача для завершення замовлення.


5. Основна інформація

Опис продукту – актуальний та правдивий.
Обсяг – на розсуд підприємця. Технічна продукція може мати громіздкий опис.
Відносно унікальності – в описі технічної складової товарів вкрай важко добитися 100% унікальності, та це й не потрібно (як перевірити унікальність,
читайте тут). Важливо, щоб інформація про продукт була зрозуміла цільовому клієнту – написана в його світі. Тобто, умовно “смартфон має 3 камери” для клієнта означає “фото вийдуть відмінної якості”.
В ідеалі – ви збираєте питання користувачів та даєте на них розгорнуті відповіді.

С т. з. юзабіліті:

  • інфографіка (блоки про бонуси, гарантію, доставку можна позначити іконками);

Блог карточка товара

Рис. 24 – Приклад використання інфографіки в карті товару

  • опис доцільно розділити на 2 частини:
  1. короткий опис продукту;
  2. розгорнутий опис під катом “Читати далі …”.

Блог карточка товара

Рис. 25 – Реалізація фічі “Читати далі”

Ось що відкрилося при натисканні на “Show more”:

Блог карточка товара

Рис. 26 – Реалізація “Читати далі”

Якщо в блоці “Коротка інформація про товар” ви не вказали дані про способи оплати та доставки, умови повернення та інші доп. послуги, то можна помістити їх в розділ “Опис”.

Часто ці параметри розміщують у вкладках розділу.

Блог карточка товара

Рис. 27 – Меню з характеристиками продукту

Це були основні моменти по розміщенню опису товару. Якщо опис вашого товару займає велику частину сторінки, краще запровадити кат або зробити верхнє підміню, щоб не розтягувати сторінку.


6. Відгуки

Результативний механізм роботи блоку – текст + фото/відео клієнтів.

Призначений для користувача контент підвищує довіру відвідувачів (докладніше про UGC ми писали в статті про генерацію користувацького контенту). І не забудьте про преміювання покупців за відгуки (балами, бонусами, додатковою знижкою).
А підключення
e-mail-маркетингу після здійсненої конверсії допоможе досягти більшого ефекту після покупки.

Форма відгуку містить:

  • заголовок – напис напівпрозорим шрифтом вказує, що до поля можна вписати відгук;
  • ім’я/email – дані користувача (заповнюються автоматично після реєстрації);
  • оцінка – будь-яка шкала на ваш вибір;
  • поле для тексту;
  • фото/відео – можливість прикріпити графічний файл;
  • сортування відгуків – за датою/релевантністю, та ін.;
  • кнопка СТА – відгук відправляється після натискання на кнопку, а не за кліком на “Enter”.

Також поруч з відгуками про товар часто додають вкладку “Питання”.
Реалізація будь-яка – або 1на вкладка, або 2.

Блог карточка товара

Рис. 28 – Реалізація форми відгуків

І ще один приклад блоку в інтернет-магазині:

Блог карточка товара

Рис. 29 – Подвійне меню для відгуків

Обирайте ту структуру, яка краще підходить вашій тематиці.


7. Додаткові інструменти

1) Up-sell та cross-sell (допродаж)

Вигідніше збільшити середній чек постійного клієнта, ніж залучити нового.
За цю функцію відповідає динамічно підвантажуємий блок “З цим товаром купують”/”Схожі товари”/”Ви недавно переглядали”, і т. д..

Приклад допродажу (up-sell):

Блог карточка товара

Рис. 30 – Приклад реалізації допродажу в картці товару

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

Приклад крос-продажу:

Карточка товара

Рис. 31 – Реалізація “З цим товаром купують”

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

Нагадування про переглянуті продукти:

Карточка товара

Рис. 33 – Блок “Ви переглядали”

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

2) Порівняння товарів

Крім того, що це вкрай зручна функція, вона покращує UX (користувацький досвід). Актуальна для магазинів побутової, мобільної та портативної техніки.

Блог карточка товара

Рис. 34 – Приклад порівняння товарів

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

3) “Список бажань”/”Вибране”

Якщо на сайті передбачена опція “Додати товар до виш-листа”, то зазвичай для посилення до неї додають email-повідомлення – нагадують користувачеві, що товар занадто довго висить у списку бажань (+ можна додати знижку на позицію та підвищити ймовірність здійснення конверсії).

Блог карточка товара

Рис. 35 – Опція “Додати до вибраного”

Вішлист – ідеальний інструмент для створення списків динамічного ремаркетингу. Після перегляду карток товари будуть бігати за користувачем по всьому інтернету та нагадуватимуть про його нездійсненні бажання.

4) Телефон та графік роботи

Як правило, ці дані вказані у вкладці “Контакти” + розміщені зліва чи справа вгорі кожного вікна.

Блог карточка товара 36

Рис. 36 – Контакти компанії на сайті

Зручно те, що вони завжди на виду – на будь-якій картці товару та категорії.

5) Кнопка зворотного дзвінка та вікно чату

Статистика сервісу ringostat.ua говорить, що підключення віджету Callback підвищує кількість дзвінків до 48%. А встановлення спливаючого чату збільшує кількість конверсій до 40% (дані дослідження ApexChat).

Блог карточка товара 37

Рис. 37 – Віджет callback на сайті

І загальні рекомендації:

  • для подібних товарів 1го сімейства всі характеристики вказуються однаково (одиниці виміру);
  • спливаючі підказки для незрозумілих термінів/характеристик продукту;
  • інформація щодо комплектації/вага виробів/розміри пакування;
  • кнопки СТА добре видимі та легко знаходяться на сторінці, при натисканні міняють колір;
  • вкладки з характеристиками товару розташовані горизонтально, щоб не гортати сторінку далеко вниз.

Не обов’язково включати в картку товару всі 7 пунктів. Для кожної ніші є свій оптимальний комплекс елементів.

Просто пам’ятайте, що коли користувач заходить на сторінку товару, він очікує отримати повну відповідь: назву, фото та ціну обраного продукту. Його характеристики та переваги перед подібними товарами. Відгуки реальних клієнтів та користувачів виробів.
Чим на більшу кількість запитань цільових замовників ви дасте відповідь, тим імовірніше відвідувач сторінки стане вашим клієнтом.

2 важливих бонуса для користувача: фото або відеоконтент від самих користувачів та відгуки.

Практичну частину з оптимізації картки товару в т. ч. ми описували в кейсі роботи з інтернет-магазином штор.


Висновки

Перший етап формування картки товару – рекомендації UI/UX-дизайнера та SEO-фахівців.
На їх основі створюється шаблон сторінки та заповнюються розділи з інформацією про продукт.

Що важливо передбачити?

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

Пам’ятайте про силу UGC – відгуки реальних покупців з графічним підтвердженням.
І тестуйте макети продуктових карток – практика покаже, який варіант сторінки обирають користувачі.

Конверсійних вам карток товарів!

А якщо потрібна допомога в оптимізації інтернет-магазину, звертайтеся до наших фахівців.


Что такое SEO

Що таке SEO та навіщо потрібна пошукова оптимізація

Скорость загрузки сайтов

Швидкість завантаження сайтів. Що потрібно знати

Core Web Vitals

Core web vitals: фактор ранжування Google

Підпишіться на наші оновлення
Більше корисних статей та мануалів ще попереду. Будьте в курсі

Ви вже підписані на нашу розсилку!

Підтвердіть свій email для завершення підписки.

Замовити
просування
Більше корисних статей та мануалів ще попереду. Будьте в курсі

Дякуємо! Скоро з вами зв'яжеться наш менеджер.