Главная / Блог / Поисковая оптимизация (SEO) / SEO: семантическая разметка для страниц товаров интернет-магазина

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

27 июня 16
Reading Time: 3 minutes
4 комментария
1 Star2 Stars3 Stars4 Stars5 Stars (13 votes)

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

Когда покупатели ищут что-либо в 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 – позволит вам лучше представить свои товары в результатах поисковой выдачи, значительно увеличив тем самым их кликабельность и, соответственно, свои продажи.

Comments (4)
  • Timur Bondarenko:

    Опечатка:
    "availability": "http://schema.org/В наличии"
    нужно:
    "availability": "https://schema.org/InStock&quot;

  • ivikk:

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

  • Deem:

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

  • Андрей:

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Более 3000 запущенных проектов

Вместе с нами многие уже развивают свой бизнес! Смотреть все отзывы
Хочу выразить большую благодарность коллективу компании "ImageCMS" а именно Ивану и Марии! Во время выбора компании проводил переговоры с 7 различными организациями, Иван единственный кто смог адекватно объяснить и подсказать всю необходимую информацию для принятия решения. В итоге результат более чем на 100% соответствует ожиданиям, а во много их даже превосходит!
Перепробовав много CMS (opencart, Битрикс) и др. Мы увидим, как много в каждой из них недостатков. Где-то или очень сложно или очень дорого кастомизировать. Работая маркетологом, могу заверить, что в ImageCMS большинство нужны "фич" реализовано из коробки, без дополнительных надстроек. Посмотрев демо версию новой версии движка, был приятно удивлен скоростью работы (ооочень важно).
За время сотрудничества компания показала себя в качестве ответственного подрядчика, быстро воплотив в жизнь удобный интернет-магазин с учетом всех наших пожеланий.
Работой доволен. Отвечают всегда быстро и по сути, остаются только приятные впечатления от общения. Пара слов о новом движке: Быстро, красиво и интуитивно понятно. Полностью оправдывает вложенные средства. Рекомендую.
Доволен. Скрипт считаю перспективным. Считаю, что ваш коллектив работает на опережение: ваше предложение было оптимальным по цене/качеству.
Опертивная и четкая работа, своевременое предоставление дополнительных консультаций по работе с административной частью. Созданным магазином довольна. Рекомендую этот движок!