Правила оформления товарных страниц в интернет-магазине

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

Какой должна быть структура товарной страницы?

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

К ним относятся:

1. Название товара. Прописывается крупным шрифтом в формате заголовка h1, полностью, без непонятных аббревиатур и сокращений. Чтобы помочь посетителю сайта быстрее сориентироваться в каталоге, в названии указывают модель, цвет, артикул и прочие дополнительные сведения о товаре.
2. Изображения. И это не приевшиеся снимки из фотостоков. В приоритете – качественные фотографии продукта в высоком разрешении. В идеале их делают с различных ракурсов и дополняют функцией приближения (лупы). Для похожих вариаций не лишним будет фоторяд из нескольких моделей для сравнения. Также эффективный способ демонстрации – объединение в формате 360 градусов. Таким образом картинки по максимуму заменяют реальный опыт, который покупатели получают при выборе товара в оффлайн-точках.
3. Стоимость. Актуальная на данный момент цена размещается сверху в правой части страницы. Ее выделяют цветом, крупным шрифтом. Если товар продается по скидке, желательно указать размер бонуса и изначальную стоимость, чтобы можно было сразу оценить выгоду предложения. Отсутствие ценника зачастую приводит к потере целевого трафика. Клиенты предпочитают не тратить время на выяснение нужной информации и уходят к конкурентам.
4. Призыв к действию. CTA-кнопки с призывом «Купить» или «Положить в корзину» подводят покупателя к целевому действию. Важно делать их заметными, выделять контрастным цветом.
5. Условия заказа. Информация о способах оплаты, доставки и гарантиях – то, что в первую очередь ищет клиент, принимая решение о покупке. Прописывать условия необходимо четко, понятно и структурированно. В текст стоит добавлять популярные коммерческие запросы, которые будут продвигать сайт по части SEO.

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

Что это за элементы:

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

Товарные рекомендации 

• полезные материалы. Это может быть все, что добавит наглядности и поможет покупателю определиться с выбором: видеообзоры, схемы, презентации, сравнительные таблицы, инфографика;
• временные наклейки. Пометки «Акция», «Новинка», «Хит продаж» применяются для привлечения внимания к конкретным предложениям. Но нельзя, чтобы они «висели» на одних и тех же страницах годами: их необходимо постоянно синхронизировать, менять и обновлять;
• реальные отзывы. Оценки и мнения клиентов интернет-магазина, размещенные в отдельном блоке, помогают другим посетителям решиться на покупку. Собирать отзывы можно в обмен на небольшие бонусы, предлагая их в постпродажных email-рассылках.

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

Большое значение также имеют качественная адаптивная верстка, короткая и понятная навигационная цепочка («хлебные крошки»), грамотно прописанные мета-теги.

Ключевые правила оформления карточек

Перейдем к конкретным рекомендациям по оформлению эффективной продающей страницы товара в интернет-магазине.

Внешний вид

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

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

Структуру блоков лучше формировать согласно классической схеме:

• в левой части – изображение продукта;
• в правой – описание, стоимость, CTA-кнопки;
• в нижней – характеристики, отзывы, товарные рекомендации.

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

Если в ассортименте интернет-магазина много категорий и позиций, расставьте приоритеты и первым делом приведите в порядок карточки из основных разделов, страницы с самыми дорогими/ходовыми продуктами. Оставшиеся продолжайте дорабатывать постепенно.

Классическое оформление карточки 

ЧПУ

Содержание товарной страницы должно легко считываться. Не используйте в ссылках артикулы: оптимальнее указывать полное наименование продукта.

www.site.ru/product-1023.html - плохой пример.

www.site.ru/samsung-j6.html – выглядит намного лучше, понятнее.

Желательно, чтобы в URL отражались разделы и подразделы, к которым относится товар. Эта ссылка-цепочка называется вложенностью. В ней фиксируется краткий путь пользователя от главной до страницы товара.

В транслитерации прописывайте только буквы, подчеркивания и дефисы. Правильный урл – максимально простой и не слишком длинный.

Контентное наполнение

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

Обратите внимание на ключевые нюансы:

1. Объем текста

Некоторые считают, что текст в товарных карточках не должен превышать 500-1000 знаков. На самом деле эти правила не вполне объективны. Допустимых минимальных границ нет: все зависит от ниши бизнеса и особенностей продукта.

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

Если магазин работает с более дорогой и редкой продукцией, будут оправданы объемные и содержательные тексты. Так описывают премиальные гаджеты, эксклюзивную мебель, уникальные игрушки, элитные чаи и косметику.

Развернутое описание товара 

2. Содержательность

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

При необходимости добавляйте:

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

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

3. Краткость

Набивать товарную страницу до отказа тоже не стоит. Во всем важна мера. Краткость и лаконичность не означают, что в карточке мало полезной информации. Чтобы сократить объем, передавайте часть данных с помощью инфографики, иконок, схем, таблиц и картинок.

4. Конкурентные преимущества

Еще одно обязательное правило – объяснить посетителю, почему стоит приобрести продукт здесь и сейчас. Четко сформулируйте в тексте преимущества.

Расскажите, чем хороша определенная модель:

• уникальными спецификациями;
• ценой;
• гарантией качества.

Гарантия лучшей цены на товар 

Почему компанию выбирают клиенты:

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

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

SEO-оптимизация

Эффективное поисковое продвижение и высокие конверсии в интернет-магазине возможны только при условии грамотной SEO-оптимизации карточек.

Уделите достаточно внимания:

1. Мета-данным title, description и h1. Если это предусмотрено CMS, воспользуйтесь шаблонами генерации мета-данных. Оптимальная структура – название продукта + параметры + коммерческие поисковые запросы (доставка, купить, цена, отзывы, интернет-магазин).
2. Мета-тегам для изображений. Заполняйте атрибуты alt и title для каждой картинки. Названия должны соответствовать содержимому фото, включать одно или несколько ключевых слов. Это помогает поисковым роботам индексировать контент и продвигает сайт в ТОП выдачи.
3. Микроразметке товарных страниц. Особые теги дают важные сведения о продукте в сниппете поисковой выдаче, структурируют данные для роботов и пользователей. Настройте микроразметку, используя теги Product и Offer. Также можно добавлять тег Review (для показа отзывов), AggregateRating (для отображения рейтинга).
4. Оптимизации текстов. Текстовый контент в карточках должен быть уникальным. Не копируйте его у конкурентов: это крайне плохо скажется на продвижении. Напишите краткое описание и подробный текст, который будет раскрываться при нажатии на кнопку. Подробности и характеристики размещайте под заголовком второго уровня, вставляйте в тексты низко- и среднечастотные запросы по «Яндекс.Wordstat» и Google Adwords. Не пренебрегайте внутренней перелинковкой.
5. Мобильной версии. Оптимизация сайта под мобильные устройства – один из главных факторов ранжирования. Поработайте над адаптивной версией товарных страниц. Проверьте удобство и корректность отображения на различных экранах, протестируйте скорость загрузки, убедитесь в соответствии контентной части в обеих версиях сайта.

Дополнительная ценность

Чтобы карточка лучше ранжировалась и эффективнее продавала, стоит добавить ей дополнительной ценности. Какой именно – зависит от ниши.

Варианты:

• видео. Это отличный инструмент для демонстрации функционала и пояснения настройки сложных продуктов. Например, видеорегистраторов или другой цифровой техники. Рекомендуемая длительность роликов – до 5 минут;
• размерная таблица. Таблички с размерными сетками и параметрами помогают покупателям определиться с выбором одежды и обуви;
• покупка в один клик, в кредит или рассрочку. Такие функции всегда улучшают конвертацию посетителей в клиентов;
• калькулятор для быстрого расчета стоимости. Незаменим при продажах услуг и товаров разной комплектации;
• рейтинги. На статистику и оценки реальных потребителей ориентируется более 90% аудитории;
• уведомление о скидках. Сообщения о снижении цены на понравившийся продукт мотивируют клиентов ждать выгодных условий для покупки и не уходить к конкурентам;
• обратная связь. Возможность получить консультацию во всплывающем чате или через кнопку обратного звонка увеличивает количество обращений и коэффициент конверсии на 30-40%.

Примеры хороших карточек товара

В среде электронной коммерции можно встретить много эталонных товарных страниц с грамотной структурой, отличным визуалом и уникальными «фишками». Например, карточки интернет-магазинов Wildberries, Ozon, Amazon, Litres, Kupivip.

Что в них особенного, помимо качественного оформления:

• иллюстрации выбора цвета. Главная картинка в Amazon может меняться при наведении курсора на товар в определенной цветовой гамме;
• подсказки по размерам. Размерная сетка в Kupivip появляется в отдельном всплывающем окне с инструкцией по снятию мерок;
• детали, облегчающие выбор. В Ozon основная информация о доставке и гарантиях вынесена в карточки в виде значков и короткого сопровождающего текста.

На удачные, профессионально оформленные страницы стоит равняться, но не слепо копировать их. Будьте оригинальны: это привлекает клиентов.

Заключение

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