Schema org контакты: Микроразметка Schema для контактов. Как сделать микроразметку шейма для контактной информации? – Микроразметка контактов организации ⚙ Sсhema.org

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

Типы организаций согласно Schema.org

• Организация (Organization) — школа, НПО, корпорация, клуб и т.д. (наиболее общий тип)
• Авиакомпания (Airline) — организация осуществляющая авиаперевозки
• Корпорация (Corporation) — корпорация, крупная фирма, по нашему холдинг и т.п.
• Образовательное учреждение (EducationalOrganization) — начиная от частной школы, кончая университетом
• Правительственное учреждение (GovernmentOrganization) — администрация районов, думы и рп. муниципальные учреждения
• Местная фирма (Local Bussiness) — ИП, Филиал компании, небольшое местное предприятие
• Не правительственная организация (NGO) — общественная организация, например пенсионеры Кубани и т.п.
• Исполнительные группы (PerformingGroup) — оркестр, музыкальная группа, Бурановские бабушки и т.п.
• Спортивные организации (SportsOrganization) — в том числе спортивные команды, их руководство, спорт-клубы и т.п.

Если вы не смогли отнести свою компанию ни к одному из вышеперечисленных видов, выбирайте первый Organization он самый общий и подходит для всех. Давайте теперь рассмотрим по подробней как этими типами пользоваться.

Схема Organization

Тут приводится общая контактная информация, наименование, адреса, телефоны, электронная почта.

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

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

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

Ещё раз повторюсь, эта схема универсальна, если вы не отнесли свою фирму ни к одному другому типу, смело пользуйтесь этой схемой.

Схема Airline

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

<div itemscope="" itemtype="http://schema.org/Airline">
 <span itemprop="iataCode">IATA - код авиакомапнии, уникальный идентификатор авиакомпании
 в междуном регистри компаний осуществляющих авиаперевозки пассажиров</span>
 <span itemprop="name">Наименование авиакомпании</span>
 <img src="img/airline_logo.jpg" itemprop="logo">
 <span itemprop="description">Подробное описание авиакомпании</span>

<div itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
 <span itemprop="ratingValue">4</span> звезды -
 основано на <span itemprop="reviewCount">250</span> отзывах клиентов компании
 </div>

 Контактная информация авиакомпании:

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

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

Схема Corporation

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

<div itemscope="" itemtype="http://schema.org/Store">
<h2 itemprop="name">Название сети магазинов</h2>
Описание сети магазинов
Часы работы: <time itemprop="openingHours" datetime="Mo-Fr 07:00-23:00">Понедельник-Пятница с 7:00 до 23:00 </time>
Контактный телефон: <span itemprop="telephone">контаткный телефон</span>
</div>
Дальше перечесляем предприятия (департаменты) входящие в нашу сеть
<div itemprop="department" itemscope="" itemtype="http://schema.org/Pharmacy">
<h3 itemprop="name">Аптека</h3>
Описание аптеки
Часы работы: <time itemprop="openingHours" datetime="Mo-Fr 07:00-23:00">Понедельник-Пятница с 7:00 до 23:00 </time>
Контактный телефон: <span itemprop="telephone">контаткный телефон</span>
</div>

<div itemprop="department" itemscope="" itemtype="http://schema.org/DryCleaningOrLaundry">
<h3 itemprop="name">Химчистка</h3>

Описание химчистки

Часы работы: <time itemprop="openingHours" datetime="Mo-Fr 07:00-23:00">Понедельник-Пятница с 7:00 до 23:00 </time>

Контактный телефон: <span itemprop="telephone">контаткный телефон</span>

Какая-нибудь ветвь компании <span itemprop="branchOf" itemscope="" itemtype="http://schema.org/Corporation">
 URL адрес сайта
 <a itemprop="url" href="http://example.com/">
 <span itemprop="name">Наименование ответвтвления</span></a></span>.

 </div>

 </div>

Схема EducationalOrganization

Тут всё предельно ясно, мы описываем какое-нибудь образовательное учреждение. Тут есть одно уникальное свойство alumni выпускник. Многие учебные заведения хвастаются своими известными выпускниками. такое как МГИМО например. Так же описывая конкретного человека используюя схему Person можно сослаться на учебное заведение в котором учился этот человек, используюя обратное свойство alumiOf

<div itemscope="" itemtype="http://schema.org/EducationalOrganization">
 <span itemprop="name">Наименование образовательного учреждения</span>

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

 Список выпускников учебного заведеия
 <span itemprop="alumni" itemscope="" itemtype="http://schema.org/Person">
 <span itemprop="name">Имя выпускника</span>
 </span>
 <span itemprop="alumni" itemscope="" itemtype="http://schema.org/Person">
 <span itemprop="name">Имя выпускника</span>
 </span>
</div>

Схема GovernmentOrganization

Правительственные организации, неплохо подойдёт для описания бюджетных и муницыпальных учреждений , администраций городов и районов, дум и пр.

 

<div itemscope="" itemtype="http://schema.org/GovernmentPermit">
 <span itemprop="name">Наименование разрешения/лицензии выданное государственным органом</span>

<div itemprop="issuedBy" itemscope="" itemtype="http://schema.org/GovernmentOrganization">
 <span itemprop="name">Наименование гописываемого гос.учреждения</span>
 Обязательно нужно указывать адрес организации и контактные данные

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

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

<div itemprop="issuedThrough" itemscope="" itemtype="http://schema.org/GovernmentService">
 <span itemprop="name">Услуги предоставляемые данной правительственной организацией, например выдача пособий,
 оформление определённого вида документов и т.п.</span>
 </div>

<div itemprop="validIn" itemscope="" itemtype="http://schema.org/AdministrativeArea">
 <span itemprop="name">Географический регион находящийся под юрисдикцией той или иной власти</span>
 Обязательно нужно указывать адрес организации и контактные данные

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

 Телефон:<span itemprop="telephone">контактный телефон</span>,
 </div>

 <time itemprop="validFor">Время действия разрешения/лицензии
 выданной данной правительственной организации</time>
</div>

Схема LocalBusiness

Тут можно описать небольшую комапнию предоставляющую услуги (автосервис, заправка картриджей для принтера) или маленький магазинчик, аптеку, торговую точку в гипермаркете и т.п.

<div itemscope="" itemtype="http://schema.org/Restaurant">
 <span itemprop="name">Наименование ларька</span>

<div itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
 <span itemprop="ratingValue">4</span> звезды -
 основнано на <span itemprop="reviewCount">250</span> отзывах клиентов ларька
 </div>

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

 <span itemprop="telephone">Контактный телефон</span>
 <a itemprop="url" href="http://www.example.com">веб-сайт компании</a>

Часы работы: <time itemprop="openingHours" datetime="Mo-Fr 07:00-23:00">Понедельник-Пятница с 7:00 до 23:00 </time>

 Дальше может идти описание специфичных именно этому бизнесу свойств. Блюда, услуги, музыка и т.п.
</div>

Схема NGO

Описание неправительственных общественных организаций. Практически повторяет описание обычной организации.

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

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

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

Схема PerformingGroup

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

Схема SportsOrganization

С помощью этой схемы Вы можете описывать футбольные, хоккейные, волейбольные и другие команды, тренеров этих команд выделяя их схемой Person , атрибутику компанд и пр. Уникальным свойством схемы является sport т.е. вид спорта в котором играет эта комманда

<div itemscope="" itemtype="http://schema.org/SportsOrganization">
 <span itemprop="name">Наименование команды</span>
 <span itemprop="description">Описание команды, история, победы, награды, участники</span>
 <span itemprop="sport">вид спорта в которм состязается эта команда</span>
 Почтовый адрес клуба где тренируется команда

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

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

Вот собственно и всё. Многие из этих схем например LoacalBusiness имеют дальнейшую градацию на типы бизнеса. Что позволяет ещё точнее рассказать поисковикам о Вашей компании. А в сочетании с грамотно созданными интерактивными картами и удобнымим контактными формами, Ваша страница контактов будет неотразима для поисковика. Оптимизируйте свой контент, пишите нужную людям информацию и будет Вашему сайту счастье!

Не забудьте проверить вашу микроразметку с помощью валидатора Яндекс дабы исключить все ошибки до индексации сайта роботом.

Микроразметка контактов организации Sсhema.org | Alferov.su

Для чего нужна?

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

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

Кто и зачем может собирать контакты?

• Каталоги организаций
• Сервисы онлайн-карт и навигаторы
• Различные каталоги услуг
• Агрегаторы товаров
• И т.д.

Т.е. разметив контакты при помощи Sсhema.org можно «заодно» добавить свой сайт в десятки, а то и сотни различных сервисов, которые могут давать тот или иной объем трафика. В общем, тема полезная, а внедрение занимает буквально 10 минут, так что явно стоит делать 🙂

Как внедрять?

1. Добавить блок div с параметром itemscope itemtype=»https://schema.org/Organization»

По сути, этим шагом мы указываем, что вот тут начинается микроразметка и она будет про нашу организацию.

На выходе получим примерно вот так:

<div itemscope itemtype="http://schema.org/Organization">
Организация: ООО "Алфёров.су"
Телефон: +7 (555) 555-55-55
Почтовый индекс: 123123
Город: Санкт-Петербург
Адрес: Невский проспект 1
Email: [email protected]
</div>

2. Теперь надо разметить контакты. Для начала разметим адрес, и для него есть есть отдельный блок, по аналогии с https://schema.org/Organization и называется он http://schema.org/PostalAddress.

Как и в предыдущем пункте — вынесем наш адрес в отдельный блок div с данным параметром:

Получим:

<div itemscope itemtype="https://schema.org/Organization">
Организация: ООО "Алфёров.су"
Телефон: +7 (555) 555-55-55
<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
Страна: Россия
Почтовый индекс: 123123
Город: Санкт-Петербург
Адрес: Невский проспект 1
</div>
Email: [email protected]
</div>

3. Вот теперь можно приступать к полноценной разметке. Сделать это крайне просто — надо всего лишь оборачивать каждый пункт в тег <span> с параметром в соответствии с ссылкой schema.org. Например вот тут https://schema.org/PostalAddress написано, что есть разметка «addressCountry» и инструкция, что с ее помощью можно разметить название страны.

Делаем все по инструкции и получаем результат:

<div itemscope itemtype="https://schema.org/Organization">
Организация: ООО "Алфёров.су"
Телефон: +7 (555) 555-55-55
<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
Страна: <span itemprop="addressCountry">Россия</span>
Почтовый индекс: <span itemprop="postalCode">123123</span>
Город: <span itemprop="addressLocality">Санкт-Петербург</span>
Адрес: <span itemprop="streetAddress">Невский проспект 1</span>
</div>
Email: [email protected]
</div>

Вот мы и сделали микроразметку адреса организации, осталось добавить email, номер телефона и само название организации. Посмотрим, что нам рекомендует сама страница https://schema.org/Organization и в соотстветствии со списком размечаем.

Получили вот такую штуку:

<div itemscope itemtype="https://schema.org/Organization">
Организация: itemprop="name">Алфёров.су</span>
Телефон: <span itemprop="telephone">+7 (555) 555-55-55</span>
<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
Страна: <span itemprop="addressCountry">Россия</span>
Почтовый индекс: <span itemprop="postalCode">123123</span>
Город: <span itemprop="addressLocality">Санкт-Петербург</span>
Адрес: <span itemprop="streetAddress">Невский проспект 1</span>
</div>
Email: <span itemprop="email">[email protected]</span>
</div>

На этом можно и закончить пост 🙂 Как видите — ничего сложного, а пользы — очень много! Вообще крайне рекомендую посмотреть, какие еще возможности есть для микроразметки контактов, там можно и логотип добавить, и режим работы указать и даже дату основания компании! Чем больше информации на сайте вы разметите — тем больше различных источников трафика будут корректно обрабатывать информацию о вашей организации и тем больше они будут давать дополнительного трафика. Ну и сниппеты, конечно, куда же без них 🙂

Микроразметка контактной информации на сайте

На любом продающем сайте должна быть контактная информация. Ведь сайт нацелен продавать, верно? А значит, посетитель должен знать, что у вас за организация, где находится, когда работает, как вам дозвониться и уточнить интересующие вопросы. Как правило, большинство компаний пренебрегают микроразметкой контактной информации и просто помещают блок «Контакты» с адресом и телефоном в подвале сайта. Даже если не разбирать вопрос размещения контактов с точки зрения влияния на конверсию сайта в целом, то отметить о применении микроразметки просто необходимо.Микроразметка позволяет улучшить оформление сниппета вашего сайта в поисковой выдаче (и не только). Микроразметку нужно применять для важных блоков сайта, таких, в частности, как контакты.

Возьмем для примера такой блок контактов на сайте:

<div>
 <span>ООО "Интэрсо"</span>
 <div>
  Адрес: ул. Балтийская, 5Б,
  185011,
  Республика Карелия, г. Петрозаводск
 </div>
  Телефон: +7 8142 33-22-11 
</div>

А теперь посмотрим, как оформить контакты на сайте в HTML с помощью микроразметки Schema.org:

<div itemscope itemtype="http://schema.org/Organization">
 <span itemprop="name">ООО "Интэрсо"</span>
 <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
   Адрес: 
  <span itemprop="streetAddress">ул. Балтийская, 5Б</span>
  <span itemprop="postalCode">185011</span>
  <span itemprop="addressLocality">Петрозаводск</span>
  </div>
   Телефон: <span itemprop="telephone">+7 814 233-22-11</span>
</div>

Проверить правильность микроразметки можно с помощью сервиса от Яндекс — Валидатор микроразметки.

Кроме красивого сниппета, микроразметка контактной информации позволяет добавить вашу организацию в Яндекс.Справочник, а значит, и добавить свою компанию на Яндекс.Карты. Многие пользователи ищут магазины в непосредственной близости от своего дома на карте. Наличие микроразметки позволяет таким пользователям найти ваш магазин/офис прямо на карте, посмотреть время работы, телефон, адрес сайта. И это, естественно, положительно сказывается на количестве ваших продаж.

Виджет «Контакты» в конструкторе сайтов «Нубекс» имеет микроразметку.

Микроразметка 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 protected]">[email protected]</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">
<h2 itemprop="headline">Заголовок Вашей статьи</h2>
<span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="image url" alt="Описание изображения" 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">
<h3 itemprop="name">название картинки</h3>
<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">
  <h3 itemprop="name"><a href="http://example.com/review?10231" itemprop="url">Русская кухня в изгнании</a></h3>
  <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">
    <h4>Информация о ресторане</h4>
    <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:[email protected]">[email protected]</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:[email protected]" itemprop="email">
    [email protected]</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">[email protected]</span>, <!-- e-mail, множественное -->
      <span itemprop="email">[email protected]</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>
        <h4 itemprop="name">Группа ВКонтакте</h4>
        <!-- код виджета -->
    </section>
    <section>
        <h4 itemprop="name">Страница Facebook</h4>
        <!-- код виджета -->
    </section>
    <section>
        <h4 itemprop="name">Мой опрос</h4>
        <!-- код опроса -->
    </section>
</aside>

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

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

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

JSON-LD и Schema.org – выбираем лучшее для разметки вашего сайта

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

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

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

С постепенным развитием микроразметки начали появляться новые понятия, такие как словари и синтаксис. Более подробно об этих терминах можно узнать в данной статье. Грубо говоря, словарь – это язык микроразметки, набор определенных свойств, а синтаксис – это способ применения данного языка. Формат Schema.org относится к классу словарей, тогда как JSON-LD является синтаксисом.

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

Если говорить совсем уж корректно, то Schema.org – это сайт, на котором публикуются различные схемы тегов, используемых веб-мастерами для разметки актуальной информации. Этот словарь изначально применяется с синтаксисом Microdata. Такой способ разметки был разработан в 2011 году и признан крупнейшими поисковыми системами мира.

Существует более 100 видов схем. С помощью данного формата можно сделать разметку:

• организаций;
• товаров;
• отзывов;
• хлебных крошек;
• видео;
• фотографий.

Чтобы сделать разметку необходимой информации на странице, нужно помещать атрибуты Schema.org в отображаемый пользователю контент. Вот пример классической разметки данных организации с помощью Microdata:

<div itemscope itemtype=»http://schema.org/Organization»>
    Компания <span itemprop=»name»>1PS.RU</span>
    Контакты:
    <div itemprop=»address» itemscope itemtype=»http://schema.org/PostalAddress»>
        Адрес:
        <span itemprop=»postalCode»>664033</span>,
        <span itemprop=»addressLocality»>Иркутск</span>,
        <span itemprop=»streetAddress»>ул. Академическая, 28/6</span>
    </div>
    Телефон: <span itemprop=»telephone»>+7 (3952) 420-535</span>,
    Электронная почта: <span itemprop=»email»>[email protected]</span>
</div>

Как видите, код схемы был размещен внутри контактной информации, которая выводится на странице. Иногда это бывает не всегда удобно, так как текст может «поехать» или формат не прочитается редактором. Но подобное случается довольно редко. Обратите внимание, что мы оборачиваем тегами только конкретную информацию, т.е. «Иркутск» без запятых и остальных знаков.

Сразу после установки проверяем нашу разметку в валидаторе разметки Яндекса:

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

Микроразметка JSON-LD

JSON-LD (англ. Linked Data) – способ передачи связанных данных с помощью текстового формата JSON. Компания Google рекомендует использовать именно его.

Особенностью JSON-LD является его внедрение не в код страницы, а в отдельный тег, то есть нет необходимости вписывать схему в контент страницы. Так что с данной задачей может справиться человек, далекий от программирования.

Пример разметки с помощью синтаксиса JSON-LD:

<script type=»application/ld+json»>
  {
    «@context»: «http://schema.org»,
    «@type»: «Organization»,
    «url» : «Адрес главной страницы»,
    «logo» : «Адрес логотипп компании»,
    «address»: {
    «@type»: «PostalAddress»,
    «addressLocality»: «Город»,
    «postalCode»: «Индекс»,
    «streetAddress»: «Улица, дом»
  },
  «email»: «Электронный ящик»,
  «name»: «Название компании без кавычек»,
  «telephone»: «Телефон»
}
</script>

Как видите, такой «контейнер» очень удобно разместить в коде страницы, не волнуясь о нарушении ее целостности. Также у большинства популярных CMS уже есть готовые плагины, которые помогут разметить данные на сайте.

Проверить созданную разметку можно в валидаторе Google:

Однако у JSON-LD есть существенный минус. Текст из данной разметки не будет виден пользователю, что противоречит рекомендации поисковиков – не использовать скрытый контент. Стоит отметить, что этот формат в 2013 году был рекомендован Schema.org для разметки страниц, а в середине 2014 всемирно известный поисковик Google посоветовал использовать JSON-LD.

Заключение

Подводя итоги, можно сказать, что использование микроразметки Schema.org с синтаксисом JSON-LD позволяет корректно и быстро размечать необходимые данные, которые воспринимаются Google. Однако же в Яндексе данный формат используется только для Яндекс.Почты, следовательно, сформировать красивый и полезный сниппет у вас не получится.

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

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

Микроразметка для разных типов сайтов

Сегодня мы поговорим о пользе микроразметки для корректной индексации страниц сайта поисковыми системами и увеличения их привлекательности для пользователей. Расскажем, какие возможности семантическая разметка дает интернет-магазинам, информационным порталам, сайтам СМИ и прочим ресурсам.

Что такое микроразметка

Существует два основных вида микроразметки, которые используют поисковые системы Яндекс и Google: Sсhema.org и Open Graph.

Стандарт семантической разметки данных в сети Schema.org был разработан поисковыми системами Google, Bing и Yahoo! летом 2011 года для того, чтобы вебмастерам не приходилось размечать контент страниц отдельно для каждой поисковой системы. Сегодня его поддерживают все основные поисковые системы, в том числе и Яндекс.

Словарь Open Graph создали в Facebook для того, чтобы сделать публикуемые с сайтов ссылки расширенными, иными словами, чтобы сайты могли красиво отображаться в социальной сети. Сегодня эту микроразметку используют все популярные социальные сети: ВКонтакте, Google+, Twitter, LinkedIn, Pinterest и др.

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

Микроразметка для разных типов сайтов

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

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

Далее мы подробнее поговорим о пользе семантической разметки контента для разных типов сайтов.

Интернет-магазин

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

Товарные страницы

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

Получить такой сниппет несложно, достаточно указать в коде поля name, offers, price, pricecurrency и т.д.:

<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>

Отзывы

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

В коде сайта необходимо указать следующие атрибуты:

<html>
<body>
<div itemscope itemtype=»http://schema.org/Product»>
<meta itemprop=»name» content=»название страницы или товара»>
<span itemprop=»offers» itemscope itemtype=»http://schema.org/Offer»>
<meta itemprop=»price» content=»0.00″>
</span>
<p itemprop=»description»>Описание</p>
<div itemprop=»aggregateRating» itemscope itemtype=»http://schema.org/AggregateRating»>
<meta itemprop=»ratingValue» content=»4.63″ /><!— Количество отображаемых звезд —>
<meta itemprop=»ratingCount» content=»9″ /><!— Количество голосов —>
</div>
</div> </body>
</html>

Контакты

Контакты размечаются при помощи Organization от Schema.org. Эта разметка позволяет компаниям попасть в справочник Яндекса, а также отражаться при поиске на Яндекс.Картах.

Пример разметки контактов в коде:

<div itemscope=»» itemtype=»http://schema.org/Organization»>
<div itemprop=»name» itemscope=»» itemtype=»http://schema.org/PostalAddress»>
ООО «Айсео»
</div>
<div itemprop=»address» itemscope=»» itemtype=»http://schema.org/PostalAddress»>
Адрес: <span itemprop=»postalCode»> 127473</span>, <span itemprop=»addressLocality»>Москва</span>, <span itemprop=»streetAddress»>Краснопролетарская ул., 16 стр. 2</span>
</div>
Телефон: <span itemprop=»telephone»>+7 (495) 221-68-19</span> <br>
Электронная почта: <span itemprop=»email»><a href=»mailto:[email protected]»>[email protected]</a></span>
<div>
<img alt=»Логотип iSEO» src=»https://www.iseo.ru/bitrix/templates/iseo/images/logo.png» itemprop=»logo»>
</div>
</div>

Картинки

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

Один из способов попасть в поиск по картинкам Google и Яндекс — применить на сайте микроразметку schema.org/ImageObject. Достаточно будет указать ссылку на изображение, описание, название картинки, подпись, размеры изображения:

<div itemscope itemtype=»http://schema.org/ImageObject»>
<h3 itemprop=»name»>i-comference 2016</h3>
<img src=»https://www.iseo.ru/put_do_fotografii.jpg» itemprop=»contentUrl» />
<span itemprop=»description»>Конференция i-CoM 2016: социальные и мобильные коммуникации, автоматизацию маркетинга обсудят в марте.</span>
</div>

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

Чтобы эта информация отображалась корректно и не искажала исходный материал, представляя в анонсе несвязный текст или изображение, мало связанное с темой ссылки, был разработан дополнительный стандарт разметки страниц — Open Graph. По сути, он представляет собой набор тегов, которые указывают на то, как должно выглядеть отображение анонса веб-страницы в соц. сети. Для этого необходимо указать заголовок, картинку и описание:

<meta property=»og:site_name» content=»iSEO.ru»>
<meta property=»og:type» content=»article»/>
<meta property=»og:title» content=»Здесь пишем заголовок статьи»>
<meta property=»og:url» content=»https://www.iseo.ru/press/blog/golosovoy_poisk_i_seo/»>
<meta property=»og:image» content=»https://www.iseo.ru/upload/iblock_250_250_CROP_1-1__/e7c/pablo (3).png»>
<meta property=»fb:app_id» content=»670105843067235″>

Информационные порталы и СМИ

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

Какой контент содержат подобные ресурсы? Обычно это тексты и различный мультимединый контент. Поэтому чаще всего контент СМИ в микроразметке Schema.org/Article размечается следующими атрибутами:

• itemscope itemtype=http://schema.org/WPHeader – указывает на общий контент;
• itemscope itemtype=http://schema.org/Article – указывает на тело статьи;
• itemprop=»name» – обозначает заголовок;
• itemprop=»author» – авторство;
• itemprop=»datePublished» (Обязательно время в формате «Y-m-d») – дата публикации;
• itemprop=»articleBody» – текст статьи;
• itemprop=»articleSection» – рубрика;
• itemprop=»image» – если есть изображение.

Так как для такого вида контента важно расшаривание в соц. сетях его также необходимо размечать при помощи Open Graph.

Видеохостинг

Для сайтов с большим количеством видеоконтента, например, видеохостингов, необходима разметка роликов при помощи типа VideoObject от Schema.org или расширения Open Graph. Благодаря такой разметке на страницах поисковой выдачи доступна следующая информация о видеоролике: заставка, заголовок, текстовое описание, продолжительность, авторские права, возможность предварительного просмотра и прочее.

Микроразметка для видео поможет хорошо отображаться в результатах большого поиска и поиска по видео Google и Яндекс.

Минимальное описание видео выглядит вот так:

<h2 itemprop=»name»> Schema.org for Videos</h2></a><!—Название видео—>

<p itemprop=»description»>The schema.org markup is our
recommended method for providing Google with the metadata
needed to index your videos. Using it requires only a
few non-visible changes to your video web page. You can
find the full schema.org spec here:
http://www.schema.org/VideoObject </p > <!—Описание видео—>

<meta itemprop=»duration» content=»PT6M58S»><!— Продолжительность видео в формате ISO 8601—>

<meta itemprop=»isFamilyFriendly» content=»true»><!— допустим ли просмотр видео-ролика детьми—>

<p>Дата загрузки: <span itemprop=»uploadDate»>2013-06-05 </span></p><!—дата загрузки видео-ролика на сайт в формате ISO 8601—>

<span itemprop=»thumbnail» itemscope itemtype=»http://schema.org/ImageObject» > <!—описание изображения предпросмотра—>
<img itemprop=»contentUrl» src=»http://mysite.com/images/preview/img1.jpg» >
<meta itemprop=»width» content=»250″>
<meta itemprop=»height» content=»120″>
</span>
</div>

Не стоит забывать, что пользователи не всегда ищут фильмы по названию, в строку поиска они могут вводить имя режиссера или актеров. Для того чтобы ваш сайт показывался в выдаче по данным запросам, необходимо использовать разметку Schema.org/Movie, которая позволит получить структурированный сниппет в Яндексе:

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

Коммерческий сайт

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

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

Для этого данные станицы необходимо размечать с помощью атрибутов Question и Answer от Schema.org:

<div itemscope itemtype=»http://schema.org/Question»>
<h2 itemprop=»name»>Просто любопытно!!! Сколько пьёт слон????</h2>
<div itemprop=»acceptedAnswer» itemscope itemtype=»http://schema.org/Answer»>
<meta itemprop=»upvoteCount» content=»3″ />
<div itemprop=»text»>Зависимости от температуры воздуха они пьют сто – триста литров воды в день. </div>
</div>
<div itemprop=» suggestedAnswer» itemscope itemtype=»http://schema.org/Answer»>
<meta itemprop=»upvoteCount» content=»1″ />
<div itemprop=»text»>Слон, который болеет туберкулезом, может выпить шестьсот литров воды в день.</div>
</div>
</div>

Проверить корректность семантической разметки на страницах сайта можно при помощи Валидатора микроразметки от Яндекса или Google. В данный момент они поддерживают все популярные форматы микроразметки, в том числе Schema.org и OpenGraph.

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