Оформление карточки товара


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

Структура

Ошибки: отсутствие четкой структуры контента.

Приведенный вариант оформления карточки товара (Рис. 1) выбивается из привычного ряда: фото «разрывает» функциональный блок цены и кнопки покупки, что может отрицательно сказаться на пользовательском опыте. Рекомендуется зонировать пространство страницы, придерживаясь определенной логики (например, слева расположить блок фотографий, справа – цену, конверсионную кнопку и текстовое описание). В таком виде информацию будет намного проще воспринимать и обрабатывать. При этом желательно разместить наиболее важные элементы в пределах первого экрана.

image_1.png

Рис. 1. Информация «разбросана» по странице, нет акцента на конверсионных элементах


Название

Ошибки: неинформативный заголовок.

Зачастую наименование товара содержит только определитель: «Футболка женская» или «Кошелек из кожи» – что приводит к появлению на сайте множества неуникальных заголовков и анкоров. Отсутствие идентификационных элементов (бренд, модель, артикул, цвет, размер и проч.) в названии товара, во-первых, затрудняет пользователю выбор конкретной позиции из списка каталога, во-вторых, является признаком некачественной оптимизации товарной страницы (ведь именно ее мы продвигаем по НЧ-запросу, и заголовок H1 должен иметь вхождение заданных ключей). Правильное наименование перекликается с Title страницы и имеет вид типа: «Кровать Креола двуспальная с ящиками для хранения, 160х200см». Также не стоит использовать в названии товара сокращения слов (Рис. 2). Некоторыми из идентификаторов вполне можно пожертвовать не в ущерб информативности заголовка.

image_2.png

Рис. 2. Остается лишь догадываться, для чего предназначен данный держатель


Описание

Ошибки: отсутствие описания, недостаток полезной информации.

В ряде случаев в товарной карточке можно наблюдать наличие фотографий без текстового сопровождения. Это грубая ошибка, которая негативно влияет как на конверсию, так и на результативность поискового продвижения страницы. Другой пример – наличие описания товара, «заточенного» исключительно для поисковых роботов (Рис. 3). Не следует допускать в тексте чрезмерного употребления ключевых слов и качественных прилагательных (уникальный, превосходный и т. п.).

image_3.png

Рис. 3. Абсолютно бесполезное и переоптимизированное описание платья


Описание должно быть максимально кратким и полезным, давать ответ на возможные вопросы покупателя (для технически сложных товаров уместно применить описание производителя). Обязательно указываются следующие характеристики: состав, комплектация, вид упаковки, возраст использования (категория детских товаров), срок годности и т.д. – в зависимости от типа товарной позиции. В дополнение к тексту описания можно прикрепить на странице файл с инструкцией, размерной таблицей, содержанием или выдержкой текста (при продаже книг), а также разместить видеообзор или 3d-демонстрацию.

Цена

Ошибки: цена по запросу, не акцентирована скидка.

Отсутствие цены в карточке товара или использование формулировки из ряда «от 800 рублей» – это верный путь к низкой или даже нулевой конверсии. В условиях высокой конкуренции нельзя предлагать покупателю уточнить стоимость путем обратной связи: он незамедлительно продолжит поиски на других ресурсах (исключение составляют специфические товары и услуги, где для расчета цены требуются входные данные).

image_4.png

Рис. 4. При открытии страницы цена заметна не сразу, отсутствует акцент на скидке


Если цена «теряется» в контенте (Рис. 4), это также может спровоцировать отказ от просмотра страницы. Стоимость должна быть заметна сразу: выделена цветом, элементами дизайна или более крупным размером шрифта. Другая распространенная ошибка – отсутствие указания на выгоду покупателя в случае предоставления скидки. Не стоит пренебрегать простым приемом, а именно: перечеркнуть старую цену и сделать визуальный акцент на новой, указав сумму, которую экономит ваш покупатель.

Фотографии

Ошибки: показан один ракурс, плохое качество картинки.

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

Функциональные элементы

Ошибки: неочевидная кнопка «Купить», отсутствие полезных сервисов, повышающих конверсию.

Иногда пользователи не могут совершить покупку на сайте просто потому, что не находят кнопку «Купить» (к примеру, когда она «спрятана» в нижней области контента или выполнена в виде обычной гиперссылки). Также покупателя может смутить нестандартная надпись: вместо «Купить» или «В корзину» – например, «Вперед!» или «Зарезервировать».

Зачастую в карточке товара можно видеть сразу две кнопки: «Купить» и «Купить в 1 клик» (Рис. 5). Вторая предполагает вывод формы для отправки номера телефона, после чего перезванивает оператор и принимает заказ. Такая функция удобна для неуверенных пользователей интернета, однако наличие двух похожих кнопок может сбить пользователя с толку. Альтернативное решение в данном случае – использование сервиса обратного звонка.

image_5.png

Рис. 5. Большое число кнопок призыва к действию может запутать покупателя


На многих коммерческих сайтах не используется полезный функционал, позволяющий удержать покупателя или побудить его вернуться в будущем, даже если он ушел без покупки. Речь идет о сервисах «Сравнение товаров», «Добавить в избранное», «Отслеживание цены» (на случай акционных скидок) и «Сообщить о поступлении товара». Их интеграция может в положительной степени повлиять на конверсию.

Дополнительная информация

Ошибки: отсутствие информации о наличии, доставке, оплате и гарантиях.

Для успешной продажи товара недостаточно только его качественного описания. При выборе пользователь оценивает также надежность и исполнительность продавца. Многие магазины допускают ошибку, не указывая в карточке информацию о наличии данной позиции на складе, сроках и стоимости ее доставки (или возможности самовывоза с указанием адресов). Информация займет всего пару строк, но определенно поспособствует принятию решения о покупке. Если товар можно оплатить при помощи банковской карты, об этом обязательно нужно сообщить, так как этот способ сегодня является наиболее предпочтительным для огромного количества покупателей. Размещение значков платежных систем рядом с ценой и кнопкой «Купить» положительно отразится на конверсии и повысит лояльность клиентов. Не следует забывать и о гарантиях: информация о возврате обязательно должна присутствовать в описании в текстовом или графическом виде.

Рекомендации

Ошибки: не используются механизмы up-sell и cross-sell.

Многие магазины не раскрывают полностью своего потенциала, оставляя без внимания механизмы перекрестных и/или дополнительных продаж (в карточке не выводится группа товаров, которые, вероятно, заинтересуют покупателя). Рекомендательный сервис позволяет увеличить сумму среднего чека (допродажа сопутствующих товаров, аналогичных позиций из той же серии либо более дорогих аналогов) или повысить вероятность покупки (показ похожих товаров). Бывает и обратная ситуация, когда рекомендательный сервис используется, но вывод товаров не обоснован каким-либо мотивом. В этом случае механизм может работать «вхолостую».

Отзывы

Ошибки: не предусмотрена возможность написания отзыва или комментария к товару.

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

SEO-показатели

Ошибки: не используются ЧПУ; не оптимизированы Title, Description; отсутствуют кнопки шаринга социальных сетей, нет микроразметки.

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

Выводы

Составить шаблон «образцовой» карточки товара достаточно сложно, так как не существует универсального решения и в каждом случае необходимо учитывать индивидуальные особенности торговой площадки. Мы рекомендуем провести аудит вашей товарной страницы, посмотреть на реализацию карточек нишевых топовых конкурентов и сделать вывод о необходимости оптимизации тех или иных позиций с целью обеспечения роста продаж. Любые доработки необходимо сопровождать постанализом и оперировать данными для нахождения лучшего варианта архитектуры и функционала товарной страницы.

Микроразметка для улучшения сниппетаИспользование микроразметки на сайте – это полезная практика, которая позволяет сделать его содержание более структурированным и понятным для поисковых машин. Стандарт Schema.org был введен в 2011 году гигантом поиска Google при поддержке Yahoo! и Bing и ныне учитывается, в том числе, и Яндексом. Посредством специальных тегов HTML-кода поисковые роботы получают четкое представление о характере контента ресурса, что позволяет строить более релевантную выдачу и повышать качество поиска. Сайт, в свою очередь, получает расширенный привлекательный сниппет и, следовательно, рост числа поискового трафика.

Создаем товарный сниппет

Информацию о товарах и их стоимости, представленную в карточках интернет-магазина или на страницах корпоративного сайта компании, можно транслировать в сниппет для выдачи Google и Яндекса. Чтобы сформировать такое полезное дополнение в описании ссылки, необходимо разметить соответствующие страницы ресурса при помощи стандарта Schema.org.

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

Для формирования товарного сниппета необходимо использовать соответствующие схемы (Product, Offer, AggregateOffer) и их свойства, описанные в иерархии на сайте Schema.org (прим.: англоязычный ресурс). Следует отметить, что Яндекс учитывает далеко не весь список свойств (к примеру, нет возможности указать информацию о рейтинге продукта), поэтому товарный сниппет в данной поисковой системе выглядит более скромным, нежели в Google.

Рассмотрим пример семантической разметки для карточки товара Iphone 6 интернет-магазина Евросеть. Сниппет данной страницы в Google выглядит следующим образом (Рис.1):

snippet_evroset_google.png

Рис. 1


Заглянем в HTML-код страницы, чтобы увидеть правила, посредством которых в сниппет карточки товара транслируются его название, стоимость и рейтинг на основании отзывов покупателей. Атрибут itemscope дает указание поисковому роботу на то, что описывается определенный объект, itemtype называет тип объекта (в нашем случае – Product):

<span itemscope itemtype=»http://schema.org/Product»>


Атрибут itemprop описывает свойства объекта, в данном примере – это название (name):

<meta content=»Apple iPhone 6 16 Гб Space Grey» itemprop=»name»>


Следует подчеркнуть, что весьма кстати здесь можно было бы использовать и свойство объекта «описание» (description) с размещением ключевой информации о товаре.

Следующее правило позволяет отобразить стоимость товара в сниппете:

<span itemscope itemtype=»http://schema.org/Offer» itemprop=»offers»>

<meta content=»RUR» itemprop=»priceCurrency»>

<span class=»sum» itemprop=»price»>46 990</span>


И, наконец, указывается тип объекта, обозначающий рейтинг на основании отзывов:

<span itemscope itemtype=»http://schema.org/AggregateRating» itemprop=»aggregateRating»>

<meta content=»5″ itemprop=»ratingValue»>

<meta content=»2/» itemprop=»reviewCount»>

</span>


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

snippet_eldorado_ya1.png

Рис. 2


Подробная информация о правилах синтаксиса стандарта Schema.org на русском языке и примеры построения кода представлены в справочной документации Яндекса и в оригинале (прим.: на английском языке) на официальном сайте Schema.org.

Дополняем сниппет данными о компании

При помощи семантической разметки существует возможность добавить в сниппет информацию об адресах и организациях, в том числе передать данные о компании в Яндекс.Справочник и Граф знаний Google. Впоследствии они могут быть использованы в различных сервисах поисковых систем или в поиске для предоставления пользователям наиболее важных параметров организации. К примеру, в описание ресторана могут быть включены адрес, телефон, часы его работы и отзывы посетителей. Ниже вы можете видеть расширенный сниппет сайта стоматологии в поисковой выдаче Яндекса (Рис.3).

snippet_organization1.jpg

Рис. 3


За разметку контента страницы контактов компании отвечают схемы Organization и Place. В поисковой системе Google к тому же реализована возможность размещения логотипа или другого графического элемента, который будет отображаться, к примеру, в сети знаний (справа от результатов поиска) (Рис.4).

knowledge_google1.jpg

Рис. 4


Другие области применения

Стандарт Schema.org также очень популярен среди владельцев информационных сайтов и блогов. Неудивительно, что для движка WordPress создан ряд плагинов для автоматической генерации и встраивания микроданных в код страницы. Довольно часто в сниппете можно увидеть графические элементы (фотографии, картинки, видео) или, например, описание искомого фильма, которые привлекают внимание и невольно мотивируют пройти по предлагаемой ссылке.

Такой прием расширения сниппета применяется для следующих ресурсов:

  • сайты рецептов (Recipe) (Рис.5);

snippet_recipe.png

Рис. 5

  • сайты с видеопубликациями, видеохостинги (VideoObject);
  • новостные порталы, блоги (NewsArticle, BlogPosting);
  • сайты вопросов и ответов (Question и Answer);
  • сайты мобильных и веб-приложений (SoftwareApplication);
  • сайты с каталогами фильмов, книг, рефератов и т.д. (Movie, CreativeWork);
  • энциклопедические, словарные ресурсы (ScholarlyArticle);
  • сайты-афиши с публикацией событий (Event).

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

Выводы

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