Семантическая микроразметка, основные типы

29.01.2015
Рекламные блоки Яндекс.Директа
Рекламные блоки Яндекс.Директа теперь эффективней на 18%
27.01.2015
Микроформаты
Микроформаты
01.02.2015

Вступление

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

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

Словарь - особый язык, в который входят наборы классов и их свойств, с использованием которых уможно задать суть всего содержимого, которое находится на странице сайта. Например словарь может определять, с применением какого термина нужно указать заголовок (название) страницы - "title", "name" или "n".

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

В данной статье мы разберём наиболее распространённые форматы микроразметки:

  • Open Graph
  • Микроформаты
  • Schema.org
  • FOAF
  • Data Vocabulary
  • Dublin Core
  • Good Relations
Schema.org представляет собой словарь, который совместно разрабатывается крупнейшими поисковыми системами, для облегчения работы вебмастеров, чтобы не приходилось применять различные форматы микроразметки для каждого поисковика. Микроразметка Shema.org позволяет сайтам получить специальный поисковый сниппет в выдаче.

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

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

Наиболее популярные словари микроразметки

Open Graph

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

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

Сам словарь достаточно прост в применении - для того, что бы начать им пользоваться необходимо запомнить всего-лишь 4 свойства:

og:image - Адрес изображения, описывающего объект, его URL.
og:title - наименование документа, объекта.
og:url - url объекта, используемый как его постоянный ID.
og:type - основной тип объекта, в зависимости от самого объекта можно указать и прочие свойства. Например "video.move" - фильм.
Разметка для описания какого-либо человека может выглядеть так:


<html prefix="og: http://ogp.me/ns#<
profile: http://ogp.me/ns/profile#">
<head>
<meta property="og:title" content="Иван Иванов" />
<meta property="og:type" content="profile" />
<meta property="og:url" content="http://site.ru/Иван" />
<meta property="og:image" content="http://site.ru/" />
<meta property="profile:first_name" content="Иван" />
<meta property="profile:last_name" content="Иванов" />
<meta property="profile:gender" content="male" />
...
</head>
...
</html>


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

Помимо этого в теге og:type может находиться другое значение:


  • Video - у каждого фильма можно указать режиссёров, сценаристов, актеров и роли, которые они сыграли, а также продолжительность фильма.
  • Music - для музыки возможно указать албом, длительность, исполнителя, а также для альбомов можно указывать дату релиза, песни, входящие в него и исполнителей.
  • No vertical - к данной категории относятся типы, которые не подходят под критерии вышеперечисленных категорий. У документа можно указать автора, теги и дату публикации. У профилей можно указывать фамилию, имя и пол.
Если же не пользоваться данной разметкой на сайте, то при каждой публикации ссылки на страницу сайта в Facebook данная социальная сеть всё равно попробует составить превью самостоятельно. Но, обычно, это происходит не так, как хотелось бы - вместо изображения, приложенного к статье отображается логотип компании, заголовок может замениться на название какой-либо категории, находящейся на сайте, а в краткое описание, приложенное к статье может попасть совершенно другой текст, который не отражает основной сути всей статьи. Помимо этого, словарь Open Graph распознаётся и поисковыми системами.

Schema.org

Shema.org является словарём, появившимся по инициативе основных поисковиков в 2011 году. Данный словарь поддерживается Яндексом, Bing, Google и Yahoo. В словаре Shema.org также как и в других представлены различные наборы классов, которые описывают различные сущности и задают для них свойства. Но при этом в Schema.org данных классов намного больше, несколько сотен, в сравнении с несколькими десятками в Микроформатах и Open Graph. Все классы, входящие в этот словарь имеют собственное место в иерархии.

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

Наиболее распространённый тип сущности в данном словаре - Thing, который имеет свои подтипы. Вот некоторые из них:

  • CreativeWork - служит описанием для особенностей творческих работ. Изображения, видео, диеты, тексты, статьи, рецепты и прочее, всё это может быть описано при помощи данного типа. У каждой творческой работы можно указать жанр, автора, отзывы, краткое описание, упоминания, а также аудиторию и много других полезных характеристик.
  • Action. С помощью этого подтипа можно описать действие, выполняемое определённым человеком или же компанией. У такого действия можно дополнительно указать объект, место и инструменты, с использованием которых оно совершалось. При помощи данного класса реализован Gmail Actions.
  • Event. В этом подтипе возможно описать какое-либо мероприятие, например собрание или встречу. Тут можно указывать дату, место проведения мероприятия, выступающих, участников и так далее.
  • Person. Данным подтипом можно описать любого человека, как вымышленного, так и живого. Для человека можно указывать информацию о работе, контактные данные, информацию о семье и так далее.
  • Product. В этот подтип входит всё, что можно продать или приобрести. Многие сервисы и услуги также могут быть описаны как Product. Здесь можно указать цвет, аудиторию, рейтинг, бренд, модель, цену и так далее.
Ещё одним плюсом данного словаря является возможность его расширения по инициативе вебмастеров и пользователей. Можно также подписаться на электронную рассылку на английском языке, которая создана для обсуждения различных предложений и вопросов, а также возможностью написания письма с вопросом, касающимся Schema.org, если возникают какие-либо затруднения с её внедрением на сайт.

Пример использования словаря микроразметки Schema.org для описания Person:

<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Иван Иванов</span>
<img src="gagarin.jpg" itemprop="image"/>
<span itemprop="jobTitle">Бизнесмен</span>
<span itemprop="colleague">Юлия Вострякова</span>
<link itemprop="nationality"href="http://ru.wikipedia.org/wiki/Россия">Россия
<span itemprop="memberOf">ООО "Дельта"</span>
<span itemprop="knows">Владимир Васильев</span>
<span itemprop="award">За вклад в разитие России</span>
<a href="http://example.com/Гагарин" itemprop="url">Сайт Ивана Иванова</a>
</div>


При использовании такого вида разметки поисковик понимает, что Иван Иванов является Бизнесменом и коллегой Юлии Востряковой. Помимо этого указаны и другие данные: национальность, знакомства, награды и так далее. Некоторые свойства возможно указывать только с использованием словаря Schema.org. Ознакомиться с подробным описание данного словаря возможно на официальном сайте Schema.org, при этом также существует и неофициальный сайт, переведённый на русский язык: ruschema.org.

Микроформаты

Microformats.org является открытым стандартом, который был создан в 2007 году инициативной группой разработчиков. Данное сообщество энтузиастов хотело разработать стандарт микроразметки, с использованием уже существующих технологий. Ранее данный фактор являлся плюсом, но теперь внедрение этого словаря значительно осложнилось, в некоторых случаях значительно сложнее других словарей микроразметки. В сравнении с микроразметкой Open Graph или же словарём Schema.org, микроформаты используются всё реже и реже.

На сегодняшний день поисковые системы поддерживают несколько видов микроформатов:

  • hProdut - формат, используемый при разметки товара.
  • Card - формат для разметки контактов (телефон, e-mail, адрес и так далее).
  • Review - формат, который используется для разметки отзыва.
  • hRecipe - Данный формат служит для описания различных кулинарных рецептов.
При помощи данных микроформатов появляется возможность отображения улучшенных сниппетов в поисковой выдаче. Наиболее распространённый микроформат - hCard является достаточно универсальным и подходит для описания как людей, так и компаний. При использовании hCard можно указывать различные свойства:
  • org - название компании
  • n - имя человека
  • geo - географическое месторасположение
  • photo - изображение
  • tz - часовой пояс
  • adr - адрес
  • bday - дата рождения человека
Помимо этого существует множество свойств, которые до сих пор находятся на стадии обсуждения и разработки.
Можно проиллюстрировать применение hcard для описания человека:
<div class="vcard">
<img class="photo" src="http://example.com/ivan.jpg" />
<strong class="fn">Иван Иванов</strong>
<span class="title">Бизнесмен</span> at <span class="org">ООО "Дельта"</span>
<a class="url" href=http://site.com/Иванов>Страница И.Иванова</a>
<div class="bday">
<span class="value-title" title="1984-04-10">10 апреля 1984</span>
</div>
</div>
При использовании такой схемы поисковая система понимает, что речь идёт о человеке или компании по имени Иван Иванов, который является бизнесменом, работает в ООО "Дельта". А также известна дата рождения. Свойство url указывает на сайт объекта, о котором идёт речь.
В данной статье мы рассмотрели наиболее известные словари микроразметки, при помощи которых возможно улучшить сниппет поисковой выдачи, увеличить количество посетителей сайта и улучшить его вид для поисковых систем. Для улучшения продающих качеств и продвижения сайта Вы можете обратиться за помощью в Digital-агентство Stormin. Мы предоставляем такие услуги, как: seo копирайтинг, настройка контекстной рекламы, SMM, разработка фирменного стиля и прочие. Вы можете быть уверены в качестве наших услуг, так как наша главная задача - увеличение Вашего объёма продаж!

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