Микроразметка (семантическая разметка) Schema.org и её роль в продвижении сайта

"Все аспекты самостоятельного создания и продвижения сайтов
от практика с многолетним опытом." — блог Рудь Сергея
info@site-on.net
Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!
27.02.2014

Об этом все думают, но мало кто говорит, а ещё меньше делают...

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

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

передача информации

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

Каждый из них был создан различными командами энтузиастов и служит различным целям. Кратко коснёмся трёх основных.

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. Стоит заметить, что дату создания статьи Гугл и Яндекс могут найти и добавить в свои сниппеты и без микроразметки, однако это не значит, что не стоит её размечать.

С уважением, .
Пожалуйста, оцените эту статью
Средняя оценка: 4.27 из 5 (проголосовало: 254)
Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!

Ваш email:
Вы можете помочь развитию проекта, сделав всего 1 клик:
Спасибо!
Пожалуйста, прокомментируйте, как Вам моя статья?
Имя:
Комментарий:

Если Вы хотите вставить код, пожалуйста, заключайте его в [code][/code]

Подписаться на новые комментарии:

E-mail:


Защита от спама: пожалуйста, напишите слово "сел" справа налево
Ответ:
Подписаться на новые комментарии без комментирования - Email:
Защита от спама: пожалуйста, напишите слово "сел" справа налево
Ответ:

24.03.2014 09:38:11 Давид:
Спасибо за статью!

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


23.04.2014 21:29:32 Volday:
Спасибо. Долго я с комментами мучился.

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


25.04.2014 17:30:32 Александр:
Спасибо! Добавил себе разметку, даже для каждого комментария. А у вас кстати не верно выводится дата.
02.07.2014 09:35:08 Сергей отвечает:
Да, я в курсе :) Надеелся, поисковикам и так пойдет. Но теперь уже нет времени переделывать)

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


27.05.2014 13:52:43 Сергей:
Доброго времени суток. Спс за статью.
Не мог ли бы подсказать, можно ли одновременно использовать Schema.org и Open Graph.
так как первая больше рассчитана на поисковики, а вторая на соц.сети.
у самого две эти разметки соединить не получается, а конкретной инфы нигде не нашел.

заранее спс...
27.05.2014 14:54:19 Сергей отвечает:
Добрый день. Думаю, никаких проблем не будет, если Вы совместите обе разметки.

На счёт информации как это сделать, я не пробовал, но думаю, что нужно просто разметить независимо друг от друга.

Например, у вас уже размечен сайт под Schema.org, теперь просто берёте и размечаете его ещё и по правилам Open Graph, не обращая никакого внимания на Schema.org.

Затем посмотрите как реагируют инструменты проверки мимкроразметки, которые я указал в этой статье, эксперементируйте. Думаю, должно быть всё ОК.
11.06.2014 04:40:24 Иван отвечает:
А как в практике это все сделать. Мне нужно это внедрить в мой сайт http://belarusbux.by/ ?
11.06.2014 09:15:10 Сергей отвечает:
Как на практике внедрить разметку Schema.org я рассказал в этой и в следующей статье.

Про Open Graph можно найти ответы в Google.

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


20.06.2014 22:34:57 Евгений:
Отличная статья. Еще для баранов такую же только для товаров. А так прийдется самому разбираться(((
21.06.2014 09:35:37 Сергей отвечает:
Она давно уже есть :) Следующая после этой.
22.06.2014 20:18:38 Евгений отвечает:
Сергей, спасибо огромное. Побежал читать)

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


10.07.2014 03:54:46 Юрий Йосифович:
Есть джумла. В ней Jcomments - но вот при разметке не могу понять, каким образом установить дату в таком виде: 2014-02-27T10:18:47

За дату в шаблоне отвечает строка:

<span class="comment-date"><?php echo JCommentsText::formatDate($comment->date, JText::_('DATETIME_FORMAT')); ?></span>


Как же прописать эту строку, в формате разметки, чтобы не выбрасывало ошибку?
10.07.2014 08:03:45 Юрий Йосифович отвечает:
Сам сказал, сам и нашел решение: нужно задать строкой, в которой вынести дату из span в мету.
Я сделал так:
{code]
<span class="comment-date"><meta itemprop="commentTime" content="<?php echo JCommentsText::formatDate($comment->date, JText::_('c')); ?>"><?php echo JCommentsText::formatDate($comment->date, JText::_('DATETIME_FORMAT')); ?></span>
Теперь разметка действительно валидная.

Кстати, еще один момент - размер поля Дескриптион должен быть более 250 знаков. Как бы это ещё исправить (у меня это поле не заполнено на 250 знаков...

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


27.07.2014 09:40:02 Тупан:
черт ногу сломит в этом разобраться. Лучше бы автор пошагово разложил всё. Для тупанов

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


01.08.2014 14:13:03 Сергей:
Здравствуйте.
Мой сайт: http://avtolife-kovel.com.ua/
Сделал разметку с помощью: Open Graph, и Schema.org, но прошло уже два месяца, а результатов в поисковиках чтот не замечаю, хотя в яндекс валидаторе, и в гугле, ошибок не обнаружено.
Может подскажете в чем может быть причина?

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


20.08.2014 14:45:17 Сергей:
Подскажите пожалуйста в каких файлах в joomla 2.5 формируются:
name="keywords"
name="description"
и вставляится эта строка:
<html itemscope itemtype="http://schema.org/TechArticle"><head>
20.08.2014 21:00:29 Сергей отвечает:
Здравствуйте.
1) \libraries\joomla\document\html\renderer\head.php
2) /templates/ваш_шаблон/ищите здесь среди файлов, в каждом шаблоне индивидуально. Возможно header.php
21.08.2014 12:07:30 Сергей отвечает:
name="description" уже нашел а вот name="keywords" нет.
Ктото подскажет?
21.08.2014 12:34:41 Сергей отвечает:
Автор все верно подсказал, теги здесь 1) \libraries\joomla\document\html\renderer\head.php все работает. Спасибо!

Тогда наберусь наглости, еще один момент:
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Article"></html>
<html lang="uk-ua" dir="ltr">
<head>
Пишет что - <html lang="uk-ua" dir="ltr"> - Бездомный html!
21.08.2014 13:20:52 Сергей отвечает:
Вот так надо было
<html lang="uk-ua" dir="ltr" itemtype="http://schema.org/Article">
Теперь работает

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


21.10.2014 13:27:26 Евгений:
Сергей, а ты сможешь внедрить данную разметку на сайт, ну естественно за деньги !
21.10.2014 19:49:56 Сергей отвечает:
Да, но сейчас мало времени. Так что не раньше чем через неделю.
22.10.2014 14:40:02 Евгений отвечает:
Мне буквально одну строчку, а даже не строчку а вот itemprop="comment" это атрибут не знаю куда всунуть, если он вставленный полностью как на примере, то выдает ошибку, а если его удаляю то в ЯН нормально, а в ГУГЛЕ показывает что не хватает, короче вот с одним этим атрибутом вожусь уже 3 дня, не пойму что делать? Помоги пожалуйста.

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


08.11.2014 19:33:30 balboa:
Спасибо за статью, но есть вопрос.

Можно ли разметить "ответы на комментарии" - в виде древовидной структуры?

Т.е

Комментарий "текст":
Ответ: первый ответ на первый комментарий
Ответ: второй ответ на первый комментарий
Ответ: третий ответ на первый комментарий
итд.
08.11.2014 20:32:59 Сергей отвечает:
До сих пор такой необходимости не было, поэтому не размышлял об этом. Думаю, что такая возможность может быть, ведь каждый комментарий это тоже CreativeWork, то есть по идеи может иметь свой комментарий.

Но это мысли вслух, нужно просто попробовать, поэкспериментировать.
08.11.2014 20:51:31 balboa отвечает:
да, есть даже приоритет "discusses" - но реализовать самостоятельно пока не выходит(

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


17.07.2015 12:20:51 Гость:
Опис использования микроформатов

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


01.09.2015 10:32:21 Петрушка:
Разметка почти не правильная.

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


01.09.2015 10:37:31 Петруха:
С точки зрения семантики, разметка не правильная.
Ну автор и нагородил тут конструкций... ))Для чего? На оф. сайте есть же примеры.. Зачем каждый коммент выделять в отдельный div? Зачем itemscope="itemscope" ? ?????
Правильный код:
<div id="comments" itemprop="comment" itemscope itemtype="http://schema.org/UserComments">
<h6 itemprop="name" align="center">Коменты</h3>
<span itemprop="commentTime">27.02.201410:11:51</span>
<span itemprop="creator">Борис</span>:
<div itemprop="commentText">Здравствуйте, Сергей! Я использую модуль поиска по товарам от Virtuemart. Как его исключить из кэширования(шаг 5 вашей инструкции)?</div>
<br><br>
<span itemprop="commentTime" >27.02.2014 10:11:51</span>
<span itemprop="creator" >Петруха</span>:
<div itemprop="commentText">Здравствуйте, Василий! Я использую модуль другой</div>
</div>

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


01.09.2015 10:56:07 Петрушка:
(к комменту выше) При чём, если есть родительский <div itemscope itemtype="http://schema.org/Article"> то нет необходимости указывать <div itemprop="comment" itemscope itemtype="http://schema.org/UserComments">. Достаточно будет так:
<span itemprop="commentTime" content="2012-07-15">2012-07-15</span>
<span itemprop="creator" ><br>Борис</span>:
<span itemprop="commentText">Здравствуйте, Сергей! Я люблю Virtuemart.</span>
Тогда по умолчанию комментарий будет отнесён к родительскому элементу ( т.е. собственно к статье). Также и для других (например,<div itemscope itemtype="http://schema.org/ImageObject">)
Автору спасибо за хороший пост.
01.09.2015 11:13:54 Петрушка отвечает:
Не правильно! <div itemprop="comment" itemscope itemtype="http://schema.org/UserComments"> - Обязательно.

п.с. Петрушка балбес. Сори. Перепутал конструкцию с http://schema.org/Comments".

Последняя относится к комментарию ( подобие рецензии) самого автора на свою же статью. В этом случае достаточно <span itemprop="comment>Петрушка балбес</span> при наличии родительского itemtype="http://schema.org/Article"

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


16.10.2015 17:47:59 Андрей:
Плагин для микроразметки VM есть http://extensions.joomla.org/extensions/extension/clients-a-communities/ratings-a-reviews/rich-snippets-vote
Правда, комментарии не читал, может уже кто-то и писал.
P.s. Крутая защита от спама!

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


03.12.2015 13:42:00 Людмила:
У вас не правильно сделана микроразметка комментариев.
UserComments – недопустимый тип целевого объекта для свойства comment.

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


03.02.2016 17:13:28 dnzl:
что-то много ошибок выдает developers.google.com/structured-data/testing-tool/

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

Использую для работы
Мои расширения
Свежие статьи
Рекомендую
Горячо обсуждаемые
Подписка
  • Следовать в twitter:
  • Подписаться по RSS:
  • Подписаться по E-mail:
  • Следить ВКонтакте:
  • Следить на Facebook:
Пользовательское соглашение об условиях использования сайта и Политика конфиденциальности
Перепечатывание или копирование материалов сайта (текста, изображений и другого содержимого) для их публичного или коммерческого использования в сети Интернет, либо в печатных изданиях строго запрещены. При нарушении данного правила, с нашей стороны будут предприняты соответствующие меры, вплоть до судебной жалобы.
© site-on.net
Шрифт: +стандартно-