Как оптимизировать карточки товара в интернет-магазине: рекомендации с точки зрения SEO и юзабилити

Главный элемент любого интернет-магазина – карточка товара. От того, насколько хорошо карточка продумана и оптимизирована, зависит сразу несколько показателей: 

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

В статье собрали 14 советов по оптимизации карточки товара. Внедряйте их и используйте в качестве чек-листа для проверки.  

1. Используйте ЧПУ для адресов страниц 

Человекопонятные урлы важны как в карточках товаров, так и на сайте в целом. ЧПУ – это когда в URL-адресе страницы используются понятные слова (например, название модели), а не рандомно сгенерированный текст или цифры.  

Вот так выглядит человекопонятный урл 

А здесь – пример непроработанного URL 

Чем полезны ЧПУ: 

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

В ЧПУ можно использовать транслитерацию или слова на английском. Впрочем, в Рунете больше популярен первый вариант – транслитерация понятна большему количеству пользователей, к тому же ее понимают поисковики. 

2. Проработайте структуру карточки товара 

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

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

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

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

Главное правило: основные элементы карточки товара должны находиться на первом экране (фото, цена, кнопка «Купить», информация о наличии, опции, основные характеристики).  

Пример удобной и хорошо считываемой структуры 

А такая карточка воспринимается значительно хуже 

3. Пропишите расширенные заголовки на страницах товаров 

Для эффективного продвижения в поиске важно прорабатывать заголовки товарных карточек. Вот основные рекомендации: 

• Прописывайте развернутое название для каждого товара. По возможности, название должно отличаться от заголовков, которые используют конкуренты. 
• Не используйте сокращения (кроме сокращений, применяемых для мер измерений – «кг», «м» и других общепринятых сокращений). 

Пример правильного использования сокращений: 

А здесь из-за сокращений уже не совсем понятно, что именно продается: 

• Используйте правильную и логичную структуру заголовков: сначала название самого товара (к примеру, «Футболка женская»), затем другие элементы и характеристики (цвет, бренд, модель). Такие заголовки более удобны для пользователей, а также улучшают продвижение по НЧ-запросам. 
• Название товара должно размещаться в html-теге h1 (заголовок первого уровня). Проверьте это, особенно если используете самописную CMS. 

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

4. Проработайте описание и характеристики товара 

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

Для этого есть три основных элемента: 

• фото;
• описание; 
• характеристики.  

С фото все понятно, а на описании и характеристиках остановимся немного подробнее. 

Характеристики – перечень основных свойств товара (вес, размеры, материал, комплектация, ограничения и особенности применения и т. д.). 

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

Основные задачи описания: 

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

Рекомендации при составлении и оптимизации описаний следующие: 

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

Приведем пример хорошего и структурированного описания: 

Антипример – описание неструктурированно, размещено сплошным текстом: 

Написать много текстов для большого количества товаров – непростая задача. Быстро составить оптимизированные описания можно, заказав услугу «Наполнение сайта» в PromoPult. Копирайтеры напишут любое количество текстов согласно ТЗ всего за три рабочих дня по цене 250 рублей за 1000 знаков. В стоимость входит также и профессиональная редактура. 

5. Используйте навигацию вида «хлебные крошки» 

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

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

Для SEO предпочтительно использовать именно полные «хлебные крошки».  

6. Уделите внимание отображению цен и скидок 

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

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

Цену со скидкой выделяйте визуально: перечеркните старую цену и укажите новую. Если проводите промоакции, используйте слова «скидка», «распродажа» и т.д. в Title и Description – это позволит выделить ваши сниппеты в поисковой выдаче и повысить CTR.  

Хорошо заметная цена со скидкой: 

Цена почти сливается с другим текстом – ее можно найти, но лучше сделать более крупной и заметной:  

7. Добавьте профессиональные фото товара с разных ракурсов 

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

Что должно быть на фото: 

• разные ракурсы товара;
• детализация мелких элементов – например, детали оборудования или приборов; 
• понятное представление о размерах товара (например, в сравнении с другими предметами). 

Пример хороших фото с возможностью увеличения и просмотра мельчайших деталей: 

Антипример – всего два фото, да и те посредственного качества: 

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

• прописывайте атрибуты alt для каждого изображения (если товаров много, найдите способ автоматизировать это); 
• сжимайте изображения для ускорения загрузки страницы, но следите, чтобы качество не проседало; 
• прописывайте понятные названия для файлов с изображениями (используйте ЧПУ). 

8. Акцентируйте внимание на кнопке «Купить» 

Кнопка «Купить» – основной конверсионный элемент карточки товара. Она должна быть максимально заметной и понятной для пользователя, который уже готов совершить покупку.  

При размещении кнопки «Купить» на странице товара не нужен особый креатив, главное следовать нескольким базовым рекомендациям: 

• Кнопка «Купить» должна находиться на первом экране – так она всегда будет на виду и пользователю не придется искать ее в других местах страницы. 
• Название кнопки – «Купить» или «В корзину». Другие варианты могут сбивать пользователей с толку.  
• Если в карточке товара используете кнопки «Купить» и «Купить в 1 клик», визуально разделите их, сделав больше акцента на кнопке «Купить». «Купить в 1 клик» лучше делать ссылкой или вообще использовать виджет обратного звонка. 

Хороший пример – кнопка «В корзину» заметна и расположена в блоке с ценой: 

А так делать не стоит. «Купить» и «Купить в 1 клик» визуально не разделены, к тому же плохо сверстаны: 

Дополнительно можете протестировать разные варианты отображения кнопки «Купить». Тестируйте цвет, размер, расположение и отслеживайте, влияют ли изменения на конверсию. 

9. Реализуйте функционал сравнения, подбора размера и другие элементы для взаимодействия 

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

В карточках товаров полезно размещать такой функционал: 

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

10. Укажите данные о способах оплаты, доставки и наличии товара 

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

• Способы оплаты. Разместите иконки поддерживаемых платежных систем рядом с кнопкой «Купить», чтобы пользователи сразу могли видеть все доступные варианты оплаты. 
• Способы и условия доставки. Полезно выводить стоимость доставки (хотя бы ориентировочную), сроки, адреса пунктов самовывоза.
• Информация о наличии товара – если у вас часто покупают несколько единиц одного товара, указывайте доступное количество на складе. Так пользователи смогут видеть, есть ли в наличии нужное количество. 

11. Добавьте блоки с товарными рекомендациями: комплекты, сопутствующие, рекомендованные 

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

Также полезно размещать предложения купить комплект товаров и получить скидку (например, основной товар + аксессуары). 

12. Добавьте блок с отзывами

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

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

13. Адаптируйте карточку под мобильные устройства 

Адаптация сайтов под мобильные уже не просто тренд, а необходимость. Хоть пользователи совершают покупки с любых устройств, во многих сегментах ecommerce доля мобильного трафика давно превышает 50%.  

Вот на что нужно обратить внимание: 

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

Хороший пример карточки товара, адаптированной к мобильным устройствам: 

А в этом примере на мобильных загружается десктопная версия. Скорее всего, у мобильного трафика здесь будет высокий показатель отказов: 

14. Используйте микроразметку 

Микроразметка в карточках товаров важна для SEO: 

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

В Schema.org есть специальный тип разметки для товаров – «Product». С помощью этого типа разметки можно указать основные параметры товара: название, бренд, год выпуска и другие характеристики. А с помощью «AggregateRating» и «Review» можно передавать поисковым системам данные о рейтинге и отзывах о товаре: 

Обратите внимание! В зависимости от того, какая поисковая система для вас приоритетнее в плане продвижения, формат разметки будет отличаться: 

• для Google микроразметка должна быть в формате JSON-LD;
• для Яндекса – microdata или RDFa. 

Чек-лист: проверьте, оптимизированы ли ваши карточки товаров 

Используйте этот чек-лист для быстрой проверки качества проработки карточки товара. Если возле каждого пункта вы можете поставить галочку – значит у вас с карточками все в порядке. 

1. Реализованы ЧПУ. 
2. Продумана структура основных элементов карточки и акценты. 
3. Прописаны расширенные заголовки. 
4. Товар содержит полноценное описание и характеристики.
5. Реализованы «хлебные крошки» в навигации. 
6. Цена товара заметна. В товарах со скидкой наглядно показана выгода.
7. Загружены подробные фото товара в хорошем качестве. 
8. Кнопка «Купить» размещена в блоке с ценой, хорошо заметна и не сливается с другими элементами. 
9. В карточке товара есть кнопки избранного, сравнения, социального шеринга. Реализован дополнительный функционал, с которым пользователи могут взаимодействовать. 
10. Выводится информация о способах оплаты, вариантах и сроках доставки, наличии товара. 
11. Есть блоки «Купить комплектом», «Рекомендованные товары», «Сопутствующие товары» и т.д. 
12. На странице отображаются отзывы покупателей, а также реализована возможность оставлять новые отзывы. 
13. Карточка товара адаптирована под смартфоны и планшеты. 
14. Реализована микроразметка информации о товарах. 

После проработки карточки товара не расслабляйтесь – отслеживайте, как с ней взаимодействуют пользователи (для этого используйте отчеты систем аналитики и Вебвизор в Яндекс.Метрике). Если какой-то элемент непонятен пользователям и снижает конверсию, проанализируйте причины и внедрите изменения.