Рассылка по интернет-маркетингу:
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных

Как использовать микроразметку Schema.org: руководство для чайников

26 Мая 2014 Евгения Крюкова
Время чтения: 5 минут Нет времени читать? Нет времени? 43 комментариев
Отправим материал вам на:
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных

Вы знаете, что такое schema.org, но никак не можете внедрить ее на свой сайт? Вы прочитали кучу статей по теме, но ни одна из них не дала вам четкого руководства к действию? И вроде бы все понятно, но коды все-равно не работают?

Типичные комментарии к статьям о микроразметке

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

Что такое Schema.org?

Достаточно подробно о том, что такое микроразметка Schema.org, мы писали в одной из наших прошлых статей. А если коротко, то Schema.org – это словарь семантической разметки данных, поддерживаемый всеми ведущими поисковыми системами. Ее цель – помогать поисковым роботам лучше понимать содержание страницы и, тем самым, улучшать результаты выдачи.

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

Куда что нужно вписывать?

Ну а теперь давайте разбираться, какие коды и куда нужно вписывать. Обратимся к конкретному примеру. Вот так выглядит микроразметка, описывающая фильм «Аватар»:

Взято из Яндекс.Вебмастер

Здесь мы видим три атрибута, и их вы должны будете неизменно использовать в каждой своей микроразметке:

  1. itemscope нужен только для того, чтобы показать поисковому боту, что на странице описывается определенный объект.
  2. itemtype всегда идет рядом с itemscope и нужен для того, чтобы показать поисковому боту тип объекта (в данном случае, это Movie). Полный список объектов можно посмотреть по ссылке.
Все слова, выделенные красным, – это типы объектов
  1. itemprop – описывает свойства выбранного объекта. В данном случае это: название фильма (name), режиссер (director), жанр (genre) и наличие трейлера (trailer). Все доступные свойства перечислены на сайте schema.org в соответствующем разделе:
Свойства объекта Movie (фильм)

Примечание. Вышеприведенный скриншот был сделан на сайте ruschema.org – проект перевода schema.org, развивающийся силами добровольцев. На данный момент переведен не весь сайт. Поучаствовать в переводе может любой желающий.

Помимо этих трех атрибутов в коде присутствуют еще и теги. Рассмотрим на другом примере, тип объекта – Person (Человек):

Желтым выделены используемые теги
  1. Теги <div> … </div> показывают, где начинается и заканчивается описание объекта.
  2. В теги <span> … </span> заключаются те свойства объекта, которые можно описать словами.
  3. Тег <link> с атрибутом href нужны для перечислений и ссылок на канонические страницы. Ссылки, поставленные таким образом, не видны пользователям.
  4. Теги <time> … </time> с атрибутом datetime используются для указания даты, времени и длительности. Дату и время необходимо указывать в следующих форматах: YYYY-MM-DD (2014-05-26), Тhh:mm (Т10:25) либо Тhh:mm:ss (Т02:40:15). При этом, их можно указывать одновременно:
<time> … </time> с атрибутом datetime
  1. Теги <a> … </a> используются для указания ссылок, видных для пользователей.
  2. Тег <meta> (на изображении не используется) скрывает информацию от пользователей. Данный тег не рекомендуется использовать слишком часто – Google это не одобряет.

Как это сделать на практике?

Заходим на ruschema.org в раздел «Схемы». Выбираем нужный объект. Допустим, Book (Книга). Смотрим, какие свойства мы хотим указать. И начинаем собирать код.

У вас должно получиться примерно следующее:

Пример микроразметки для книги

Проверить правильность проставления микроразметки можно в специальных сервисах от Google и от Yandex.

Несколько примеров сниппетов и кодов

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

  • Видео
Сниппет поста, размеченного по типу Videoobject

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

<h2>Video: <span itemprop="name">Название видео</span></h2>

<meta itemprop="url" content="http://example.com" />

<meta itemprop="isFamilyFriendly" content="True">

<meta itemprop="duration" content="Длительность – T7M02S" />

<meta itemprop="thumbnail" content="URL скриншота" />

<meta itemprop="contentURL">"Ссылка на сам видеофайл - http://www.example.com/video123.flv"

<meta itemprop="uploadDate" content="2011-07-05T08:00:00" />

<iframe width="560" height="315" src="//www.youtube.com/embed/N-4tzVFsyLU" frameborder="0" allowfullscreen></iframe> – HTML-код видео. Берется с видеохостинга:

<span itemprop="description">Описание видео</span>

</div>

  • Рецепт
 Сниппет поста, размеченного по типу Recipe

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

<span itemprop="name">Название рецепта</span>

<span itemprop="recipeInstructions">Берем бананы, снимаем с них кожуру. Перемалываем в блендере и добавляем туда муку"

<span itemprop="author">Имя автора</span>,

<meta itemprop="datePublished" content="2009-05-08">May 8, 2009

<img itemprop="image" src="Картинка_блюда.jpg" />

<span itemprop="description">Описание рецепта</span>

<meta itemprop="cookTime" content="Время приготовления – PT1H">1 hour

<span itemprop="ingredients">3 банана</span>

<span itemprop="ingredients">1 яйцо</span>

<span itemprop="ingredients">Стакан сахара</span>

</div>

  • Организация
Сниппет поста, размеченного по типу 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="addressLocality">Город</span>,

<span itemprop="addressRegion">Область</span>.

</div>

<img itemprop="logo" src="Ссылка на логотип – http://www.example.com/logo.png" />

Phone: <span itemprop="telephone">Номер телефона – 206-555-1234</span>

</div>

Важная информация

Если вы используете авторство Google, и в поиске уже отображается ваша фотография, не используйте микроразметку Schema.org, поскольку авторство после этого может нарушиться.

Пример 1. При описании видеообъекта (videoObject), фотография автора полностью заменяется на скриншот из видео (thumbnail), а информация об авторе перемещается в самый низ сниппета. В некоторых случаях, авторство удаляется полностью.

рмация об авторе переместилась в самый низ сниппета

Пример 2. При описании объекта отзыв (review), происходит то же самое – фото автора исчезает и появляется информация о том, кому принадлежит данный отзыв (обзор).

Фото автора исчезло и появилась информация о том, кому принадлежит отзыв

Какой из сниппетов показывает лучший CTR, к сожалению, неизвестно. Но эта информация важна, и ее нужно было донести.

Адаптация материала Schema-org Guide for Beginners (Everyone Can Understand!) + Schema Cheatsheet и Structured Data: Why you should mark-up for higher CTR.

Маркетолог агентства «Текстерра», автор бесплатных электронных книг «100+ практических хаков для интернет-маркетологов» и «Создание лендинга от А до Я. Подробнейшее руководство с примерами». Пишу статьи, веду рассылку, постоянно ищу новые площадки и способы продвижения. Считаю, что качественный контент – мощнейшее оружие маркетолога, и уже 3 года успешно подтверждаю это на практике. Добавляйтесь ко мне в друзья в Facebook и «Вконтакте», я там периодически публикую очень занятные статейки по интернет-маркетингу.

Другие публикации этого автора
© «TexTerra», при полном или частичном копировании материала ссылка на первоисточник обязательна.
Нашли ошибку в тексте? Выделите нужный фрагмент и нажмите ctrl + enter.
Оцените материал:
Texterra – продвижение в интернете x
Заказать звонок:
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных
Texterra – продвижение в интернете x
Заказать услугу:
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных