Микроразметка страниц сайта на примере словарей Schema.org и Open Graph

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

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

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

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

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

По словам Яндекса микроразметка призвана, чтобы «значительно упростить жизнь — как сайтам, так и пользователям». С пользователями все понятно, если робот понимает о чем идет речь на страницах, то он сможет предоставить именно то, что нужно пользователю.

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

Расширенный сниппет с рейтингом и хлебными крошками (первая ссылка)

С другой стороны микроразметка страниц сайта может стать настоящей головной болью для его владельца. Ведь до сих пор нет единого стандарта микроразметки, и её структура периодически подвергается изменениям. Кроме того существует довольно неприятная особенность «понимания» микроразметки страниц различными поисковыми системами. Если поисковая система Google не находит ошибок в микроразметке на вашем сайте, то у Яндекса на этот счет может быть своё мнение.

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

В настоящее время по заявлению Яндекса микроразметку в том или ином виде используют порядка 30% всех веб-страниц. Внедрять или нет микроразметку на свой сайт, решать только Вам в настоящее время её использование носит рекомендательный характер. Однако никто не знает, что будет завтра.

Влияние микроразметки на позиции в поиске

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

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

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

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

Основные словари микроразметки

Как я уже говорил, для микроразметки не существует единого стандарта, по крайней мере, пока. Микроразметка состоит из множества так называемых словарей, каждый из таких словарей имеет свой синтаксис. Но из всего многообразия словарей можно выделить только два особо распространенных - Schema.org и Open Graph. Первый используется поисковыми системами, второй социальными сетями.

Поговорим о вышеупомянутых словарях более подробно.

Schema.org

Словарь или стандарт микроразметки Schema.org был разработан в 2011 году поисковиками Google, Yahoo! и Bing (от мелкомягких). Позднее этот же стандарт подхватил и Яндекс.

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

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

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

Чтобы стало понятнее, давайте разберем небольшой пример, допустим, нам надо в статью добавить микроразметку Schema.org. Сущностью здесь будет являться сама статья, поэтому в начале документа добавляем специальный тип itemtype=https://schema.org/Article. Далее размечаем тело статьи при помощи атрибута itemprop="articleBody", заголовок itemprop="headline", количество просмотров itemprop="interactionCount" и так далее. Более наглядно все это дело смотрите на картинке:

Пример микроразметки Schema.org для статьи

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

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

Пример вложенных сущностный микроразметки Schema.org

Обо всех тонкостях микроразметки Schema.org Вы можете прочитать в статье «Микроразметка Schema.org для материалов (статьи)» и «Микроразметка Schema.org для блога Joomla 3».

Open Graph

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

Для корректной работы микроразметки Open Graph необходимо добавить дополнительные атрибуты в теге <html> и метатеги в head документа. В теге <html> мы указываем роботу на то, что на странице используется микроразметка Open Graph:

<html prefix="og: ogp.me/ns#>

Далее между тегами head необходимо добавить новые метатеги, основные из них мы сейчас рассмотрим:

  • og:title – используется для задания заголовка документа.
  • og:type – говорит роботу о том, какого рода контент (тип содержимого) находится на странице. Если типов используется несколько, то указать необходимо основной.
  • og:url – канонический адрес страницы, будет использован в качестве идентификатора.
  • og:image – указывает на изображение объекта (статьи, видео и т.п.)
  • og:description – краткое описание, некое подобие мета-тега description в Joomla 3.

Чтобы все стало понятнее, давайте рассмотрим небольшой пример, в котором при помощи микроразметки Open Graph разметим страницу с видео (адреса вымышленные).

<html prefix="og: http://ogp.me/ns#">
 <head>
<title>Последний богатырь (2017)</title>
<meta property="og:title" content="Последний богатырь" />
<meta property="og:description" content="Краткое описание фильма"/>
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.video.com/ru/pb2017" />
<meta property="og:image" content=" http://www.video.com/ru/pb2017/pb.jpg" />
...
</head>
<body>
…
</body>
</html>

Более подробную информацию о протоколе Open Graph и как его прикрутить к сайту на Joomla 3 читайте в статье «Open Graph для joomla».

Проверка микроразметки

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

Добавить комментарий