Микроразметка карточки товара интернет-магазина или каталога - Веб-студия WebTend г. Екатеринбург

Публикации, статьи от веб-студии Webtend. Блог веб-мастера Алексея Блохина

Микроразметка карточки товара интернет-магазина или каталога - Веб-студия WebTend г. Екатеринбург

Микроразметка карточки товара интернет-магазина или каталога

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

Я уже писал обзорную статью про разметку schema.org. Данная публикация дополняет ее в вопросе микроразметки карточки товара интернет-магазина или каталога товаров.

Schema.org — это стандарт семантической разметки данных в сети, объявленный поисковыми системами Google, Bing и Yahoo! летом 2011 года.

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

Разметка происходит непосредственно в HTML-коде страниц с помощью специальных атрибутов и не требует создания отдельных экспортных файлов.

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

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

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

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

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

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

Также существует неофициальный и пока неполный перевод стандарта на русский язык на сайте: http://ruschema.org

Так же много информации в Яндекс справке вебмастера: https://yandex.ru/support/webmaster/schema-org/

Если микроразметка создается больше для пользователей и поисковых систем, то в чем ее ценность для SEO-оптимизации?

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

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

Размечаем карточку товара при помощи schema.org

Существует несколько общепринятых форматов (правил) микроразметки. Самый популярный — schema.org.

Для настройки микроразметки стандарта schema.org, представленного поисковиками в 2011 г, применяют два тега:

  1. Product – включает название, изображение, а также описание товаров. Тут же при желании указывают: торговую марку, номер и серию модели, расцветку, артикул, способы доставки.
  2. Offer (для Aggregate Offer) позволяет вывести в сниппет стоимость (Price), статус (наличие товара), валюту, отображенную в соответствии со стандартом ISO4217 Currency code.

Микроразметка товаров в интернет-магазинах и каталогах товаров:

Свойство или объект Описание свойства
http://schema.org/Product Указывается для начала разметки товара
http://schema.org/Offer Указывается для начала разметки свойств товара
http://schema.org/Review Указывается для начала разметки отзывов товара
http://schema.org/Rating Указывается для начала разметки рейтинга
name Название товара
image Изображение товара
price Цена товара
priceCurrency Валюта товара. Например: RUB, EURO, USD и т.д.
availability Доступность товара. Возможные значения:
  • http://schema.org/PreOrder - на заказ (товар под заказ).
  • http://schema.org/InStock - в наличии (товар есть в продаже).
  • http://schema.org/OutOfStock - отсутствует (товара нет в продаже).
description Описание товара
http://schema.org/AggregateRating Указывается для начала разметки рейтинга товара
ratingValue Сформированный рейтинг товара на основании голосов (оценка пользователей)
reviewCount Количество голосований (оценок) за рейтинг товара
brand Бренд товара
model Модель товара (артикул)
sku Остаток на складе (количество)
priceValidUntil Срок актуальности цены (до какого срока цена будет такой же)
name Заголовок отзыва (название)
author Автор отзыва (ФИО)
datePublished Дата публикации отзыва
worstRating Минимальная оценка отзыва
ratingValue Сформированный рейтинг отзыва на основании голосов (оценка пользователей)
bestRating Максимальная оценка отзыва
description Текст отзыва

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

<div itemscope itemtype="http://schema.org/Product">
       <span itemprop="name">Наименование_товара</span>
       <a href="/ссылка-на-изображение.jpg"><img src="/ссылка_на_изображение.jpg" itemprop="image" /></a>
       <div  >
              <span >4</span>
              <span itemprop="reviewCount">9</span> //рейтинг 4 основан на 9 оценках
       </div>
       <div itemprop="description">Описание_товара</div>
       <div>Производитель: <span itemprop="brand">Название_бренда</span></div>
       <div>Модель: <span itemprop="model">Номер_модели</span></div>
       <div>Остаток на складе: <span itemprop="sku">4</span></div>
       <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
              <span itemprop="priceCurrency" content="RUB">руб.</span>
              <span itemprop="price">1000</span>
              <span><link itemprop="availability" href="http://schema.org/InStock"/>В наличии</span>
              <meta itemprop="priceValidUntil" content="2020-07-14T21:30">
              <div itemprop="review" itemscope itemtype="http://schema.org/Review">
<span itemprop="name">Заголовок отзыва</span> от <span itemprop="author">Имя пользователя</span>, <meta itemprop="datePublished" content="2020-07-14T21:30"> <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content="1"> //Минимальная оценка <span >4</span> //Оценка пользователя <span >5</span>звезд. //Максимальная оценка <span itemprop="description">текст_отзыва</span> </div> </div> </div>

Дополнительные параметры

Чтобы заинтересовать потенциального клиента, владельцы сайта и SEO-специалисты часто указывают в сниппете оставленные клиентами отзывы. Для этого задействуют тег карточки товара Review:

<div itemprop=”review” itemscope itemtype=”http://schema.org/Review”> – типичная строчка, характеризующая используемый тег, чтобы поисковая система понимала, о чем речь

<span itemprop=”name”>название для приводимого отзыва</span>

<span itemprop=”author”>имя (ник) того, кто оставил комментарий</span>

<meta itemprop=”datePublished” content=”дата, когда отзыв был опубликован“></div>

Еще одним важным моментом выступает рейтинг, по которому пользователь оценивает популярность рассматриваемого товара. Чтобы отобразить этот параметр, прибегают к помощи тега AggregateRating:

<div itemprop=”aggregateRating” itemscope itemtype=”http://schema.org/AggregateRating”> – открывающая строчка

<span itemprop=”ratingValue”>оценка</span>

<span itemprop=”reviewCount”>общее число проголосовавших</span> #рейтинг «A» основан на количестве «B» оценок

<div itemprop=”reviewRating” itemscope itemtype=”http://schema.org/Rating”> – открывающая строчка

<meta itemprop=”worstRating” content = “0“>#Минимально возможная оценка

<span itemprop=”ratingValue”>X</span>/ #Оценка пользователя

<span itemprop=”bestRating”>10</span>звезд./#Максимально возможная оценка

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

Использование микроразметки для прочих категорий интернет-магазина

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

Однако впоследствии отдельные теги микроразметки нашли применение и для оформления/отображения других разделов. Например, Product нельзя применять для страниц категорий и подкатегорий, но зато ничто не мешает задействовать Listltem или даже Aggregate Offer. В роли дополнительных элементов тогда применяют:

  • offercount – число имеющихся товаров;
  • highprice и lowprice для обозначения, соответственно, наивысшей и самой низкой цены.

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

Если в дополнении к интернет-магазину идет блог, то для микроразметки текстов применяют Article.

Проверка микроразметки карточки товаров

Для проверки микроразметки используют один из соответствующих инструментов популярных поисковиков:

  1. Структурированные данные в Google.
  2. Валидатор микроразметки в Яндекс.
  3. Средства проверки разметки в Bing.

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

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

За счет этого удается быстро осуществить настройку, снизив вероятность ошибок.

Все созданные сайты и интернет-магазины нашей веб-студией WebTend Екатеринбург обязательно получают микроразметку schema org в базовой комплектации создания сайта или интеренет-магазина.

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

CMS Joomla

CMS Joomla!

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

Веб-студия WebTend работает исключительно с системой управления контентом CMS Joomla!

Интернет-магазины создаем на CMS Joomla с немецким компонентом электронной коммерции - Joomshopping.

Подробнее о Joomla