UX/UI

7 правил оформления листингов и превью товаров для UX интернет-магазина, а также 11 нюансов SEO-оптимизации

Подписывайтесь на телеграм-канал с кейсами роста конверсии!
Максим Жуков
Сооснователь ecommerce-агентства KISLOROD
Сегодняшняя публикация полностью посвящена листингам. После прочтения материала вы узнаете: как правильно оформлять листинги и в чем их польза для SEO и UX, как должно выглядеть превью карточек товаров, и чем плох функционал «Быстрый просмотр».

Листинги товаров — особенности структуры

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

Из чего состоит страница листинга

Структура листинга сайта выстроена по такому принципу: сетка товаров, дополнительный функционал, инструменты управления (например, сортировка), превью карточек продуктов. Иногда могут добавляться другие элементы.
Листинг товаров на wildberries.ru - KISLOROD
Пример листинга товров на wildberries.ru

Сетка товаров

Сетка — это система разделения страницы на столбцы и строки, в которых отображаются превью товаров. Наиболее распространенный формат — вывод на экране 3-5 столбцов. Когда специфика продаж требует наличия крупноразмерных продающих фотографий товаров и очень подробных описаний характеристик продукта, то количество столбцов уменьшают. Каким должен быть оптимальный размер превью, и как лучше организовать сетку товаров, расскажем чуть позже.
На предыдущем скриншоте видно, каким образом выводятся товарные позиции в формате плитки. При отображении товаров плиткой регулировать размер превью можно с помощью настроек, размещенных справа вверху.
В некоторых случаях оправдан способ отображения товаров списком либо в табличной форме. Принимая решение об отображении товаров списком или таблицей нужно отталкиваться от специализации магазина.
Отображение товаров в табличном варианте на ozon.ru - KISLOROD
Отображение товаров в табличном варианте на ozon.ru
Количество товарных позиций, выводимых на странице, в среднем составляет около десяти-сорока единиц. Связано это с удобством зрительного восприятия информации покупателем. Если продуктов очень много, то есть смысл настроить пагинацию — опцию переключения страниц.
Пагинация на странице листинга - KISLOROD
Пример пагинации на странице листинга сайта wildberries.ru
Можно взять за основу опыт организации перехода на другие страницы на ресурсе ozon.ru.
Пагинации на странице листинга сайта ozon.ru - KISLOROD
Пример пагинации на странице листинга сайта ozon.ru
Если на одной странице отображается большое число товаров (от ста и выше), то это нередко ведет к снижению скорости загрузки. На индексации сайта может отрицательно сказаться и динамическая подрузка товаров. Разумное решение — при нажатии кнопки «Показать еще» сочетать функцию динамической подгрузки и пагинации.
Оформление пагинации в каталоге сайта dns-shop.ru - KISLOROD
Сочетание динамической подгрузки и пагинации при нажатии кнопки «Показать еще» на dns-shop.ru
Противоположная ситуация — когда в запрашиваемой категории выдается слишком мало товаров. Здесь также есть свои нюансы, о которых нужно знать. Одним из весомых факторов попадания страницы в ТОП выдачи является широта и разнообразие ассортимента. Соответственно, нет смысла создавать отдельную страницу, если на ней не будет отображено достаточное количество позиций. Рассчитать оптимальное число выводимых товаров помогает анализ конкурентов. Более детально об этом поговорим в статье про оптимизацию листингов. А чтобы определить товары, которые нужно выводить в первую очередь, выполните XYZ-анализ товаров.

Дополнительный функционал — основные акценты

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

Превью товара

Превью — главный элемент листинга. От степени его информативности и структурированности зависит, сколько времени посетитель сайта потратит на оценку предложенных товарных позиций, закончатся его поиски покупкой или нет.
При разработке превью должны решаться две задачи:
  1. Описание товара в превью полностью удовлетворяет первичный интерес пользователя.
  2. Количества товарных позиций, доступных к просмотру, достаточно для сравнения их друг с другом — тогда пользователю не нужно будет уходить со страницы выбранной категории товаров.
Рекомендуем соблюдать оптимальный баланс — не загромождать листинг слишком объемными превью, чтобы они не занимали много места на экране, загораживая «соседей», но при этом были предельно информативными.
Отправьте заявку на юзабилити-аудит сайта прямо сейчас и увеличьте конверсию минимум на 20%! Найдём точки роста конверсии и выявим барьеры на пути пользователей сайта.

Как работать с листингами и превью товаров: 7 основных правил

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

1. Делайте превью карточек товаров максимально информативными

Потенциальный покупатель должен иметь возможность сравнить подходящие под его запросы товары уже на стадии просмотра превью. В качестве оценочных параметров обычно выступают размер, материал, цвет, год выпуска и так далее. Если же базовой информации недостаточно, приходится открывать карточку товара, уточнять интересующие детали, а затем снова возвращаться на страницу категории.
Как показывают исследования Baymard Institute, эта проблема характерна для 42% сайтов. Не информативные превью усложняют процесс покупки еще на стадии отбора товара.
Условно все характеристики товара, отображаемые в превью, можно разделить на универсальные и индивидуальные.
Универсальные должны присутствовать в описании товара по умолчанию. При этом специфика онлайн-маркета значения не имеет. Сюда относятся:
  • Изображение продукта
Визуализация товара — обязательный атрибут превью. Товарные позиции без фото воспринимаются пользователями как баг и попросту игнорируются. Как следствие, падает и уровень доверия к сайту.
Чтобы показать товар с разных ракурсов, используется слайдер.
Пример оформления листинга с разными ракурсами товаров - KISLOROD
Просмотр товара с разных ракурсов на ozon.ru
Каким будет формат изображения товаров зависит от специфики продукции и области ее применения. Например, для сайтов одежды, аксессуаров, предметов декора очень важно показать, как та или иная вещь будет смотреться на фигуре или впишется в домашний интерьер. Для этого делается несколько вариантов фото изделия крупным планом — на белом или любом другом нейтральном фоне и «в действии».
Фото товара в двух вариациях: на светлом фоне и как он используется в быту на сайте ozon.ru - KISLOROD
Фото товара в двух вариациях: на светлом фоне и как он используется в быту на сайте ozon.ru
Наше собственное исследование, посвященное покупке матрасов онлайн показало, что у покупателей была потребность в визуализации наполнителя матраса — тогда им легче давался выбор нужной модели.
Демонстрация внутреннего устройства матрасов в превью товаров на askona.ru - KISLOROD
Демонстрация внутреннего устройства матрасов в превью товаров на askona.ru
Обращайте внимание на то, чтобы все изображения товара составляли единую стилистическую композицию. Тогда страница категории будет выглядеть целостно, выразительно и создавать благоприятное впечатление у пользователей.
  • Название и тип товара
Прописывать название и тип товара или ограничиться только названием? Это зависит от особенностей продукта. Формулировка «Звездные войны» или «Русалочка» не даст понимания того, что речь идет именно о наборах детского белья — описание слишком размыто и малопонятно, поэтому его нужно дополнить типом товара.
Выведение типа и названия в дизайне превью товара на ozon.ru
Выведение типа и названия товара на ozon.ru
Когда каталоги очень объемные или в них отображены смешанные товары, целесообразно выводить одновременно и тип, и название продукта.
  • Цена
Стоимость является одним из важнейших факторов выбора товара. Покупатель определяет, соответствует ли она заявленным характеристикам (по его личному мнению), и насколько цена привлекательна по сравнению с ценами на аналогичные товарные позиции.
В большинстве интернет-магазинов цена видна в превью, хотя без исключений не обходится.
В период действия акций, распродаж и других случаях, когда стоимость товара падает, все изменения должны наглядно отображаться в превью. Рядом с новой ценой указывается зачеркнутая предыдущая, а также процент скидки.
Отображение товаров плиткой в каталоге сайта - KISLOROD
Товары могут продаваться не только поштучно, литрами или погонными метрами, но и упаковками/ящиками — это актуально для строительных маркетов. В таком случае нужно обозначить цену за одну штуку, квадратный метр или другую исходную единицу измерения товара.
Отображены цены в разных форматах в листинге сайта isolux.ru
Отображены цены в разных форматах на сайте isolux.ru
Помимо сегмента DIY, данный способ оформления превью используется также в сфере e-grocery. При продаже апельсинов указывайте цену на 1 кг и на 1 апельсин (усредненный вес).
Пример вывода цены в превью товаров - KISLOROD
Как можно реализовать вывод цены за килограмм, штуку и упаковку
  • Вариации товара
Покупателю нужно дать понять, что товар существует в разных вариациях — различается по цвету, размеру, сезонности и другим параметрам. Причем видеть это он должен сразу в превью, иначе товарная позиция может просто игнорироваться в общем листинге.
Вариативность в дизайне превью товара на примере bonprix.ru - KISLOROD
Вариативность в дизайне превью товара на примере bonprix.ru
Индивидуальные характеристики свойственны определенным категориям товаров.
О чем может идти речь:
  • Рейтинг продукта
Когда сложно самостоятельно разобраться в обилии товарных предложений, на помощь приходят пользовательские рейтинги. Яркий пример — интернет-магазины бытовой техники, электроинструментов, стройматериалов, мобильных телефонов.
При выборе товара покупатель опирается на мнение других пользователей, уже купивших и протестировавших данную вещь. Особенно это касается новых продуктов или тех, с которыми ранее не приходилось сталкиваться, и трудно сходу оценить их качественные характеристики.
Рядом со средней оценкой рейтинга должно отображаться и количество проголосовавших, взятое за основу расчета. При отсутствии этого значения рейтинг для покупателя потеряет значимость.
Вывод рейтинга в листинге сайта ozon.ru
Вывод рейтинга на ozon.ru
Отправьте заявку на юзабилити-аудит сайта прямо сейчас и увеличьте конверсию минимум на 20%! Найдём точки роста конверсии и выявим барьеры на пути пользователей сайта.
  • Совместимость с другими товарами
Информировать пользователей о совместимости сопряженных товаров рекомендуется при подготовке превью технических категорий. Тогда им не придется совершать лишние манипуляции, открывая поочередно карточки товаров и выискивая нужные характеристики.
Удобнее всего использовать визуальные инструменты — например, выделять жирным шрифтом данные о ширине экрана, количестве SIM-карт, типе видеокарты. Либо же размещать крупным планом изображения комплектующих: переходники, разъемы, гнезда и так далее.
Рекомендации по совместимости сумки с ноутбуками в каталоге сайта eldorado.ru
Рекомендации по совместимости сумки с ноутбуками на eldorado.ru
Если бы в превью отсутствовало текстовое указание размера диагонали, покупатель не смог бы сразу определить, подойдет ли данная сумка к ноутбуку или нет.
  • Размеры
Еще один важный параметр при оценке совместимости товаров. Выбирая сумку для ноутбука, важно сразу знать ее габариты — если она подходит по размерам, то можно изучать остальные характеристики.
Оформление размеров изделий на сайте ozon.ru
Размеры изделия на ozon.ru
  • Рекомендации
Обычно используются для различной сувенирной продукции, косметики или детских товаров — когда вещь приобретается в подарок. В рекомендациях можно обозначить возраст ребенка или тип кожи, чтобы сориентировать покупателя.
  • Особые условия
Если товар не принадлежит к категории массового потребления, а предназначен для использования в особых условиях, то в превью карточки товара следует указать индивидуальные характеристики. Например, в описании гидрокостюмов добавить информацию о толщине материала, температуре воды для комфортного погружения, наличии защитной вставки от ветра и так далее.
Описание особых условий товара в превью товара на сайте scubamarket.ru
Описание особых условий товара на scubamarket.ru
  • Код или артикул товара
Обычно добавляется в превью, когда покупателю важно найти конкретную модель (телефон, ноутбук, телевизор, кондиционер).
Отображение артикула в дизайне листинга на сайте ozon.ru
Отображение артикула на ozon.ru

2. Оптимизируйте превью с помощью иконок, заменяя ими текстовое описание товара

Чтобы превью было информативным, но не перегруженным текстом, используйте для описания характеристик иконки. Доказано, что информация, сгенерированная в виде образов, воспринимается человеческим мозгом на двадцать процентов легче, чем информация в словесной форме. Это свойство психики подробно описал Дэвид Льюис в своей книге «Нейромаркетинг в действии».
Ниже на фото — результат нашей работы с сайтом grapewines.ru. При оформлении превью вин для винотеки Grape мы учитывали не только эстетику бутылок и наклеек, но и наличие следующей информации: страна/регион, объем, цвет, процент сахара, год разлива.
Для обозначения цвета вина использовались иконки соответствующей окраски, а из описания характеристик были убраны все названия. По умолчанию всем и так понятно, что Франция — это страна, 2016 — год выпуска, 0,7 л — объем бутылки. Заказчик остался доволен результатом — превью содержит необходимый набор данных и при этом зрительно очень простое и понятное.
Краткое превью товара с учетом всех важных характеристик продукции Grapewines
Краткое превью с учетом всех важных характеристик товаров на grapewines.ru
Заменяя текстовое описание графическими изображениями, стремитесь сделать превью предельно легким для восприятия. Поставьте себя на место покупателя и постарайтесь посмотреть на картинку глазами человека, далекого от digital-маркетинга. В одном из наших исследований, где анализировался опыт онлайн-покупки матрасов, на первом сайте были использованы следующие обозначения жесткости матрасов:
Пример оформления параметров жесткости на askona.ru
Параметры жесткости на askona.ru
Пользователям было трудно понять смысл закрашенных кружков. Только наведя курсор на изображение, можно было увидеть название параметра «Жесткость».
На втором сайте визуальные значки жесткости дополнялись текстовым сопровождением, поэтому сложностей с восприятием у покупателей не возникало.
Параметры жесткости на сайте ormatek.com - KISLOROD
Параметры жесткости на сайте ormatek.com

3. Настраивайте быстрый просмотр правильно

В сети можно встретить много статей на тему полезности функции быстрого просмотра. Казалось бы, все очевидно — пользователю дается возможность рассмотреть продукт поближе и более тщательно изучить его характеристики, не покидая страницу общего списка товаров в категории.
О популярности функционала свидетельствует и статистика Baymard, согласно которой 45% интернет-магазинов, попавших в исследование (всего было изучено 50), активно им пользуется. Тем не менее мы рекомендуем относиться к опции быстрого просмотра с осторожностью. Поясним почему.
Делая отсылку все к той же аналитике Baymard, испытуемые признавали полезность функционала только в том случае, когда картинка товара была очень маленькой. Следующий момент — необходимость совершения лишних действий. Нужно кликнуть на фото и ждать, пока откроется модальное окно.
Вносит путаницу и наличие в быстром просмотре кнопки «Купить». Видя краткое описание товара, его изображение и кнопку, у покупателя создается впечатление, что это и есть карточка товара. Решая, что больше информации об интересующем продукте в магазине нет, пользователь закрывает окно, и покупка не совершается. Подобные казусы нередки еще и потому, что быстрый просмотр активируется непроизвольно. Особенно если случайный клик делается в центре изображения.
Быстрый просмотр — весьма спорный инструмент для UX. Но если вы все же настроены на его реализацию, опирайтесь на опыт крупных торговых площадок — например, lamoda.ru:
  • открытие области быстрого просмотра происходит только после нажатия кнопки «Подробнее» в превью.
  • текстовое описание окна и карточки товаров должны быть практически идентичны, за исключением отзывов. Если весь контент не вмещается в размер окна, используйте скролл.
Быстрый просмотр в листинге сайта lamoda.ru
Реализация быстрого просмотра на lamoda.ru

4. Настройте вывод дополнительных данных о продукции при наведении курсора

Альтернативой быстрому просмотру может стать показ описания товара путем наведения курсора на превью. Решение позволяет одновременно бить по «двум фронтам». С одной стороны, пользователю становится удобно сравнивать продукты по определенным параметрам, не покидая страницу категории, с другой — нет перегрузки интерфейса. Баланс найден, все довольны.
Как настроен вывод дополнительных параметров при наведении курсора (левое фото) на wildberries.ru - KISLOROD
Как настроен вывод дополнительных параметров при наведении курсора (левое фото) на wildberries.ru
Исследования подтверждают, что вывод дополнительных данных о товаре путем наведения курсора увеличивал время изучения подходящих и уменьшал время изучения неподходящих позиций. Что, в свою очередь, приводит к росту конверсии.
На наш взгляд, уместно использовать данную функцию, когда:
  • товар требует более детального отображения;
  • количество значимых характеристик товара выходит за рамки превью;
  • продукция предлагается в разных вариациях;
  • присутствуют совместимые товары.

5. Не забывайте про функции сравнения товаров, отправки в корзину и избранное

Избавьте покупателей от лишних манипуляций, когда они «бегают» из списка товаров в карточки и наоборот. Желательно, чтобы в самом листинге присутствовала возможность добавления/удаления продукта в или из корзины, избранного, а также опция сравнения.
Функционал добавления товаров в избранное и корзину из превью товара - KISLOROD
Функция добавления в избранное и корзину
Доступ к избранному или списку желаний должен быть открыт как для зарегистрированных пользователей, так и новых посетителей сайта — по крайней мере, на один раз.
При разработке функционала делайте упор на максимальную простоту и очевидность зрительного восприятия. Слишком сложная графика сбивает с толку покупателей или они просто не находят нужную иконку на экране. Анализируя опыт покупки матрасов онлайн, мы получили подтверждение этому — большой процент испытуемых не пользовался функцией сравнения, так как ее изображение было не наглядным.
Пример неудачной реализации сравнения товаров на сайте anatomiyasna.ru
Пример неудачной реализации сравнения товаров на anatomiyasna.ru
Следующий момент, который стоит учитывать — способ размещения кнопок сравнения, корзины и избранного. Лучше, когда они отображаются при наведении курсора, а не присутствуют в каждом превью. Тогда листинг каталога не выглядит перегруженным, фокус внимания направлен на сам товар и его характеристики, но при этом страница списка сохраняет функциональность.
В таком способе отображения кнопок нет ничего сложного для пользователя — курсор сам их «находит», перемещаясь по полю и останавливаясь на превью того или иного товара.

6. Используйте в листинге дополнительные блоки

Покупатели не всегда могут найти товары по заданным параметрам. Дайте им понять, что в продаже существуют и другие предложения со схожими характеристиками, на которые стоит обратить внимание. Сгруппируйте альтернативные товары в отдельный блок, взяв их из разных категорий — таким способом вы существенно расширите диапазон вариантов.
Вывод альтернативных товаров на ozon.ru - KISLOROD
Вывод альтернативных товаров на ozon.ru
Примерно так же работают и блоки товарных рекомендаций. Если пользователь ранее уже делал на сайте заказы, то можно проанализировать его интересы и предлагать схожие или сопутствующие товары в рамках cross-sell. И тем самым влиять на конверсию и величину среднего чека. Подобрать товары для комплектов поможет ABC-анализ продаж.
Еще один рабочий способ влияния на покупательский выбор — добавление блока с тегами. Он формируется на основе самых популярных запросов посетителей магазина и существенно облегчает поиск товаров. Как правильно пользоваться функцией тегирования, рассказываем здесь.
Тегирование в листинге товаров на сайте - vseinstrumenti.ru
Панель тегов на vseinstrumenti.ru

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

При покупке нескольких совместимых товаров пользователь сначала откладывает один товар, а потом возвращается на исходную страницу категории за следующей позицией. Из-за того, что многие товары похожи между собой как внешне, так и по техническим характеристикам, найти уже добавленный в корзину продукт достаточно проблематично. Особенно когда речь идет об электронике или компьютерной технике — например, ноутбуках одной марки.
Пример похожих превью ноутбуков в интернет-магазине - ozon.ru
Пример похожих превью ноутбуков на ozon.ru
Аналогичные трудности возникают при попытке вернуться к карточке товара, отправленного в корзину, с целью подбора сопутствующих аксессуаров/комплектующих или совместимых изделий. То же самое происходит, если нужно добавить ту или иную модель в корзину для сравнения.
Соответственно, чем сложнее покупателю ориентироваться в списке товаров и «откапывать» уже добавленные или просмотренные позиции, тем меньше энтузиазма у него будет для изучения дополнительных товаров и совершения покупок. И наоборот — если вы сократите время на поиск исходных товаров, пользователь с большей вероятностью будет рассматривать другие позиции.
Наш совет: выделяйте в листинге позиции, добавленные в корзину, сравнение или избранное Это облегчит поиск товаров при повторном возврате в категорию. Также выделенные товары будет проще отличить в списке при изменении параметров поискового запроса. Поскольку порядок вывода при смене фильтра будет другим, найти товар по первоначальной позиции будет практически невозможно.
Отличие превью товаров, не отложенных и отложенных в корзину на примере сайта ozon.ru
Как может отличаться превью товаров, не отложенных и отложенных в корзину на примере сайта ozon.ru
Превью товаров, отложенных в корзину, могут отличаться от остальных превью по некоторым визуальным аспектам. Допустим, можно отображать дату доставки или ссылки на сопутствующие товарные позиции. Тогда не будет необходимости применять какие-то цветовые маркеры, менять фон или окантовку рамок.
Просмотренные товары удобно выделять, меняя расцветку шрифта текста. Посетителям сайта сразу будет понятно, какие позиции уже открывались, чтобы не отвлекаться на их повторный просмотр.
Выделение другим цветом просмотренного товара на сайте - citilink.ru
Выделение другим цветом просмотренного товара на citilink.ru
Блок с недавно просмотренными товарами — еще одно удачное решение, позволяющее быстро вернуться к просмотру интересующих продуктов.
Недавно просмотренные товары на wildberries.ru
Как отображаются недавно просмотренные товары на wildberries.ru
Отправьте заявку на юзабилити-аудит сайта прямо сейчас и увеличьте конверсию минимум на 20%! Найдём точки роста конверсии и выявим барьеры на пути пользователей сайта.

SEO-оптимизация листингов

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

1. Ассортимент

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

2. Фильтрация и сортировка

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

3. Анкоры карточек

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

4. Метка «В наличии»

Рекомендуем выводить метку в каталог. Если товаров нет в наличии, можно располагать их внизу, на последних страницах или закрывать от индексации.

5. Листинг товаров во всех уровнях каталога

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

6. Тегирование

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

7. Мета-теги и заголовок H1

Помимо ключевых запросов, в мета-тегах нужно указывать коммерческие слова — «купить», «заказать», «цена». Большинство CMS интернет-магазинов позволяют генерировать теги по заданному шаблону, что облегчает seo-оптимизацию страниц листингов.
Пример отображения тега Title и мета-тега Description в каталоге на сайте - ozon.ru
Пример отображения тегов в каталоге на ozon.ru
Грамотно заполненные мета-теги обеспечат высокие позиции в поисковой выдаче, формирование привлекательного сниппета, высокие показатели CTR (кликабельности).

8. Тексты

Размещать ли тексты на листингах — спорный вопрос, истину можно постичь экспериментальным путем. Помните, что тексты должны иметь пользу и ценность для читателей.
Полезно выводить блоки с популярными товарами или товарами из смежных категорий. Если пользователь не найдет ничего подходящего в выдаче, то возможно заинтересуется товарами, которые интересны многим или близки к его интересам.
Блок с рекомендациями товаров под листингом товаров на сайте - ozon.ru
Блок с рекомендациями товаров на ozon.ru

10. Микроразметка

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

11. Хлебные крошки

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

Заключение

Подойдя к оформлению превью товаров и листингов предельно внимательно и грамотно, вы сможете привлечь на сайт больше потенциальных покупателей и, как следствие, вывести бизнес на новый уровень развития.
Наш совет — внедряйте новшества поэтапно с последующим обязательным А/Б тестированием. Так будет понятно, какова эффективность проведенных изменений, и что нужно еще сделать для поднятия конверсии.
Получайте полезный контент от KISLOROD в любой из мессенджеров
При переходе в одну из указанных социальных сетей, вы автоматически соглашаетесь с политикой конфиденциальности
Спасибо, что дочитали до конца.
Если информация была полезна, поделитесь статьёй. Вам не сложно, нам приятно ;)

Рекомендованные статьи

Скачайте 17 точек роста и 100 + чекеров для роста конверсии и прибыли интернет-магазина
При переходе в одну из указанных социальных сетей, вы автоматически соглашаетесь с политикой конфиденциальности
Мы проанализировали ведущие интернет-магазины, результаты исследований, свой опыт и собрали важные моменты в одно руководство. Делаем e-commerce лучше, поэтому не только пользуемся сами, но и делимся с вами.
Выберите удобный мессенджер и получите чек-лист прямо сейчас: