заказать звонок
+38 057 755-48-00
Starting a new project?
получить консультацию
SEO - поисковое продвижение
215
7

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

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

Какие вопросы пользователей решает карточка товара:

  • любые вопросы по визуальной и технической части продукта (блоки “Фото и видео”, “Характеристики товара”);
  • ликвидация возможных возражений и страхов посетителей (раздел “Вопросы и отзывы”);
  • убежденность в верном выборе и усиление мотивации к покупке (отзывы и видеообзоры пользователей);
  • простая процедура оформления заказа (продуманный UI/UX-дизайн страницы);
  • гарантии и сервис (оплата, доставка, возврат).
Карточка товара

Схема осуществления повторной покупки

Правильно оформленная товарная карта - инструмент отложенных конверсий. Пользователь скорее вернется к цепляющей странице, которая запомнилась (дизайном, понятным описанием продукта, удобным сервисом).

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

  • продвижение товара по запросам любой частотности - в частности, СЧ и НЧ;
  • увеличение числа просматриваемых страниц через внедрение перелинковки;
  • отстройка от конкурентов (фото/видео/описание);
  • повышение конверсии.

С чего начинается заполнение карточки товара? С внедрения SEO-рекомендаций. Так страницы товаров сразу будут оптимизированы и готовы к продвижению. Рассмотрим основные блоки товарной карты.


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

1) URL — человекопонятный адрес страницы.

Составляющие URL:

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

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

Рис. 1 — Пример человекопонятного адреса

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

2) Хлебные крошки

Это навигационная цепочка пользователя от Главной страницы к искомому товару.

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

Рис. 2 — Пример хлебных крошек

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

3) Название (h1)

Место расположения — слева над фото продукта (помним про F и Z паттерны просмотра страницы).

Что пишем?

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

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

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

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

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

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

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

Title дублирует название продукта.
Description может быть единым, а название продукта может меняться. На ранжирование это не влияет.

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

Рис. 4 — Пример верной микроразметки в сниппете

Что указывается в метаописании:

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

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


2. Фото и видеоконтент

Требования к изображениям:

  • прописанный тег Alt для основной фотографии;
  • высокое разрешение изображений и видеоконтента;

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

Рис. 5 — Пример отображения наличия видеоконтента в карточке товара

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

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

Рис. 6 — Пример использования лупы для товара

  • ракурсы съемки (включая “изнанку” изделия — изображение товара внутри, если это галантерея (сумка, кошелек, косметичка, и т. д.));

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

Рис. 7 — Наличие разных ракурсов предмета

  • просмотр в панорамном режиме 360;

Общий вид:

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

Рис. 8 — Пример просмотра товара в панорамном режиме

И режим 360:

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

Рис. 9 — Пример просмотра в режиме 360

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

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

Рис. 10 — Пример детализации просмотра изделия

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

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

Рис. 11 — Варианты изображения товара каждого представленного цвета

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

  • Imagecompressor;
  • Kraken.

Со стороны юзабилити:

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

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

Рис. 12 — Пример улучшения юзабилити карты товара

  • пользовательские видеообзоры в высоком разрешении;

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

Рис. 13 — Пример видеообзора UGC в карте товара

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

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

Рис. 14 — Пример демонстрации товара

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

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

Рис. 15 — Пример демонстрации вместимости товара

Видео

  • длительность ролика — до 1-5 минут (в зависимости от товара);

Одежда/обувь:

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

Рис. 16 — Длительность видеодемонстрации

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

Техника:

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

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

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

Подробнее о важности наличия видеоконтента мы писали в статье “Как наличие видео влияет на продвижение”.


3. Краткая информация о товаре

Располагается справа от фотографии.

Это те параметры, которые сразу бросаются в глаза при открытии страницы:

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

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

Рис. 18 — Пример реализации калькулятора изделия

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

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

Рис. 19 — Пример продуманной карты товара

  • указание количества дней до завершения акции.

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

Рис. 20 — Пример реализации срока окончания акции

Что касается цены с т. зр. юзабилити:

  • заметный ценник (легкое нахождение на странице, жирный шрифт);
  • указанная валюта стоимости;
  • при отсутствии товара в наличии — информация о причине (снят с производства, дата ожидаемого поступления, предложение получить уведомление о поставке на e-mail, рекомендация уточнить стоимость по телефону).

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

Рис. 21 — Информация с уведомлением о наличии товара

Это были желательные пункты для включения в краткую информацию о товаре.


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

Если процедура заказа предполагает выбор цвета/размера и т. д. изделия, информация представляется наглядно.
Рядом размещены кнопки “Купить/Добавить в корзину”.
Причем кнопка СТА хорошо видна, легко визуализируется на странице и удобна для клика.

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

Рис. 22 — Продуманное меню с быстрым заказом

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

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

Рис. 23 — Варианты последующего шага пользователя

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


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

Описание продукта — актуальное и правдивое.
Объем — на усмотрение предпринимателя. Техническая продукция может иметь громоздкое описание.

Касательно уникальности — в описании технической составляющей товаров крайне тяжело добиться 100% уникальности, да это и не нужно (как проверить уникальность, читайте тут). Важно, чтоб информация о продукте была понятна целевому клиенту — написана в его мире. Т. е., условно “смартфон имеет 3 камеры” для клиента означает “фото выйдут отличного качества”.
В идеале — вы собираете пользовательские вопросы и даете на них развернутые ответы.

С т. зр. юзабилити

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

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

Рис. 24 — Пример использования инфографики в карте товара

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

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

Рис. 25 — Реализация фичи “Читать дальше”

Вот что открылось по клику на “Show more”:

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

Рис. 26 — Реализация “Читать дальше”

Если в блоке “Краткая информация о товаре” вы не указали данные о способах оплаты и доставки, условиях возврата и прочих доп. услугах, то можно поместить их в раздел “Описание”.
Часто эти параметры размещают во вкладках раздела.

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

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

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


6. Отзывы

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

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

Форма отзыва включает:

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

Также рядом с отзывами о товаре часто добавляют вкладку “Вопросы”.
Реализация любая — либо 1на вкладка, либо 2.

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

Рис. 28 — Реализация формы отзывов

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

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

Рис. 29 — Двойное меню для отзывов

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


7. Дополнительные инструменты

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

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

Пример допродажи (up-sell):

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

Рис. 30 — Пример реализации допродажи в карте товара

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

Пример кросс-продажи:

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

Рис. 31 — Реализация “С этим товаром покупают”

В магазинах детских товаров посетителям, как правило, предлагаются просто другие товары для детей. Они могут быть даже в иной тематике (как это показано выше на рисунке — вы покупаете автокресло, а вместо запасных ремней-креплений вам предлагают пеленальный столик).

Напоминание о просмотренных продуктах:

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

Рис. 33 — Блок “Вы просматривали”

Блоки крайне удобны — сохраняется информация о просмотренных товарах, которая может понадобиться пользователям.

2) Сравнение товаров

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

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

Рис. 34 — Пример сравнения товаров

Функция сравнения товаров — мастхэв для интернет магазинов быттехники. Посетитель быстро и наглядно может сравнить конфигурацию нужных ему моделей.

3) “Список желаний”/”Избранное

Если на сайте предусмотрена опция “Добавить товар в виш-лист”, то обычно для усиления к ней добавляют e-mail-уведомления — напоминают пользователю, что товар слишком долго висит в списке желаний (+ можно добавить скидку на позицию и повысить вероятность осуществления конверсии).

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

Рис. 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 для завершения подписки.

Заказать
продвижение
Больше полезных статей и мануалов еще впереди. Будьте в курсе!

Спасибо! Скоро с Вами свяжется наш менеджер.