Микроразметка Shema.org

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

Схема разметки для раздела "Контакты" (schema.org LocalBusiness)

Микроразметка для бизнеса или филиалов организации, которые имеют физический адрес. Примерами могут служить как отдельный ресторан, так и каждое заведение сети, филиал банка, стоматологическая клиника и т.д. Данная разметка позволяет поисковым системам получать больше информации о вашем бизнесе и выводить её в сниппетах. Рассмотрим пример микроразметки для организации типа "Веб-студия" (такого типа нет, поэтому будем использовать довольно общий тип "Бизнес" 2 уровня)

<div itemscope itemtype="http://schema.org/LocalBusiness"> 

<p itemprop="name">Дизайн студия</p>
<p itemprop="description">Веб студия занимается разработкой сайтов на 1С-Битрикс</p> 

<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<p>Адрес:	
<span itemprop="postalCode">119019</span>, 
<span itemprop="addressCountry">Россия</span>, 
<span itemprop="addressRegion">Московская область</span>, 
<span itemprop="addressLocality">Москва</span>, 
<span itemprop="streetAddress">Красная площадь, д. 1</span>
</p>
</div> 

<p>Телефоны:	
<span itemprop="telephone">8(495)123-45-67</span>,  
<span itemprop="telephone">8(499)123-45-67</span> 
</p> 

<p>Факс:
<span itemprop="faxNumber">8(495)123-45-67</span> 
</p> 

<p>E-mail:
<a itemprop="email" href="mailto:email@site.ru">email@site.ru</a> 
</p> 

<p>Адрес сайта:
<a href="http://site.ru" itemprop="url">site.ru</a> 
</p> 

<img itemprop="logo" src="http://site.ru/Images/logo.png"> 

<div>Время работы: 
  <time itemprop="openingHours" datetime="Mo-Fr 9:00−20:00">С Понедельника по Пятницу 9-20</time>, 
  <time itemprop="openingHours" datetime="St,Sn">Суббота, Воскресенье круглосуточно</time> 
</div> 

<div itemprop="geo" itemscope="" itemtype="http://schema.org/GeoCoordinates"> 
  <meta itemprop="latitude" content="55.7537523"> 
  <meta itemprop="longitude" content="37.6225168"> 
</div> 

<p>ИНН:
<span itemprop="taxID">1234567890</span> 
</p> 

</div>

Схема для раздела "О компании" (schema.org Organization)

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

<div itemscope="" itemtype="http://schema.org/Organization">
<p itemprop="name">Наименование организации</p>

Контактная информация: 
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<p>Почтовый адрес:
<span itemprop="streetAddress">номер дома, улица</span>
<span itemprop="postalCode">почтовый индекс</span>
<span itemprop="addressLocality">город, страна</span>
</p>
</div>

<p>Телефон:
<span itemprop="telephone">контактный телефон</span>,
Факс:<span itemprop="faxNumber">факс</span>,
E-mail: <span itemprop="email">корпоративный e-mail</span>
</p>
</div>

Микроразметка для раздела "Статьи" (schema.org/Article)

Микроразметка статьи позволяет сделать сниппет более структурированным и человекочитаемым. Следует найти файл, который отвечает за обзор статей. Например, это может быть: single.php. Для начала находим тег, отвечающий за вывод контента, и вставляем нужный атрибут.

<div itemscope itemtype="http://schema.org/BlogPosting">
<link itemprop="mainEntityOfPage" itemscope href="Ссылка" />
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<img alt="Логотип сайта" itemprop="image url" src="Ссылка на логотип сайта"/>
<meta itemprop="width" content="размер в пикселях">
<meta itemprop="height" content="размер в пикселях">
</div>
<meta itemprop="telephone" content="Телефон">
<meta itemprop="address" content="Адрес">
<meta itemprop="name" content="Название">
</div>
<meta itemprop="datePublished" content="1111">
<meta itemprop="dateModified" content="Дата последнего редактирования статьи">
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Автор статьи</span>
</span>
<div itemprop="articleBody">
<h1 itemprop="headline">Заголовок Вашей статьи</h1>
<span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="image url" alt="Описание изображения" width="размеры в пикселях" height="размеры в пикселях" src="Ссылка на изображение"/>
<meta itemprop="width" content="размеры в пикселях">
<meta itemprop="height" content="размеры в пикселях">
</span>
<p>Тут идет основной текст статьи, который можно разбить на абзацы. Разрешено использование всех html тэгов разметки.</p>
</div>
</div>

Микроразметка для "Картинок" (schema.org/ImageObject)

Существует отдельный поиск по изображениям, который дает дополнительную возможность увеличить трафик на сайт, если пользователь ищет товар по изображению. Атрибут itemprop="image" позволяет роботам быстро распознавать информацию о картинках. Достаточно будет указать ссылку на изображение, описание, название картинки, подпись, размеры изображения.

<div itemscope itemtype="http://schema.org/ImageObject">
<h2 itemprop="name">название картинки</h2>
<img src="https://www.seo.ru/images.jpg" itemprop="contentUrl" />
<p itemprop="description">описание картинки</p>
</div>

Микроразметка для раздела "Товарные страницы" (shema.org Product)

Для разметки товарных страниц используются схемы Product и Offer или AggregateOffer в Schema.org/Product. Таким образом информация ваших продуктовых страниц может быть представлена в виде структурированных сниппетов с описанием товара и ценой в выдаче Яндекса. Разметив эту разметку на странице сайта, можно привлечь больше потенциальных покупателей.

Вариант 1

<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Кровать Мелисса с мягкой спинкой</span>
<span itemprop="brand">Компания диваны</span>
<img itemprop="image" src="https://www.iseo.ru/bitrix/templates/iseo/images/melissa.png" />
<span itemprop="description">Кровать Мелисса с мягкой спинкой и гарантией производителя</span>

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="RUB" />
<span itemprop="price">6793</span>
</div>
</div>

Вариант 2

<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Плюшевый еж "Уф Уф"</span>
<span itemprop="brand">Фабрика плюшевых ежей "С иголочки"</span>
<span itemprop="model">Номер модели 964893NM</span>
<img itemprop="image" src="Ссылка на изображение ежа" />
<span itemprop="description">Текстовое описание товара.</span>

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="RUB" />
<span itemprop="price">Стоимость товара</span>
<span itemprop="seller">Продавец товара</span>
</div>

</div>

Микроразметка для раздела "Отзывы" (schema.org/Review)

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

<div itemscope itemtype="http://schema.org/Review">
  <h2 itemprop="name"><a href="http://example.com/review?10231" itemprop="url">Русская кухня в изгнании</a></h2>
  <div>Отзыв написал <span itemprop="author" itemscope itemtype="http://schema.org/Person">
    <span itemprop="name">
      <a itemprop="url" href="http://example.com/users/vasya">Вася Пупкин</a>
    </span>
  </span>
    <meta itemprop="datePublished" content="2012-07-15" />
    15 июля 2012.
  </div>
  <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
    <meta itemprop="worstRating" content="0"/>
    <p>Оценка: <span itemprop="ratingValue">9</span> из <span itemprop="bestRating">10</span>.</p>
  </div>
  <div itemprop="pro">Бесплатная стоянка, прекрасная детская комната и предупредительные официанты.</div>
  <div itemprop="contra">Большой и шумный некурящий зал.</div>
  <div itemprop="reviewBody">
    <p>Заказ был готов сравнительно быстро, а напитки приготовили практически сразу.
    Обслуживание на уровне, хотя грязная посуда иногда застаивалась.</p>
    <p>Рекомендую русскую кухню, особенно супы.</p>
  </div>
  <div>Автор посетил заведение <meta itemprop="dateVisited" content="2012-07-10">10 июля 2012.</div>
  <div>Оценки характеристик ресторана:
    <ul>
      <li itemprop="tag" itemscope itemtype="http://schema.org/Rating">
        <link itemprop="ratingTarget" href="https://webmaster.yandex.ru/vocabularies/ReviewBusiness/Cuisine.xml">
        Кухня: <span itemprop="ratingValue">5</span> из <span itemprop="bestRating">5</span>;
      </li>
      <li itemprop="tag" itemscope itemtype="http://schema.org/Rating">
        <link itemprop="ratingTarget" href="https://webmaster.yandex.ru/vocabularies/ReviewBusiness/Hall.xml">
        Зал: <span itemprop="ratingValue">3</span> из <span itemprop="bestRating">5</span>;
      </li>
    </ul>
  </div>
  <div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Hotel">
    <h3>Информация о ресторане</h3>
    <p>Название: <span itemprop="name">Заграница</span></p>
    <p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">Адрес:
      <span itemprop="addressLocality">Москва</span>, <span itemprop="streetAddress">Тверская, 7</span>.
    </p>
    <p>Телефон: <span itemprop="telephone">123-45-12</span>.</p>
    <p>Сайт ресторана: <a itemprop="url" href="http://zagranica.ru">http://zagranica.ru</a></p>
    <p>Электронный адрес администрации:
      <a itemprop="email" href="mailto:hostess@zagranica.ru">hostess@zagranica.ru</a>
    </p>
  </div>
</div>

Микроразметка для раздела "О себе" (schema.org/Person)

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

Вариант 1

<div itemscope itemtype="http://schema.org/Person">
  <span itemprop="name">Jane Doe</span>
  <img src="janedoe.jpg" itemprop="image" />
  <span itemprop="jobTitle">Professor</span>

  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">
      20341 Whitworth Institute
      405 N. Whitworth
    </span>
    <span itemprop="addressLocality">Seattle</span>,
    <span itemprop="addressRegion">WA</span>
    <span itemprop="postalCode">98052</span>
  </div>

  <span itemprop="telephone">(425) 123-4567</span>
  <a href="mailto:jane-doe@xyz.edu" itemprop="email">
    jane-doe@xyz.edu</a>
  Jane's home page:
  <a href="http://www.janedoe.com" itemprop="url">janedoe.com</a>
  Graduate students:
  <a href="http://www.xyz.edu/students/alicejones.html" itemprop="colleague">
    Alice Jones</a>
  <a href="http://www.xyz.edu/students/bobsmith.html" itemprop="colleague">
    Bob Smith</a>
</div>

Вариант 2

<div itemscope itemtype="http://schema.org/Person">
   <p itemprop="name">Алексей</p> <!-- Имя -->
   <p itemprop="additionalName"> Владимирович</p> <!-- Отчество -->
   <p itemprop="familyName"> Петров</p> <!-- Фамилия -->
  <p itemprop="jobTitle">веб-мастер</p> <!-- Должность -->
   <div>
      <a href="http://site.ru/about/" itemprop="sameAs">site.ru/about/</a>, <!-- Адрес оффициальной веб-страницы (вроде wikipedia), множественное -->
      <a href="http://site2.ru/users/who/" itemprop="sameAs">site2.ru/users/who/</a> <!-- Адрес оффициальной веб-страницы (вроде wikipedia), множественное -->
   </div>
   <div>
      <a href="http://ok.ru/who" itemprop="url">ok.ru/who</a>, <!-- Адрес веб-страницы, множественное -->
      <a href="http://twitter.com/who" itemprop="url">twitter.com/who</a>, <!-- Адрес веб-страницы, множественное -->
      <a href="http://vk.ru/who" itemprop="url">vk.ru/who</a> <!-- Адрес веб-страницы, множественное -->
   </div>
   <div>
      <span itemprop="telephone">8(495)123-45-67</span>, <!-- телефон, множественное -->
      <span itemprop="telephone">+7(926)12-34-567</span> <!-- телефон, множественное -->
   </div>
   <div>
      <span itemprop="email">email1@site.ru</span>, <!-- e-mail, множественное -->
      <span itemprop="email">email2@site.ru</span> <!-- e-mail, множественное -->
   </div>
</div>

Микроразметка шапки сайта (schema.org/WPHeader)

Данная разметка описывает информацию о сайте.

<header itemscope itemtype="http://schema.org/WPHeader">
    <meta itemprop="headline" content="Название сайта">
    <meta itemprop="description" content="Описание сайта">
    <meta itemprop="keywords" content="асфальт, москва, недорого, доставка">
</header>

Микроразметка для меню сайта (schema.org/SiteNavigationElement)

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

<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
    <a itemprop="url" href="mysite.com/news/">Новости</a>
    <a itemprop="url" href="mysite.com/articles/">Статьи</a>
    <a itemprop="url" href="mysite.com/contact/">Контакты</a>
</nav>

Микроразметка боковой колонки сайта (schema.org/WPSideBar)

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

<aside itemscope itemtype="http://schema.org/WPSideBar">
    <section>
        <h3 itemprop="name">Группа ВКонтакте</h3>
        <!-- код виджета -->
    </section>
    <section>
        <h3 itemprop="name">Страница Facebook</h3>
        <!-- код виджета -->
    </section>
    <section>
        <h3 itemprop="name">Мой опрос</h3>
        <!-- код опроса -->
    </section>
</aside>

Микроразметка для подвала сайта (schema.org/WPFooter (подвал, footer)

Футер/footer — тот самый элемент внизу сайта, где обычно ещё раз пишут название сайта, копирайты, контакты и прочую информацию.
Если же у Вас колонтитул имеет множество элементов, характерных для организации — адреса, логотипы, контакты и т.п. — можно применить разметку с помощью типа Organization.

<footer itemscope="http://schema.org/WPFooter">
    <div>MySite.com<span itemprop="copyrightYear">2017</span>. Все права защищены</div>
</footer>