Логотип imagecms

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

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

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

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

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

На картинке ниже вы можете видеть результат по поиску в Google за 20 июня 2016 года. Это так называемый сниппет – краткое описание страницы сайта в результатах поискового запроса. Как видите, плойку PHILIPS ProCare на Rozetka.com.ua оценили четыре покупателя, поставив по пять звезд. Цена товара – 999 гривен, и он есть в наличии.

   

Этот результат поиска в Google выдает структурированные данные.

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

Семантическая разметка и словарь в формате микроданных

Итак, существует некий стандарт семантической разметки данных в сети Schema.org, созданный совместно Google, Bing и Yahoo в 2011 году. Это согласованная схема семантической разметки, которая позволяет поисковым системам понимать, что делать с информацией на вашем сайте.

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

Чтобы поисковик распознал ваши дополнительные данные о товаре, размечайте соответствующие страницы по схемам Product, Offer и AggregateRating.

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

<div itemscope itemtype=”http://schema.org/Product”>
   ...
</div>


Используя атрибут itemscope, добавляем дополнительную информацию о продукте.

<div itemscope itemtype=”http://schema.org/Product”>

   <h1 itemprop=”name”>Некий классный продукт</h1>
   <img src=”некий-классный-продукт.png” alt=”Картинка классного продукта” itemprop=”image” />
   <p itemprop=”description”>
       Это просто отличный продукт. Вы будете очень довольны.
       <span itemprop=”sku”>123456789</span>
   </p>
</div>
 

Итак, мы выбрали схему Product и указали соответствующие данные в поля имени товара, картинки, описания и артикула (SKU – stock keeping unit).

Переходим к схеме для описания рейтинга товара: указываем рейтинг и количество отзывов.
 
<div itemscope itemtype=”http://schema.org/Product”>
   <h1 itemprop=”name”>Некий классный продукт</h1>
   <img src=”некий-классный-продукт.png” alt=”Картинка классного продукта” itemprop=”image” />
   <p itemprop=”description”>
       Это просто отличный продукт. Вы будете очень довольны.
       <span itemprop=”sku”>123456789</span>
   </p>
   <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
       Рейтинг: <span itemprop=”ratingValue”>4</span> (<span itemprop=”reviewCount”>1,987</span> отзывов)
   </div>
</div>  

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

<div itemscope itemtype=”http://schema.org/Product”>

   <h1 itemprop=”name”>Некий классный продукт</h1>
   <img src=”некий-классный-продукт.png” alt=”Картинка классного продукта” itemprop=”image” />
   <p itemprop=”description”>
       Это просто отличный продукт. Вы будете очень довольны.
       <span itemprop=”sku”>123456789</span>
   </p>
   <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
       Рейтинг: <span itemprop=”ratingValue”>4</span> (<span itemprop=”reviewCount”>1,987</span> отзывов)
   </div>
   <div itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”>
       <meta itemprop=”priceCurrency” content=”UAH” />
       ₴<span itemprop=”price”>999</span> |
       <span itemprop=”availability”>В наличии</span>
   </div>
</div>
 

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

Как только ваша семантическая разметка готова, вы можете протестировать ее валидность с помощью инструмента Structured Data Testing Tool от Google.

Семантическая разметка и JSON-LD

С недавних пор Google стал отдавать больше предпочтения JSON for Linking Data или JSON-LD, а не микроданным. В формате JSON-LD и правда есть несколько преимуществ. Например, для его использования не нужно включать HTML-код в тело страницы. Достаточно вставить скрипт в . Сначала мы устанавливаем тип:

<script type="application/ld+json">

   ...
</script>


Ключевым понятием этого способа разметки является контекст (@context). С его помощью вы, например, можете указать, что в разметке используется семантика schema.org:
{
   "@context": "http://schema.org/",
   "@type": "Product",
   "name": "Некий классный продукт",
   "image": "некий-классный-продукт.png",
   "description": " Это просто отличный продукт. Вы будете очень довольны.",
   "sku": “123456789",
   "aggregateRating": {
       "@type": "AggregateRating",
       "ratingValue": "4",
       "reviewCount": "1,987"
   },
   "offers": {
       "@type": "Offer",
       "priceCurrency": "UAH",
       "price": "999",
       "availability": "http://schema.org/В наличии"
   }
}

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

Читайте также:
Подпишитесь на еженедельную рассылку и получайте скидки на популярные e-commerce продукты
И совсем скоро Вы станете гуру в e-commerce, веб-разработке, SEO и в интернет-маркетинге! Развивайте свой бизнес с актуальной информацией, успешными кейсами и вдохновляющими примерами.
Обсуждение этого поста (Комментарии: 3)
Вы должны , чтоб присоединиться к разговору
Давайте дружить!

Узнавайте все новости, получайте обзоры, кейсы
и другие полезные материалы по e-commerce через социальные сети!

  • Андрей 30 Июнь 2016

    Зачетная статейка! Как раз это можно добавить! Если пока не вдаваться в подробности о семантической разметке, пример из статьи, его можно применять на сайте? Или нужно подключать библиотеку? Версия CMS 4.6.1

    Сохранить
  • А модуль "Сео эксперт" не делает тоже что описано в статье?

    Сохранить
  • Разметка внедрена по умолчанию в платформе, для этого "Сео эксперта" не нужно.

    Сохранить
Консультация по ImageCMS Shop
 
Уже уходите? Еще секундочку!

Зарегистрируйтесь, и вам навсегда обеспечены скидки на популярные
e-commerce продукты! Также мы будем делиться с вами самой ценной
информацией для развития вашего бизнеса.

или