Микроразметка на сайте (примеры)

Рейтинг:  4 / 5

Подробности

Категория: оптимизатор

Автор: SEO & WEB — KELL4

Микроразметка, микроформаты и микроданные сайта

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

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

Как вставить микроразметку на сайт?

Микроразметка работает в виде специальных атрибутов (команд или тегов) которые вставляются в HTML код страницы. Формат страницы может быть и другим, например PHP или HTM, это не помешает поисковой системе найти структурированные данные на сайте. Для облегчения задачи можно использовать специальные модули или плагины, которые автоматически вписывают микроформаты на страницы Вашего сайта.

Микроразметка, примеры для обозначения товаров интернет магазина

Оформление заголовка страницы с помощью микроразметки:

стандартный заголовок страницы (title) оформлен в тег h1, выглядит это так:

<h1>Заголовок (title)</h1>

<div itemtype="http://schema.org/Product">
   <h1 itemprop="name">Заголовок (title)</h1>
</div>

Навигация на сайте: хлебные крошки (breadsсrumbs):

Навигационная цепочка или хлебные крошки показывают на какой странице какого раздела находится посетитель сайта (home->category->page), используя микроразметку мы можем показать поисковикам правильную навигацию, которая будет показываться в сниппете (в результате выдачи поиска). Еще одним плюсом микроформата является автоматическая замена URL написанных транслитом на URL адреса на русском языке (главная->категория->страница).

Схема микроформата навигации breadscrums следующая: http://www.data-vocabulary.org/Breadcrumb

А полностью код выглядит так:

<div itemtype="http://www.data-vocabulary.org/Breadcrumb">
   <a href="http://KELL4.ru/category/page" itemprop="url">
      <span itemprop="title">страница</span>
   </a>
</div>

Рейтинг на сайте, звездочки и отзывы в поиске:

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

А выглядит это примерно так:

<div class="review" itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
   <meta itemprop="reviewCount" content="Отзывов: 6">
   <meta itemprop="ratingValue" content="4.5">
   <meta itemprop="bestRating" content="5">
<div>

Цена товара (услуги), наличие на складе:

Довольно полезные элементы семантической разметки, позволяющие показать цену товара или услуги в поисковой выдаче, а так же наличие на складе или на сайте (если количество ограничено). Если Вы примените эти микроданные на своем сайте то пользователь во время поиска увидит стоимость, что позволит ему ускорить процесс поиска и купить товар|услугу.

Цена товара обозначается http://schema.org/Offer, а наличие http://schema.org/InStock:

<div itemtype="http://schema.org/Offer">
   <div itemtype="http://schema.org/ItemAvailability">
      <meta itemprop="price" content="500 руб.">
      <meta itemprop="priceCurrency" content="RUB">
      <link itemprop="availability" href="http://schema.org/InStock">
      В наличии
      itemscope itemtype="http://schema.org/Product">
   </div>
</div>

Полностью микроразметка товара для интернет магазина выглядит так:<table itemscope itemtype="http://schema.org/Product"> <tr> <td> <a itemprop="url" href="#">Ссылка на товар</a> <div itemprop="name">Название товара</div> <img itemprop="image" src="/images/kell.gif" /> <div itemprop="description">Описание товара</div> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <meta itemprop="ratingValue" content="4.5" /> <meta itemprop="reviewCount" content="6" /> <img src="/stars.png" alt="" title="" /> </div> <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <meta itemprop="acceptedPaymentMethod" content="CreditCard" /> <meta itemprop="priceCurrency" content="RUB" /> <meta itemprop="availability" content="http://schema.org/InStock" />В наличии <span class="price"> <span itemprop="price">500</span>.- <span class="valute">руб.</span> </span> </div> </td> </tr> </table>

Проверка микроразметки на сайте

с помощью валидатора Яндекса http://webmaster.yandex.ru/microtest.xml

с помощью валидатора Google http://www.google.com/webmasters/tools/richsnippets

Помощь с микроразметкой на сайте, советы от Яндекса http://help.yandex.ru/webmaster/schema-org/what-is-schema-org.xml

• < Назад
• Вперёд >