среда, 12 августа 2015 г.

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

10:53 By , , , No comments


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


Существует несколько никак не связанных между собой видов микроразметки, привожу их в порядке убывания популярности:
  • Open Graph;
  • Schema.org;
  • Микроформаты;
  • FOAF;
  • Data Vocabulary;
  • Dublin Core;
  • Good Relations.
Каждый из них был создан различными командами энтузиастов и служит различным целям. Кратко коснёмся трёх основных.
Open Graph – микроразметка, созданная разработчиками FaceBook для красивого отображения других сайтов в этой социальной сети. Чаще всего она используется для расширенного описания ссылок. С помощью неё мы можем указать какое именно изображение считать «обложкой» страницы, какое название страницы выводить при её постинге в социальную сеть, какое описание и тд.
Микроразметку Open Graph понимают все популярные социальные сети (FaceBook, Google+, Pinterest, Вконтакте, Twitter, LinkedIn и другие), а также поисковые системы.
Микроформаты – это теряющая популярность микроразметка. Её распознают большинство поисковых систем. Наиболее популярным применением микроформатов является hCard (формат разметки контактной информации).
И наконец, пришло время представить моего любимчика - schema.org. Почему я отдаю свои симпатии именно этой микроразметке? Всё просто – она создана поисковыми системами для поисковых систем, и мы обязаны этим воспользоваться ;)

Schema.org

Официальный сайт микроразметки: http://schema.org Появилась в 2011 году. Основная суть использования – расширенные сниппеты в результатах поиска, а также надежда на повышение релевантности.
Правильно составленная микроразметка страницы даёт некоторые гарантии о более полном и правильном описании этой страницы в поисковой выдаче. Чтобы лучше понять о чём речь, сравните, как выделяется в результатах поиска сайт с рейтингом (благодаря микроразметке) и без рейтинга:
сниппеты в Google
А вот участок микроразметки этого рейтинга:
<div id="block_rating" itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<meta itemprop="bestRating" content="10">
<meta itemprop="ratingValue" content="8.8">
<a href="/film/447301/votes/" class="continue rating_link rating_ball_green">
<span class="rating_ball">8.789</span>
<span class="ratingCount" itemprop="ratingCount">285 091</span>
</div>
Принципы и синтаксис микроразметки schema.org достаточно хорошо описаны в разделе Яндекса «помощь»: читать.

Что можно размечать?

Практически всё (существует более 100 схем), но не вся разметка будет использована поисковыми системами. Что точно стоит размечать:
  • Отзывы / рейтинги
  • Люди (персоны)
  • Товары
  • Компании и организации
  • Рецепты
  • Мероприятия
  • Видео
Однако это не значит, что всё остальное остаётся в тени. Даже если что-то пока не учитывается в сниппетах, оно может начать учитываться в любой момент в будущем. Тем более поисковые системы заинтересованы использовать микроразметку schema.org в своих новых сервисах, не говоря уже о том, что это давно практикуется в старых (Яндекс.Словари и тд.).
Так что как ни крути, перспективы большие для любых тематик.
Посмотреть все возможные типы для разметки можно на официальном сайте:http://schema.org/docs/full.html
К примеру, на этом блоге я размечаю все статьи как http://schema.org/TechArticle (технические статьи). Также я мог их разметить как обычные статьи (Article), либо как статьи блога (посты - BlogPosting), либо как-нибудь ещё… Весь интерес в том, что нам приходится самим решать, к какой схеме отнести наши страницы.
Внутри одной схемы может быть сколько угодно других схем, но нужно следить за правильной иерархией. Например, внутри статьи (Article) может находиться отдельная схема про персону (Person), которая написала эту статью или является её частью.
Семантическая разметка, скорее всего, заставит вас переделывать структуру вашего HTML макета, чтобы получилось правильно её внедрить. К примеру, я потратил целый день на то, чтобы полностью переверстать комментарии на этом блоге ради правильной разметки. К слову, теперь в них стало в 2 раза больше кода.

Внедрение семантической разметки на Site on!

Для начала я решил, что вся страница – это «творческая работа» (CreativeWork), а именно «техническая статья»:
<html itemscope itemtype="http://schema.org/TechArticle">
Я пометил ключевые слова, описание:
<meta name="keywords" itemprop="keywords" content="ускорение virtuemart, jotcache, кеширование" />
<meta name="description" itemprop="description" content="Разгоняем VirtueMart 2 до экстремальной скорости!" />
название статьи, тело статьи, дату создания и изменения, количество комментариев, автора:
<h1 itemprop="name">Ускорение VirtueMart 2 благодаря гибкому кешированию с помощью плагина JotCache</h1>
<meta itemprop="dateModified" content="2014-02-27 10:43:15" />
<div>Автор статьи: <span itemprop="author">Сергей Рудь</span></div>
<div><meta itemprop="dateCreated" content="2014-02-25" />25.02.2014</div>
<div itemprop="articleBody">Всем добрый день…</div>
<meta itemprop="interactionCount" content="UserComments:3"/>
Всё это вы можете проверить в живую с помощью инспектора, либо заглянув в исходный код (CTRL + U). В общем, советую взять этот блог за пример.
Но это ещё не всё – помимо общего числа комментариев, каждый комментарий я обозначил как отдельную схему (UserComments) внутри схемы статьи (TechArticle).

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

Понимание как это сделать правильно - не далось мне легко, даже пришлось посидеть на stackoverflow.com (там, кстати, тоже не все с умом), но теперь я представляю вам гарантированно правильный вариант семантической разметки комментариев (в данном примере на странице три комментария):
<div itemprop="comment" itemscope="itemscope" itemtype="http://schema.org/UserComments">
<span itemprop="commentTime" content="2014-02-27T10:11:51">27.02.2014 10:11:51</span>
<span itemprop="creator">Борис</span>:
<div itemprop="commentText">Здравствуйте, Сергей! Я использую модуль поиска по товарам от Virtuemart. Как его исключить из кэширования(шаг 5 вашей инструкции)?</div>
</div>

<div itemprop="comment" itemscope="itemscope" itemtype="http://schema.org/UserComments">
<span itemprop="commentTime" content="2014-02-27T10:18:47">27.02.2014 10:18:47</span>
<span itemprop="creator">Борис</span> отвечает:
<div itemprop="commentText">кажется понял - опять через <jot> теги?</div>
</div>

<div itemprop="comment" itemscope="itemscope" itemtype="http://schema.org/UserComments">
<span itemprop="commentTime" content="2014-02-27T10:43:15">27.02.2014 10:43:15</span>
<span itemprop="creator">Сергей</span> отвечает:
<div itemprop="commentText">Здравствйте, Борис. Да, через теги. Только не уверен, что есть смысл запрещать модуль поиска к кешированию, там и так кешировать нечего. А вот com_search из шага 5 лучше исключить из кеша.</div>
</div>
Теперь все популярные поисковые системы (Яндекс, Google, Bing и Yahoo!) смогут с предельной точностью понять где статья и её характеристики, где комментарии (авторы комментариев, количество комментариев, текст и тд.), а где второстепенная, менее значимая информация. Наличие большого числа комментариев и других interactionCount (лайков, твитов...) косвенно показывают поисковикам о значимости страницы и о том, что ваш сайт действительно живой и интересный.

Хочу себе! С чего начать?

Итак, все схемы и их иерархия находятся здесь: изучать. Выбираем наиболее подходящую для ваших страниц схему, сравниваем с конкурентами и начинаем внедрять.
От теории к практике. Для проверки правильности внедрения разметки используйте 2 отличных сервиса: Валидатор микроразметки от Яндекса и Инструмент проверки структурированных данных от Google. Используйте оба! Так как они заточены выявлять разные ошибки. Например, Гуглу не принципиален формат даты, в Яндксе же неправильный формат даты будет считаться ошибкой.
Кстати, проверьте в этих сервисах любую статью данного блога и вам сразу станет понятней. Особенно хорошо видно в Гугле на статьях с комментариями.

Заключение

Микроразметку на этот сайт я добавил недавно, никаких изменений в сниппетах пока нет. Думаю, для моих схем в ближайшее время не предвидится каких-либо особенных сниппетов. Однако стоит отметить, что если у вас интернет-магазин или портал музыки (фильмов) да ещё с рейтингами и отзывами – вы просто обязаны внедрить микроразметку, так как это ваш козырь в привлечении посетителей на сайт через поисковые системы.
Спасибо за ваше внимание. Возможно, напишу плагин для автоматической микроразметки магазинов на VirtueMart 2. Если где-то уже есть готовые решения, жду ссылки в комментариях, спасибо!
P.S. Стоит заметить, что дату создания статьи Гугл и Яндекс могут найти и добавить в свои сниппеты и без микроразметки, однако это не значит, что не стоит её размечать

0 коммент.:

Отправить комментарий