Как сделать карточку товара для сайта html css

Как создать карточки товаров на сайте

Узнайте, как создать привлекательные и эффективные карточки товаров для повышения конверсии вашего интернет-магазина!

Алексей Кодов
Автор статьи
23 июня 2023 в 15:21

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

1. Определение структуры карточки товара

Прежде всего, необходимо определить структуру карточки товара. Она должна содержать следующую информацию:

• изображение товара
• название товара
• краткое описание
• цена
• кнопка «добавить в корзину» или «купить»

Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT

2. Верстка карточки товара

После определения структуры можно приступить к верстке карточки товара. Используйте HTML и CSS для создания разметки и стилизации элементов карточки. Вот пример верстки карточки товара:

 
 
Название товара
 
Краткое описание товара
 Цена товара Добавить в корзину 
 

3. Стилизация карточки товара

Следующим шагом будет стилизация карточки товара с помощью CSS. Учтите, что дизайн карточки должен быть привлекательным и удобным для пользователя. Вот пример стилизации карточки товара:

.product-card < display: flex; flex-direction: column; align-items: center; border: 1px solid #ccc; padding: 16px; border-radius: 4px; >.product-card__image < width: 100%; object-fit: cover; margin-bottom: 16px; >.product-card__title < font-size: 18px; font-weight: bold; margin-bottom: 8px; >.product-card__description < font-size: 14px; margin-bottom: 16px; >.product-card__price < font-size: 16px; font-weight: bold; margin-bottom: 16px; >.product-card__button

�� Не забывайте адаптировать карточку товара для мобильных устройств с помощью медиа-запросов.

4. Интеграция карточки товара в сайт

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

Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT

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

Дизайн карточек товара интернет-магазина

Продажа товаров через Интернет приобретает все большую популярность. Карточка товара (product card) представляет собой детальное описание продукта вместе с функциональными элементами (кнопка «купить/добавить в корзину», доступные цвета, размеры и т.д.).

Функциональность карточки товара можно расширить дополнительными кнопками, а с помощью трансформаций и переходов придать элементам динамичность.

Пример 1

 
  
Маленькое черное платье
 ₽ 1999 В корзину 
 

* < box-sizing: border-box; >.product-item < width: 300px; text-align: center; margin: 0 auto; border-bottom: 2px solid #F5F5F5; background: white; font-family: "Open Sans"; transition: .3s ease-in; >.product-item:hover < border-bottom: 2px solid #fc5a5a; >.product-item img < display: block; width: 100%; >.product-list < background: #fafafa; padding: 15px 0; >.product-list h3 < font-size: 18px; font-weight: 400; color: #444444; margin: 0 0 10px 0; >.price < font-size: 16px; color: #fc5a5a; display: block; margin-bottom: 12px; >.button < text-decoration: none; display: inline-block; padding: 0 12px; background: #cccccc; color: white; text-transform: uppercase; font-size: 12px; line-height: 28px; transition: .3s ease-in; >.product-item:hover .button

Пример 2

 
 
   
 
Маленькое черное платье
 ₽ 1999 
 
В корзину 
 
 
 

* < box-sizing: border-box; >.product-item < width: 300px; margin: 0 auto; padding: 10px 10px 5px 10px; border: 1px solid #eee; background: white; font-family: "Open Sans"; overflow: hidden; transition: .4s linear; >.product-img < transition: 1s ease-in-out; >.product-img:hover < transform: scale(1.1); >.product-img img < display: block; width: 100%; >.product-list < margin-top: 15px; >.product-list h3 < font-weight: 700; color: #39404B; margin: 0; text-transform: uppercase; font-size: 14px; line-height: 2; >.price < color: #E34D38; display: block; margin-bottom: 12px; >.stars < height: 14px; line-height: 14px; margin: 7px 0; >.stars:before < content: "\f005\f005\f005\f005\f006"; color: #EFB71C; font-size: 14px; font-family: FontAwesome; >.actions < border-top: 1px solid #eee; padding-top: 4px; font-size: 13px; height: 30px; line-height: 30px; >.actions:after < content: ""; display: table; clear: both; >.add-to-cart, .add-to-links < float: left; >.cart-button < text-decoration: none; color: #8C877C; padding-right: 20px; border-right: 1px solid #ddd; transition: .4s linear; >.cart-button:before < content: "\f07a"; font-family: FontAwesome; margin-right: 10px; >.add-to-cart:hover .cart-button, .wishlist:hover, .compare:hover < color: #E34D38; >.wishlist, .compare < color: #8C877C; padding-left: 20px; transition: .4s linear; >.wishlist:after, .compare:after < display: inline-block; font-family: FontAwesome; font-size: 13px; >.wishlist:after < content: "\f004"; >.compare:after

Пример 3

 
 
  
В корзину 
 
 
Маленькое черное платье ₽ 1999 
 

* < box-sizing: border-box; >.product-wrap < width: 300px; margin: 0 auto; background: white; padding: 0 0 20px; text-align: center; font-size: 14px; font-family: Lora; text-transform: uppercase; >.product-item < position: relative; overflow: hidden; >.product-wrap img < display: block; width: 100%; >.product-buttons < position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .8); opacity: 0; transition: .3s ease-in-out; >.button < text-decoration: none; color: #c0a97a; font-size: 12px; width: 140px; height: 40px; line-height: 40px; position: absolute; top: 50%; left: 50%; border: 2px solid #c0a97a; transform: translate(-50%, -50%) scale(0); transition: .3s ease-in-out; >.button:before < content: "\f07a"; font-family: FontAwesome; margin-right: 10px; >.product-item:hover .product-buttons < opacity: 1; >.product-item:hover .button < transform: translate(-50%, -50%) scale(1); >.button:hover < background: black; >.product-title < color: #5e5e5e; >.product-title a < text-decoration: none; color: #2e2e2e; font-weight: 600; margin: 15px 0 5px; padding-bottom: 7px; display: block; position: relative; transition: .3s ease-in-out; >.product-title a:after < content: ""; position: absolute; width: 40px; height: 2px; background: #2e2e2e; left: 50%; margin-left: -20px; bottom: 0; transition: .3s ease-in-out; >.product-title a:hover < color: #c0a97a; >.product-title:hover a:after < background: #c0a97a; >.product-price

Пример 4

 
 
 
 
Маленькое черное платье
 ₽ 1999 
 

* < box-sizing: border-box; >.product-inner < width: 300px; margin: 0 auto; background: white; text-align: center; border-bottom: 2px solid #ebebec; transition: .2s linear; >.product-inner:hover < border-color: #bca480; >.product-wrap < position: relative; overflow: hidden; margin-bottom: 15px; >.product-wrap img < display: block; width: 100%; >.actions < position: absolute; left: 0; bottom: -20%; width: 100%; background: rgba(59, 62, 67, 0.75); transition: .3s linear; >.product-inner:hover .actions < bottom: 0; >.actions a < text-decoration: none; float: left; width: 33.33333333333333%; color: white; padding: 15px 0; transition: .2s linear; >.actions a:hover < background: rgba(59, 62, 67, 0.85); >.actions a:before < font-family: "FontAwesome"; >.add-to-cart:before < content: "\f07a"; >.quickview:before < content: "\f002"; >.wishlist:before < content: "\f08a"; >.product-info < padding-bottom: 10px; font-family: 'Noto Sans', sans-serif; >.product-title < margin: 0 0 10px 0; font-family: 'Noto Sans', sans-serif; >.product-title a < text-decoration: none; color: #1e1e1e; font-weight: 400; font-size: 16px; >.price

Пример 5

 
 
 
  
В корзину 
 
 
 
Маленькое черное платье 
 1999 
 
 

* < box-sizing: border-box; >.item < width: 300px; border: 1px solid rgba(0, 0, 0, .08); padding: 15px 0; margin: 0 auto; background: white; >.item a < text-decoration: none; outline: 0; >.product < padding: 0 15px; position: relative; >.thumb-img < position: relative; overflow: hidden; >.thumb-img img < width: 100%; display: block; >.thumb-img:after < content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: .3s ease-in-out; >.product:hover .thumb-img:after < opacity: 1; >.actions < position: absolute; z-index: 2; top: 100%; left: 0; right: 0; padding: 0 15px; text-align: center; opacity: 0; transition: .3s ease-in-out; >.product:hover .actions < top: 50%; opacity: 1; >.actions a < margin: 7px 6px; color: white; height: 30px; line-height: 26px; display: inline-block; border-radius: 30px; font-size: 12px; text-transform: uppercase; text-align: center; border: 2px solid white; background: transparent; transition: .3s ease-in-out; >.share-button < width: 30px; >.add-to-cart:hover < background: #A2927F; >.actions a:hover < border-color: #A2927F; background: #A2927F; >.share-wrap < display: inline-block; height: 30px; position: relative; margin: 7px 6px; >.share-item < width: 200px; margin-left: -100px; position: absolute; z-index: 3; bottom: 38px; left: 50%; opacity: 0; visibility: hidden; text-align: center; transition: .3s ease-in-out; >.share-wrap:hover .share-item < opacity: 1; visibility: visible; >.add-to-cart < padding: 0 20px; >.product-about < padding: 20px 0 0; text-align: center; >.product-title < font-family: 'Open Sans', sans-serif; line-height: 1.1; font-size: 16px; margin: 5px 0 15px; font-weight: normal; >.product-title a < color: #373737; >.price

Пример 6

 
 
 
 
 
Быстрый просмотр В корзину 
 
 
Маленькое черное платье
 
₽ 1999
 
 

* < box-sizing: border-box; >.border < width: 300px; margin: 0 auto; background: white; padding: 20px; border: 1px solid #F1E7E8; >.wrap < height: 100%; position: relative; >.product-wrap < position: relative; >.product-wrap:after < content: ''; background: rgba(73, 102, 162, .5); position: absolute; left: 0; right: 0; bottom: 0; top: 0; opacity: 0; transform: scale(.3); transition: .3s ease-in-out; >.border:hover .product-wrap:after < opacity: 1; transform: scale(1); >.product-wrap a < display: block; text-decoration: none; >.product-wrap img < display: block; width: 100%; >.loop-action < position: absolute; left: 50%; top: 50%; opacity: 0; transform: translate(-50%, -50%); transition: .3s ease-in-out; >.border:hover .loop-action < opacity: 1; >.loop-action a < text-decoration: none; display: block; border: 1px solid white; white-space: nowrap; text-transform: uppercase; padding: .5em 1em; font-size: 14px; line-height: 1.6; outline: none; position: relative; overflow: hidden; text-align: center; color: white; min-width: 160px; margin: 5px auto; transition: .3s ease-in-out; >.loop-action a:after < content: ''; position: absolute; left: -220%; top: -500%; width: 140%; height: 1000%; transform: rotate(45deg); background: white; z-index: -1; transition: .3s ease-in-out; >.loop-action a:hover < color: black; >.loop-action a:hover:after < left: 0%; >.border:hover < border-color: #4966A2; >.product-info < padding-top: 15px; >.stars < font-size: 14px; font-family: FontAwesome; >.stars:before < content: "\f005\f005\f005\f005\f123"; color: #F2453E; >.product-title < font-weight: normal; font-family: "Open Sans"; color: #162546; font-size: 18px; >.price

Пример 7

 
 
   
 
Маленькое черное платье
 
₽ 1999
 
 

.product-wrap < width: 300px; text-align: center; margin: 0 auto; background: white; >.product-image < position: relative; overflow: hidden; >.product-image a < display: block; >.product-image img < display: block; width: 100%; >.shadow < background: rgba(0, 0, 0, 0.3); position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: .3s ease-in-out; >.product-wrap:hover .shadow < opacity: 1; >.detail-link < text-decoration: none; width: 50px; height: 50px; background: #ff7659; border-radius: 3px; opacity: 0; position: absolute; left: 50%; top: 50px; transform: translate(-50%, -50%) rotate(45deg); transition: .3s ease-in-out; >.detail-link:before < content: "\f06e"; font-family: FontAwesome; color: white; font-size: 20px; display: block; height: 50px; line-height: 50px; width: 50px; transform: rotate(-45deg); transition: .3s ease-in-out; >.product-wrap:hover .detail-link < opacity: 1; top: 50%; >.actions < width: 100%; height: 47px; position: absolute; bottom: -47px; right: 0; opacity: 0; transition: 0.5s ease-in-out; >.product-wrap:hover .actions < bottom: 0; opacity: 1; >.actions-btn < float: right; >.actions-btn a < display: inline-block; background: white; color: #555; width: 47px; height: 47px; line-height: 47px; text-decoration: none; transition: .3s ease-in-out; >.actions-btn a:hover < background: #ff7659; color: white; >.actions-btn a:after < font-family: FontAwesome; font-size: 14px; >.add-to-cart:after < content: "\f07a"; >.add-to-wishlist:after < content: "\f004"; >.add-to-compare:after < content: "\f079"; >.product-list < margin: 20px 0; font-family: 'Open Sans', serif; >.product-list h3 < color: #555; font-size: 15px; >.price

Пример 8

 
 
 
 
Маленькое черное платье
 
₽ 1999
 
 

* < box-sizing: border-box; >.product-wrap < width: 300px; text-align: center; background: white; margin: 0 auto; >.product-image < position: relative; >.product-image a < display: block; >.product-image img < display: block; width: 100%; >.shadow < position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .1); opacity: 0; transition: 0.5s ease-in-out; >.product-wrap:hover .shadow < opacity: 1; >.actions < bottom: 15px; right: 15px; position: absolute; >.add-to-cart < opacity: 0; visibility: hidden; transform: translate(0, -50px); transition: 1s ease-in-out; >.actions a < background: #202020; color: white; display: block; height: 36px; line-height: 36px; width: 42px; transition: .3s ease-in-out; text-decoration: none; >.actions a:before < font-family: FontAwesome; font-size: 14px; >.add-to-cart-button:before < content: "\f07a"; >.add-to-wishlist-button:before < content: "\f004"; >.add-to-compare-button:before < content: "\f079"; >.quikview-button:before < content: "\f002"; >.actions a:hover < background: #67BFA6; >.product-wrap:hover .add-to-cart < opacity: 1; visibility: visible; transform: translate(0, 0); >.add-to-wishlist < opacity: 0; visibility: hidden; transform: translate(0, -50px); transition: .8s ease-in-out; margin: 9px 0 0; >.product-wrap:hover .add-to-wishlist, .product-wrap:hover .add-to-compare, .product-wrap:hover .quikview < opacity: 1; visibility: visible; transform: translate(0, 0); >.add-to-compare < opacity: 0; position: relative; visibility: hidden; transition: .6s ease-in-out; transform: translate(0, -50px); margin: 9px 0 0; >.quikview < opacity: 0; visibility: hidden; transition: .4s ease-in-out; transform: translate(0, -50px); margin: 9px 0 0; >.product-list < margin-top: 20px; padding-bottom: 20px; text-align: center; font-family: 'Open Sans', serif; >.product-list h3 < color: #555; font-size: 15px; font-family: 'Open Sans', serif; >.price

Продающая карточка товара в интернет-магазине

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

Обязательные составляющие карточки товара

Без 8 базовых элементов нельзя обойтись ни в одном онлайн-магазине:

1. Название товара.
2. Изображения (стандартные/увеличенные).
3. Варианты товара (размеры, цвета).
4. Наличие в продаже.
5. Цена.
6. Кнопка Купить/Добавить в корзину.
7. Характеристики продукта.
8. Условия доставки.

Кратко охарактеризуем каждый из элементов.

Название товара

Наименование товара должно быть полным и включать в себя:

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

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

Изображения

Главное правило – изображение должно быть качественным и оставаться таковым даже при увеличении. В большинстве случаев для серийных однотипных товаров (например, бытовая техника) это не является проблемой. Однако в отношении некоторых категорий, например одежды, без уникальных «живых» снимков не обойтись. Если говорить об интернет-магазине одежды, то очень хорошо, если изображение модели, одетой в продаваемую вещь, будет снабжено комментарием о росте, объеме груди/талии/бедер. Это полезно для покупателя, позволяет понять, как предмет одежды будет «сидеть» на нем. Так делают все крупные бренды, и это хороший пример для подражания.

Варианты товара

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

Наличие в продаже

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

• имеется непосредственно в магазине (т.е. могут быть доставлены сразу);
• лежит на локальном складе (могут быть доставлены через 1-2 дня);
• находится только на основном складе (доставляются дольше обычного).

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

Цена

Важно не просто указать цену, но и показать, что она выгодна для покупателя. Это можно сравнением с другими ценам, представленными на рынке:

• у конкурентов;
• в оффлайн-магазине;
• цена без скидки.

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

Кнопка Купить/Добавить в корзину

К кнопке действия предъявляются следующие требования:

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

В отношении потребительского поведения никакой разницы от того, как будет названа кнопка – «Купить» или «Добавить в корзину», нет.

Характеристики продукта

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

Условия доставки

Наконец, последний обязательный элемент – условия доставки – обычно размещается сразу после кнопки действия. Он должен давать пользователю четкие ответы на вопросы:

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

Хотите заказать комплексное интернет-продвижение или разработку сайта?
Заполните простую форму и мы свяжемся с вами в ближайшее время.
Получить рассчет

Дополнительные элементы

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

Путь каталога

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

Отзывы и оценки покупателей

Идеально, если карточка товара будет сопровождаться отзывами о купленном товаре и оценками. Вот 3 основные причины:

1. Наличие отзывов наглядно демонстрирует другим пользователям, что люди, действительно, приобретают товары в этом магазине.
2. Для человека, намеревающегося совершить покупку, нет ничего более важного, чем мнение других людей, которые уже используют товар.
3. Отзывы покупателей помогают пользователям делать выбор, что увеличивает продажи.

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

Таблица размеров

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

Отложенный товар

Возможность отложить товар или «Добавить в желания» — полезная функция, позволяющая:

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

«С этим товаром покупают…» или «Дополните образ»

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

Микроразметка Product

Микроразметка для товаров — это набор HTML тэгов, которые помогают поисковым роботам распознать, что на странице есть карточка товара. Какие преимущества ее использования?

С помощью микроразметки можно добиться более привлекательного сниппета — короткого «анонса» в поисковой выдаче, который включает заголовок страницы, ее описание и различные элементы, в том числе:

• стоимость товара;
• изображение;
• рейтинг от пользователей;
• статус (в наличии/нет в наличии/под заказ);
• способы доставки;
• бренд и другие.

Зачем это нужно

Сниппет формируется на основе данных, которые поисковые роботы собирают со страницы. Именно микроразметка Product позволяет вам указать именно ту информацию, которую вы хотите видеть в сниппете страниц с товарами вашего интернет-магазина. Помните: чем привлекательней будет «анонс» вашей страницы, тем выше шанс, что пользователи будут кликать по нему, чтобы узнать больше. Это значит, что хороший сниппет будет иметь высокий показатель кликабельности (CTR). В условиях современной конкуренции хороший сниппет это не прихоть SEO специалиста, а необходимость. Поэтому вопрос внедрять или не внедрять микроразметку на страницах возникать не должен — однозначно внедрять

На сайтах используется в основном два вида микроразметки — Shema.org и Open Graph. Последняя применяется преимущественно для создания красивого анонса для вашей ссылки при отображении ее в соцсетях (Телеграм, Фейсбук, Твиттер и т.п.). Shema.org чаще используется для разметки страниц — ее без проблем понимают популярные поисковики.

Элементы микроразметки карточки товара

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

• Name (Text) — название товара;
• Description (Text) — его описание;
• Price (Number) — стоимость товара;
• PriceCurrency (Text) — обозначение валюты, для корректного отображения следует использовать код валюты в системе ISO 4217;
• Availability — наличие или отсутствие товара, при этом, если товар не в наличии, цена в сниппете будет автоматически скрыта;
• Image (Text) — адрес, по которому лежит изображение товара для отображения в сниппете.

Дополнительно можно назначить и другие свойства, например, бренд (Brand), модель товара (Model) или способ доставки (AvailableDeliveryMethod). После внедрения микроразметки не забудьте проверить ее на валидность.

Выводы

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

SEO-оптимизация карточки товара для продвижения интернет-магазина в ТОП

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

Правильная оптимизация этих страниц позволит решить сразу несколько задач:

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

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

Используйте для продвижения точные продуктовые запросы

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

Результаты поиска по такой фразе должны выводить пользователя непосредственно на страницу указанного в запросе продукта. Пример показан на скриншоте ниже.

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

Оптимизируйте заголовки Title и Н1 и мета-описание Description

• В мета-теге Title и заголовке карточки нужно прописать уникальное развернутое наименование товара. Укажите его тип, бренд, название конкретной модели и т. п.
• Часто в интернет-магазинах встречаются товары с одинаковыми названиями. Чтобы избежать дублирования заголовков на их карточках, рекомендуется добавлять к названию продукта уникальные параметры: цену, цвет, артикул и т. д.
• Если количество товаров велико, можно настроить автоматическую генерацию заголовков и мета-описаний, используя набор уникальных свойств, чтобы избежать появления дублей.
• Для оптимизации страницы под ключевой запрос включите слова из него в заголовки Title и Н1. Проанализируйте, по каким словам пользователи чаще всего ищут ваш товар, и пропишите их в мета-заголовке Title.
• Title обычно используется поисковыми системами для формирования сниппета (краткого описания сайта в поисковой выдаче) и должен повышать его кликабельность. Поэтому рекомендуется добавлять в Title слова, побуждающие к целевому действию и подчеркивающие коммерческую направленность страницы (купить, заказать, цена, название города, где вы продаете товар и т. п.).
• Мета-описание Description также может быть использовано в тексте сниппета, поэтому необходимо сделать его информативным и привлекательным. Включите в него ваши преимущества, информацию о доставке и гарантиях, призыв к действию.

Добавить ключевые слова в Title, Description и H1 так, чтобы сделать карточку товара релевантной запросу и при этом не переоптимизировать её, помогут рекомендации по оптимизации страницы от сервиса «Лабрика».

Сделайте качественное описание товара

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

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

Описание должно быть читабельным, структурированным и не слишком длинным – определиться с объемом помогут примеры аналогичных страниц у конкурентов из ТОП-10. Добавьте вхождения ключевых слов в текст описания. Это поможет поисковым роботам понять содержание страницы и повысит её релевантность запросам пользователей. Плотность вхождений должна быть не меньше чем у конкурентов. Помните, что избыточное и неестественное употребление ключевых фраз может привести к наложению санкций.

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

Дополните описание характеристиками – кратким перечнем основных свойств товара. Желательно оформить их наглядно — в виде таблицы или списка.

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

Что делать, если товаров много?

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

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

Добавьте изображения товара

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

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

Размещайте изображения высокого разрешения. Чтобы качественные фотографии быстро загружались, следует предварительно их сжать без потери качества Для этого используют различные плагины, графические редакторы (Adobe Photoshop и др.) или специализированные онлайн-сервисы (Compressor.io, TinyPNG и др.).

Сделайте SEO-оптимизацию изображений – это позволит увеличить объем трафика из поиска по картинкам. Пропишите атрибуты Alt (альтернативное описание) и Title (название), чтобы поисковые системы смогли определить содержание изображения. Текст в атрибуте Alt должен содержать название товара. Google отдает предпочтение изображениям, у которых в атрибутах названия и описания содержится ключевое слово.

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

Подробнее с требованиями к визуальному контенту можно ознакомиться в справочной статье для веб-мастеров.

Размещайте видеообзоры продуктов

Наличие видео на карточке товара способствует увеличению конверсий, поскольку даёт возможность посмотреть на продукт «в действии». Это особенно важно для реализации сложных товаров, требующих дополнительных пояснений по использованию.

Кроме того, видеоролики увеличивают количество кликов на странице и время, проведенное на сайте, что улучшает поведенческие факторы вашего ресурса.

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

Сделайте заметную кнопку «Купить»

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

Добавьте кнопку “Купить в 1 клик” для тех, кто хочет совершить покупку быстро, без оформления её через корзину – это может стать вашим конкурентным преимуществом.

Укажите актуальные цены и скидки

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

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

Дайте информацию об оплате и доставке

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

Сообщите о предоставляемых гарантиях

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

Укажите количество товара в наличии

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

Что делать, если товара нет в наличии?

• Укажите на странице, что товар отсутствует. Сделайте оповещение хорошо заметным. Вместо фразы «нет в наличии» можно использовать надпись «под заказ» и предусмотреть возможность предзаказа временно отсутствующих позиций. Можно настроить email-оповещение о поступлении товара в продажу.
• Возможность купить товар или добавить в корзину не должна предоставляться во время его отсутствия – уберите эти кнопки с карточки товара. Перенесите отсутствующий товар в конец списка на странице категории. Если товар больше не появится, уберите его из внутреннего поиска.
• Не спешите удалять страницу – ссылки на несуществующие страницы не любят ни пользователи, ни поисковые системы. Изучите статистику посещений — если на карточку товара активно заходят посетители, оставьте на странице альтернативные товары. Если же существенного трафика нет, сделайте переадресацию на похожий товар или на страницу товарной категории.

Предоставьте дополнительный функционал

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

• сравнение товаров;
• добавление в избранное;
• подбор по цвету и размеру;
• задать вопрос по товару и др.

Покажите рейтинг и отзывы потребителей

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

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

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

Разместите ссылки на дополнительные товарные предложения

Ссылки на страницы с полезным дополнительным контентом улучшают поведенческие показатели, так как мотивируют посетителей проводить на сайте больше времени, активно взаимодействовать с ним и совершать ещё больше покупок.

Добавьте блоки ссылок на страницы, которые могут заинтересовать пользователей:

• «С этим товаром покупают»;
• «Вместе дешевле»;
• «Ранее просмотренные товары»;
• «Похожие товары» и т. д.

Добавьте «хлебные крошки»

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

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

Устанавливайте кнопки «поделится в социальных сетях»

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

Используйте ЧПУ-адреса

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

Внедряйте микроразметку

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

Для семантической разметки различных характеристик товара (название, бренд, модель, цена, наличие и др.) рекомендуется использовать форматы Schema.org Product и Offer. Также есть типы разметки «AggregateRating» и «Review», которые передают информацию о рейтинге и отзывах.

Проверить разметку можно с помощью валидатора от Яндекса или инструмента проверки структурированных данных от Google.

Для передачи структурированных данных в социальных сетях используется разметка Open Graph.

Избегайте наличия дублей карточек товаров

В Интернет-магазинах нередко создаются товарные страницы с идентичным контентом, но разными URL-адресами — например, если один и тот же товар находится в разных категориях. Чтобы поисковая система не расценивала такие страницы как дубли, необходимо прописать в их коде атрибут rel=canonical, в котором размещается ссылка на предпочтительную для индексации каноничную страницу.

Быстро проверить сайт на наличие дублей можно с помощью технического аудита на сервисе «Лабрика». Данные будут предоставлены в отчёте «Похожие страницы».

Оптимизируйте скорость загрузки

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

Сделайте мобильную адаптацию

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

Приведенные нами рекомендации помогут вам создать удобные для пользователей карточки товара, которые будут хорошо ранжироваться в поиске, привлекать целевой трафик и увеличивать продажи. Однако следует учитывать, что оптимизация страниц для разных видов продукции будет различаться. Комплексный SEO-аудит сайта на сервисе «Лабрика» поможет выявить и исправить недостатки именно ваших карточек товаров.

Читать дальше подобные статьи

• Коммерческие факторы ранжирования сайта в Яндекс и Google
• Как определить, какие коммерческие факторы нужны вашему сайту?
• Как написать эффективный заголовок по 4u формуле? Примеры продающих заголовков
• Стратегии и инструменты контент-маркетинга для продвижения сайта