Микроразметка карточки товара в формате Schema

Зачем нужна микроразметка карточки товара

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

Например, вот так:

Яндекс

Google

Чтобы все заработало как надо — будем использовать формат schema.org под названием Product с дополнительным свойством Offer.
Product — позволяет сделать разметку не только для товара. По сути — это все, что можно продавать (и не только) на сайте. Даже услуги у которых нет фиксированной стоимости или, например, бесплатный шаблон для wordpress. Что угодно.

А вот Offer — это уже что-то, что имеет цену. Билет в театр, товар или что-то другое.

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

Представим, что мы продаем билеты в кино. У нас есть:

• Название фильма
• Описание фильма
• Изображение (постер)
• Цена билета
• Валюта

По данным schema.org — название, описание и изображение у нас попадает под формат Product, а вот цена — это уже Offer.

Начинаем разметку

Для начала обернем контент в тег <div> с указанием, что мы используем микроразметку:

<div itemscope itemtype="http://schema.org/Product">
Название фильма
Описание фильма
Изображение (постер)
Цена билета
Валюта
</div>

Теперь укажем дополнительное свойство Product

<div itemscope itemtype="http://schema.org/Product">
Название фильма
Описание фильма
Изображение (постер)
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
Цена билета
Валюта
</div>
</div>

А вот теперь самое время закончить разметку при помощи тега <span>

<div itemscope itemtype="http://schema. org/Product">
<span itemprop="name">Название фильма</span>
<span itemprop="description">Описание фильма</span>
<img src="Изображение (постер)" itemprop="image">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">Цена билета</span>
<span itemprop="priceCurrency">Валюта</span>
</div>
</div>

Итоговый вариант будет выглядеть примерно так:

<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Назад в будущее</span>
<span itemprop="description">Отличный фильм о том, как Марти Макфлай попадает в прошлое</span>
<img src="marti.jpg" itemprop="image">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">150</span>
<span itemprop="priceCurrency">RUB</span>
</div>
</div>

Обратите внимание, что валюту надо указывать в формате ISO 4217

Кроме того, есть множество дополнительных свойств, которые можно указать — наличие товара на складе (http://schema.

org/InStock), категория товара (category), цвет (color), бренд (brand) и множество другого. Рекомендую максимально подробно разметить всю информацию, которую удалось добавить к себе на сайт для лучшего эффекта.

Опубликованно 06.11.2018 автором Alferov. Запись опубликована в рубрике Новичкам с метками seo, Микроразметка для интернет-магазинов. Добавьте в закладки постоянную ссылку.

чек-лист для SEO и конверсии — Веб-Центр, блог

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

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

Содержание

Название товара, или Расширенные заголовки

Фотографии и видео

Цена

Кнопка «Купить»

Подробное описание

Характеристики

Перелинковка

Документация

Отзывы

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

Человеко-понятные URL, или ЧПУ

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

Избранное, отложенные товары

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

Мобильная адаптация

Отсутствие дублей

Кнопка «Поделиться»

Скорость загрузки страницы

Наличие кнопки «Купить в 1 клик», или Функция «Быстрый заказ»

Статус наличия товара

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

Название товара, или Расширенные заголовки

Название товара прописывайте развернуто и полностью, не используйте сокращения и аббревиатуры.

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

Пример правильно написанного названия товара в карточке

Фотографии и видео

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

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

• для изображений прописывайте атрибуты alt и title;
• снижайте вес изображений без потери качества, чтобы улучшить скорость загрузки.

Размещайте видео-обзоры продукции: так вы покажете товар в действии или раскроете полный функционал в видеопрезентации.

Пример фотографий продукции в карточке товара

Цена

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

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

Пример оформления цены в карточке товара

Кнопка «Купить»

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

Пример кнопки «Купить» в карточке товара

Подробное описание

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

При составлении описаний, придерживайтесь следующих правил:

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

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

В то же время следите за тем, чтобы не налить воды в текст.

Пример описания товара

Характеристики

Блок «Характеристики» товара чаще все размещают под описанием или в отдельной вкладке под фотографиями продукции.

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

Пример блока «Характеристики» в карточке товара

Перелинковка

Перелинковкой называется процесс связывания страниц между собой: на одних страницах размещают ссылки на другие страницы.

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

Пример такой допродажи – предложения с кухонными аксессуарами в интернет-магазине варочных панелей или рекомендации защитных чехлов и стекол в разделе «Смартфоны».

Пример блока «Ранее вы смотрели»

Пример рекомендаций похожих товаров в карточке товара

Пример с рекомендациями других товаров в интернет-магазине

Документация

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

В качестве документации к медицинским товарам прикладывают регистрационное удостоверение и руководство пользования

Отзывы

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

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

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

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

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

Пример микроразметки типа Product в Schema.org

Человеко-понятные URL, или ЧПУ

Используя ЧПУ, пользователи сразу смогут понять что их будет ждать на странице.

www.site.ru/product-1111.htm – плохой пример.
www.site.ru/catalog/lyustry/ – выглядит лучше, понятнее. Глядя на ссылку, человек понимает, что она ведет на раздел каталога с люстрами.

Пример человеко-понятного URL

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

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

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

Пример хлебных крошек в интернет-магазине

Избранное, отложенные товары

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

Функционал «Избранное» влияет на конверсию продаж и поведенческие факторы

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

Карточка товара должна давать покупателю максимум информации. Поэтому помимо информации о самом товаре разместите следующую информацию:

• Способы оплаты
  Укажите варианты оплаты: наличный, безналичный. Какие платежные системы поддерживаются в вашем магазине. Есть ли минимальная сумма заказа.
• Условия и способы доставки
  По возможности выводите стоимость доставки, адреса пунктов выдачи, сроки.

Информация о доставке в карточке товара упрощает процесс принятия решения о покупке

Мобильная адаптация

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

Мобильная версия интернет-магазина должна быть такой же удобной, как и версия для ПК

Отсутствие дублей

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

Проверить наличие дублей можно с помощью программы Screaming Frog.

Кнопка «Поделиться»

Дополнительный трафик не из поисковых систем положительно влияет на продвижение сайта. Поэтому на страницах карточек товара можно разместить блок «Поделиться» с кнопками на популярные социальные сети. Так пользователям будет удобнее делиться ссылками на товар.

Скорость загрузки страницы

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

Нормальная скорость загрузки страницы современного сайта – 1,5-3 секунды. Держите показатель на этом уровне.

Оценить скорость загрузки можно с помощью сервиса PageSpeed Insights.

Наличие кнопки «Купить в 1 клик», или Функция «Быстрый заказ»

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

Кнопка «Купить в 1 клик» облегчает покупателю взаимодействие с интернет-магазином

Статус наличия товара

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

Указывайте наличие и отсутствие товаров

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

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

Подписывайтесь на наш блог, чтобы не пропускать другие полезные материалы. А также у нас есть Telegram-канал, где вы сможете узнать самые свежие новости интернет-маркетинга.

Хотите, чтобы ваш сайт был на первых местах в поисковой выдаче? Оставьте заявку. Мы свяжемся с вами в рабочее время в течение часа.

микроформатов — HTML: Язык гипертекстовой разметки

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

• Для создания объекта микроформата в атрибуте класса используются имена классов h-*.
• Чтобы добавить свойство к объекту, имена классов p-*, u-*, dt-*, e-* используются для одного из потомков объекта.

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

Микроформаты2 (иногда называемые mf2) — это обновление микроформатов, которое обеспечивает более простой способ аннотирования структурированного синтаксиса и словарей HTML, чем предыдущие подходы с использованием RDFa и микроданных. Эти предыдущие подходы требуют изучения новых атрибутов.

Существуют библиотеки синтаксического анализа с открытым исходным кодом для большинства языков для микроформатов2.

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

Пример HTML

 Alice Blogger
 

Когда синтаксический анализатор обнаружит эти данные, он будет знать, что эта страница содержит «карточку», которая описывает человека или организацию с именем Алиса Блоггер с URL-адресом https://alice.example.com/. Анализатор делает эти данные доступными через API, которые можно использовать для различных приложений. Например, приложение может сканировать страницу в поисках h-card, чтобы использовать ее в качестве информации профиля для того, кто подписался на услугу.

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

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

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

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

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

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

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

• «h-*» для имен корневых классов , например «h-card», «h-entry», «h-feed» и многие другие. Эти корневые классы верхнего уровня обычно указывают тип и соответствующий ожидаемый словарь свойств. Например:
  • h-карта описывает человека или организацию
  • h-entry описывает эпизодический онлайн-контент или онлайн-контент с отметкой даты, например сообщение в блоге
  • h-feed описывает поток или ленту постов
  • Вы можете найти много других словарей на вики microformats2.
• «p-*» для простых (текстовых) свойств , например. «p-имя», «p-резюме»
  • Общий синтаксический анализ простого текста, текст элемента в целом. В некоторых элементах HTML сначала используйте специальные атрибуты, например. img/alt, аббр/название.
• «u-*» для свойств URL , например. «u-url», «u-фото», «u-логотип»
  • Специальный анализ: атрибуты элемента a/href, img/src, атрибуты объекта/данных и т. д. над содержимым элемента.
• «dt-*» для свойств даты и времени , например. «дт-начало», «дт-конец», «дт-день»
  • Специальный синтаксический анализ: атрибут даты и времени элемента времени, шаблон класса значения и отдельный синтаксический анализ значения даты и времени для удобства чтения.
• «e-*» для свойств дерева элементов , где значением является вся иерархия содержащихся элементов, например. «электронный контент». Префикс «e-» также можно мнемонически запомнить как «дерево элементов», «встроенную разметку» или «инкапсулированную разметку».

h-card

Микроформат h-card представляет человека или организацию.

Значение каждого свойства определяется в HTML с помощью свойства class, которое может содержать любой элемент

Пример h-card

 

  
  Джо Блоггс
  [email protected],
  Аустерстрит, 17
  Рейкьявик
  Исландия

 

Пример вложенной h-карты

 

  Митчел Бейкер
  (Фонд Mozilla)

 

Анализ JSON:

 {
  "Предметы": [
    {
      "тип": ["ч-карта"],
      "характеристики": {
        "имя": ["Митчел Бейкер"],
        "url": ["https://blog.lizardwrangler.com/"],
        "орг": [
          {
            "value": "Фонд Mozilla",
            "тип": ["ч-карта"],
            "характеристики": {
              "имя": ["Фонд Mozilla"],
              "url": ["https://mozilla.org/"]
            }
          }
        ]
      }
    }
  ]
}
 

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

Примечание: вложенная h-карта подразумевает свойства ‘name’ и ‘url’, как и любая другая h-карта, состоящая только из имени корневого класса, на .

h-entry

Микроформат h-entry представляет эпизодический контент или контент с отметкой даты в Интернете. h-entry часто используется с контентом, предназначенным для синдицирования, например. сообщения в блогах и короткие заметки.

Пример h-записи в блоге:

 

   
Микроформаты прекрасны
 
  

    Опубликовано
    В. Разработчик на
    13го июня 2013 г.
  
  
В котором я превозношу достоинства использования микроформатов.
  <дел>
    
Бла-бла-бла
  

 

  

    <диапазон>
       jgregorymcverry.com/profile/jgmac1106">
        <изображение
         
          src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg" />
      
      <а
       
        href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">Грег Макверри
    
    Ответил на
    <а
     
      href="https://developer.mozilla.org/en-US/docs/Web/HTML/микроформаты">
      сообщение на developer.mozilla.org
    :
  
  

    Эй, спасибо за создание этого ресурса микроформатов
  
  

    Грег МакВерри
    опубликовал это
    <а
     
      href="https://quickthoughts.jgregorymcverry.com/2019/05/31/эй-спасибо-за-создание-этого-микроформатного-ресурса"
      ><время datetime="2019-05-31T14:19:09+0000"
        >31 мая 2019 г.
  

 

 {
  "Предметы": [
    {
      "тип": [ "h-запись" ],
      "характеристики": {
        "в ответ-кому": [ "https://developer. mozilla.org/en-US/docs/Web/HTML/microformats" ],
        "name": [ "Привет, спасибо за создание этого ресурса микроформатов" ],
        "URL": [ "https://quickthoughts.jgregorymcverry.com/2019/05/31/эй-спасибо-за-создание-этого-микроформата-ресурса" ],
        "опубликовано": [ "2019-05-31T14:19:09+0000" ],
        "содержание": [
          {
            "html": "Привет, спасибо за создание этого ресурса микроформатов",
            "value": "Привет, спасибо за создание этого ресурса микроформатов",
            "язык": "ан"
          }
        ],
        "автор": [
          {
            «тип»: [«ч-карта»],
            "характеристики": {
              "имя": [ "Грег МакВерри" ],
              "фото": [ "https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg" ],
              "url": [ "https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ]
            },
            "язык": "ан",
            "value": "Грег Макверри"
          }
        ]
      },
      "язык": "ан"
    }
 

 

   
Блоги о микроформатах
 
  <статья>
     
Микроформаты прекрасны
 
    

      Опубликовано
      В. Разработчик на
      13го июня 2013 г.
    
    

      В котором я превозношу достоинства использования микроформатов.
    
    
Бла-бла-бла
  

 

 <дел>
   
Встреча по микроформатам
 
  

    Из
    30го июня 2013 г., 12:00
    до 18:00 в
    Некоторый бар в Сан-Франциско
  
  

    Соберитесь и обсудите все, что связано с микроформатами.