БЛОГ

Всё что надо знать о микроразметке Schema.org для сайта

Уважаемые друзья!

В данной статье речь пойдёт о внедрении микроразметки на сайт, а конкретно микроразметки стандарта Schema.org.

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

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

Хотел назвать эту статью: «Как внедрить микроразметку на сайт, если Google скоро умрёт», но решил оставить техническое название. Изучив эту статью, Вы поймёте основную суть микроразметки и в дальнейшем будете с лёгкостью её внедрять на свои сайты.

Вначале статьи хочу сделать очень важное заявление: не стоит сильно заморачиваться и пытаться идеально отшлифовать микроразметку под свои потребности. Такое заявление о микроразметке Schema.org обусловлено двумя следующими факторами:

  1. Нет статистики о положительном влиянии микроразметки на трафик сайта, либо другие показатели индексирования сайта в поисковых системах. Есть множество утверждений, что микроразметка улучшает вероятность формирования красивого сниппета и якобы из-за этого увеличивается количество посетителей сайта. Но это лишь утверждения. А где цифры? Где обратная связь: какова вероятность формирования красивого сниппета от внедрённой микроразметки или насколько положительно влияет микроразметка на показатели посещаемости? По крайней мере, мне такую статистику обнаружить не удалось.
  2. И второе утверждение связано с тем, что стандарт микроразметки Schema.org разрабатывался западными компаниями и затачивался в первую очередь под поисковые системы Google, Bing и Yahoo. Думаю, каждый здравомыслящий разработчик, понимает, что калейдоскопический (шизофренический) менталитет западного обывателя сильно отличается от мозаичного (здорового) менталитета русского человека. Все, кто работал с различными сервисами Гугла, должны были заметить, насколько они запутаны и непонятны. Как говорится: «Сам чёрт ногу сломает». Аналогично дело обстоит и со стандартом микроразметки Schema.org. Если заглянуть в её спецификацию (официальный сайт https://schema.org и русская версия https://ruschema.org), то найти здравомыслящую логику сопоставимую с архитектурами сайтов, в её структуре будет сложно. Этому свидетельствует и тот факт, что зачастую при проверке одного сайта в валидаторе микроразметки Яндекса (https://webmaster.yandex.ru/tools/microtest) ошибок может не быть, в то время как сервис микроразметки от Google (https://search.google.com/structured-data/testing-tool) выдаст нам ошибки. Или наоборот. Есть множество и других фундаментальных недоработок в стандарте Schema.org. Некоторые из них я приведу в этой статье ниже.

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

Теперь давайте перейдём к делу!

Для чего нужна микроразметка на сайте

Для понимания сути микроразметки рекомендую просмотреть очень толковое 1,5-минутное видео от Яндекса ниже.

Что такое микроразметка Schema.org?

Привожу определение от Яндекса:

Schema.org – это стандарт семантической разметки данных в сети, объявленный поисковыми системами Google, Bing и Yahoo! летом 2011 года.

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

Яндекс с осени 2011 года понимает этот формат и поддерживает его в некоторых партнерских программах.

Разметка происходит непосредственно в HTML-коде страниц с помощью специальных атрибутов и не требует создания отдельных экспортных файлов.

Т.е. к тегам HTML-страницы необходимо добавить специальные атрибуты, которые указывают на то, какая информация находится в этом блоке. Какие атрибуты микроразметки и по каким схемам они внедряются, поговорим ниже.

Следуют отметить, что на одном сайте можно использовать комбинацию из нескольких микроразметок. Об этом утверждает Яндекс, но рекомендует Schema.org.

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

Синтаксис Schema.org

Информацию о синтаксисах привожу как дополнительную. Рекомендую пропустить эту главу.

Четыре вида синтаксиса Schema.org:

  1. RDFa;
  2. микроформаты;
  3. микроданные;
  4. JSON-LD.

RDFa уступает в функциональности микроформатам и микроданным.

Микроформаты имеют ряд ограничений и устарели.

Микроданные – оптимальный вариант для Яндекса. К тому же Google поддерживает этот стандарт микроразметки.

JSON-LD не поддерживается Яндексом на поиске (но поддерживается в Яндекс.Почте). Он хорош для Google. Google рекомендует использовать именно JSON-LD — он более простой и компактный, в отличие от RDFa, микроформатов и других синтаксисов.

На одной странице допускается использовать несколько различных синтаксисов разметки.

Ниже мы будем говорить как раз о микроданных.

Основные принципы разметки Schema.org

Давайте рассмотрим простой пример. Нам необходимо разметить название организации. Для этого используем два шага (любая разметка Schema.org производится в два шага):

  1. Оборачиваем описание определенного типа в тег с указанием схемы разметки:
    <div itemscope itemtype="http://schema.org/Organization">
        ...
    </div>
  2. Размечаем конкретное свойство, которое соответствует схеме разметки:
    <h1 itemprop="name">ООО «Русь»</h1>

Т.е. на первом шаге мы родительскому элементу с необходимой нам информацией добавляем два атрибута: itemscope и itemtype.

Добавляя itemscope, мы тем самым обозначаем, что HTML-код, содержащийся в блоке <div>...</div>, описывает некоторую сущность.

Мы объявили, что речь идёт о какой-то сущности, и с помощью атрибута itemtype (сразу после itemscope) указали тип сущности. В нашем примере тип сущности Organization (Организация). Все сущности перечислены в стандарте. Стандарт постоянно расширяется.

На втором шаге добавляется конкретное свойство сущности. В нашем случае мы указали свойство name (название организации) в качестве значения атрибута itemprop.

В итоге у нас получился следующий код:

<div itemscope itemtype="http://schema.org/Organization" >
    <h1 itemprop="name">ООО «Русь»</h1>
</div>

Каждому типу сущности соответствует свои свойства.

Все сущности микроразметки делятся на два типа:

  1. Универсальные (206 сущностей).
  2. Специализированные (в стандарте они указаны как «Более конкретные типы» на странице соответствующей сущности).
Более конкретные типы сущностей
Рис. 1. Специализированные типы сущностей

Для меня слово сущность ассоциируется с энергетическим паразитом. Неспроста «наши западные партнёры» дали такое наименование этому. Дочитав статью до конца, Вы сами в этом убедитесь.

Вот и весь основной принцип микроразметки.

Дополнительно к этому следует сказать об использовании мета тега <meta>, разметке даты-времени и указании ссылок.

  1. Если нам необходимо указать недостающую или неявную информацию можно применить мета тег <meta> с соответствующим значением атрибута itemprop и атрибутом content.
    <meta itemprop="address" content=”Сталинград”>
    Тег <meta> рекомендуется использовать для той информации, которую невозможно разметить иным способом. Какие конкретно значения атрибута itemprop для тега <meta>, можно применять, в стандарте не указано. Следуя логике, можно предположить, что в качестве этих значений могут выступать те же значения, какие допустимы для других любых тегов этого свойства.
  2. Для отображения даты, времени и длительности рекомендуется использовать тег <time> с атрибутом datetime
    <time datetime="2011-04-01">04/01/11</time>

    Важно правильно задать формат даты или времени. Если не указывать атрибут datetime, то время будет подтягиваться с содержания тега. Но если нам необходимо для пользователей отобразить удобный формат даты и времени, который не поддерживается микроразметкой, тогда мы и используем атрибут datetime.

    Время суток задаётся в формате hh:mm либо hh:mm:ss, с префиксом T. Время может быть указано вместе с датой: 

    <time datetime="2011-05-08T19:30">8 мая, 19:30</time>

    H обозначает количество часов, а M — количество минут.

  3. Для ссылок мы можем использовать тег <link>. Например:
    <link itemprop="mainEntityOfPage" href="https://site.ru/page-kob">

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

Траблы с микроразметкой

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

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

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

Нестандартная ситуация с микроразметкой

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

Представим ситуацию, что в шапке нашего сайта отображается следующая информация:

  • логотип организации
  • название организации
  • телефон

А вот адрес организации мы решили в шапке сайта не указывать.

Наш код будет иметь следующий вид:

<div itemscope itemtype="http://schema.org/Organization">
    <img itemprop="logo" src=”logo.png”>
    <h1 itemprop="name">ООО «Русь»</h1>
    <a itemprop="telephone">+7 965 275 22 74</a>
</div>

В этом случае, валидатор от Яндекса выдаст нам предупреждение, что не указан адрес организации. Якобы свойство address является обязательным свойством для типа сущности Organization.

А вот Гугл выдаст другую ошибку. Гугл скажет, что надо обязательно указать свойство URL. Только URL чего, - непонятно. Проверил, что ошибка пропадает при указании любого URL, будь то ссылка на главную страницу сайта или на соц. сети. Неважно. Главное, что бы был URL.

Т.е. правильный код для гугла будет выглядеть так:

<div itemscope itemtype="http://schema.org/Organization">
    <img itemprop="logo" src=”logo.png”>
    <h1 itemprop="name">ООО «Русь»</h1>
    <a itemprop="telephone">+7 965 275 22 74</a>
    <a itemprop="url" href=”http://vpkrus.ru”>ООО «Русь»</a>
</div>

Для того, что бы задать свойство address для Яндекса применяем мета-тег <meta>.

Правильный код для Яндекса будет выглядеть так:

<div itemscope itemtype="http://schema.org/Organization">
<meta itemprop="address" content=”Сталинград”>
<img itemprop="logo" src=”logo.png”>
<h1 itemprop="name">ООО «Русь»</h1>
<a itemprop="telephone">+7 965 275 22 74</a>
</div>

Для обеих поисковых систем правильный код будет выглядеть так:

<div itemscope itemtype="http://schema.org/Organization">
    <img itemprop="logo" src=”logo.png”>
    <meta itemprop="address" content=”Сталинград”>
    <h1 itemprop="name">ООО «Русь»</h1>
    <a itemprop="telephone">+7 965 275 22 74</a>
    <a itemprop="url" href=”http://vpkrus.ru”>ООО «Русь»</a>
</div>

Если же мы хотим отобразить полностью адрес организации, тогда код будет иметь вид:

<div itemscope itemtype="http://schema.org/Organization">
<img itemprop="logo" src=”logo.png”>
<h1 itemprop="name">ООО «Русь»</h1>
    <a itemprop="telephone">+7 965 275 22 74</a>
    <a itemprop="url" href=”http://vpkrus.ru”>ООО «Русь»</a>
    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        <span itemprop="streetAddress">улица Товарища Сталина</span>
    </div>
</div>

В данном примере мы объявили новый тип сущности «PostalAddress». А внутри него указали соответствующие свойства.

Обратите внимание, что для одного тега указан атрибут свойства itemprop, а далее идут атрибуты новой сущности itemscope и itemtype.

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

Ожидаемые типы сущностей
Рис. 2. Ожидаемые типы

Иногда значение свойства может само являться сущностью, с собственным набором свойств.

Вот теперь и Яндекс и Google спокойны. Но спокойны ли мы? Как быть если мы не хотим указывать данную информацию в шапке нашего сайта? Если дизайн или концепция нашего сайта не предусматривает указание адреса в блоке с логотипом и номером телефона?

Частично этот вопрос помогает решить мета тег <meta> с соответствующим значением атрибута itemprop. Но не для всех полей его, к сожалению, можно использовать.

Похожие траблы наблюдаются и с другими типами сущностей. Например, тип сущности «WPHeader» служит для отображения шапки сайта (header). Однако, к сожалению, этот тип сущности не предусматривает свойства для логотипа. Вот те на! Как же так? Ведь почти все сайты в шапке имеют логотип.

Наследование свойств и очередные траблы

Мы знаем, что в HTML большинство свойств родительского элемента наследуются дочерним. Похоже дело обстоит и с наследованием свойств в микроразметке. Если внутри одной сущности присутствует другая сущность (дочерняя), то дочерней сущности можно задавать свойства родительской сущности. Всё вроде бы просто, но есть несколько НО!

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

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

Наследование свойств Shema.org
Рис. 3. Наследование свойств в Shema.org

Давайте рассмотрим пример с наследуемостью свойств. Допустим, нам необходимо указать изображение для сущности LocalBusiness. Но для данной сущности стандарт не поддерживает свойство изображения image. Но так как сущность LocalBusiness, является дочерней сущностью сущности Thing, то внутри LocalBusiness можно задать свойство image. При этом необязательно в качестве родительского элемента обозначать сущность Thing. Просто в спецификации это уже предусмотрено.

<div itemscope itemtype="http://schema.org/LocalBusiness">
	<h1><span itemprop="name">Организация Русь</span></h1>
	<img itemprop="image" src="/kartinka.png">
	<span itemprop="description">Одним из самых главных славянских богов считался РОД.</span>
	Телефон: <span itemprop="telephone">+7 991-333-52-44</span>
</div>

Кстати, о сущности Thing. Это сущность самая всеобъемлющая, наподобие того как тег html в вёрстке.

Thing – самый общий тип чего-либо.

Ух! Как же здесь всё запутано! Целую диссертацию надо защитить, что бы внедрять эту микроразметку на сайт.

Вообще, чтобы понять стандарт Shema.org, необходимо рассмотреть такое математическое понятие как «Частный случай». Но не рекомендую этого делать, так как углубляясь в понятия используемые в Shema.org, Вы убедитесь, что объявленная логика разработчиков, в нём не соблюдается.

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

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

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

Всё оказывается очень просто.

Давайте ещё раз прочитаем какова цель семантической разметки:

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

Обратите внимание! Кому облегчить обработку данных? Поисковым системам и специальным программам? А как же человек?

И вторая часть определения: для удобного представления в результатах поиска. Как то размыто. Какого поиска? Кто будет осуществлять поиск? Все, кто пользуется интернетом или избранный круг лиц имеющий доступ к закрытым базам данных сайтов собираемых с помощью микроразметки?

Ответ таков, что заказчики микроразметки ставили первоочередную цель облегчить для себя сбор сведений обо всех. Им плевать какова структура Вашего сайта. Они задали свои условия: «Если Вы хотите хорошо индексироваться в поисковой системе, структурируйте информацию на сайте по нашему шаблону. Тогда с лёгкостью внедрите микроразметку и мы очень быстро будем знать о Вас всё!». Ведь микроразметка облегчает жизнь специальным программам.

Обратите внимание, что если прогнать через валидатор микроразметки главную страницу сайта https://schema.org, то по состоянию на 5 июня 2020 года мы не обнаружим микроразметки.

Отсутствие микроразметки на сайте Schema.org
Рис. 4 Отсутствие микроразметки на сайте Schema.org

А вот по состоянию на 26 февраля 2020 года, валидатор от Google выдавал аж 55 ошибок и 36 предупреждений на странице блога сайта Schema.org.

Ошибки микроразметки на сайте Schema.org
Рис. 5. Ошибки микроразметки на сайте Schema.org

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

Думаю теперь понятно, почему не стоит исправлять абсолютно все предупреждения поисковиков при внедрении микроразметки. А возможно и вообще стоит отказаться от затеи её внедрения.

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

Напутствие на внедрение микроразметки

Ещё раз хочу обратить внимание, что при построении микроразметки не стоит отталкиваться от типов страниц (в стандарте это не предусмотрено). Необходимо отталкиваться от типов содержимого в блоках на странице. В этом смысле путаницу вносит тип сущности WebPage, который рекомендуется применять для тега body. Здравая логика начинает искать ответ: для каких типов страниц необходимо использовать WebPage? Но если заглянуть в шизофренический стандарт Schema.org, то обнаружим, что WebPage надо применять лишь тогда когда мы не можем явно описать блоки на странице и при этом хотим описать другие элементы. Например, такие как хлебные крошки (breadcrumb). Ух бл…!!! А если мы на странице можем явно описать блоки, но хотим так же указать и хлебные крошки??? Да уж! И что разработчики Schema.org имели ввиду под фразой «явно описать»? Остаётся загадкой.

Ещё одним исключением из здравого смысла является сущность «MedicalWebPage» предназначенная для страниц с медицинской информацией. Судя по всему, для остальных страниц, которые не являются медицинскими и в которых можно явно описать блоки, тип страницы (в том числе WebPage) указывать не обязательно. Интересно, почему это медицинскую тематику выделили отдельной сущностью для целой страницы? Не связано ли это с монополией транснациональных корпораций в области фармацевтики? Больше чем уверен, что именно с этим и связано. Ведь фармацевтический бизнес – один из самых прибыльных в мире. Ведь ещё пытается вымирающая глобальная мафия знать всё о Вашем здоровье. Неудивительно, почему так называемая «поисковая система Google» терпит крах и всё больше и больше людей во всём мире переходят на русское программное обеспечение. Да, ну их. Достали. Всё равно русские победят!!! А точнее, уже победили.

Если заглянуть в описание микроразметки Schema.org на сайте Яндекса https://yandex.ru/support/webmaster/schema-org, то можно обнаружить попытку структурировать калейдоскопическую логику этого недоразумения. И частично специалистам Яндекса это удалось. Так же валидатор микроразметки Яндекса не признаёт ошибками то, что признаёт валидатор разметки гугла. Приятнее читать спецификацию схемы  Schema.org на сайте Яндекса. Но в целом всё равно многие моменты вызывают путаницу. Надеюсь, что Яндекс всё таки создаст свой стандарт микроразметки, которая облегчит Человекам представление и поиск информации в сети Интернет.

Итак, перейдём к делу.

Алгоритм внедрения микроразметки на сайт

Ещё раз повторюсь, что основное правило внедрения микроразметки на сайт гласит:

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

Алгоритм внедрения микроразметки следующий:

  1. Чётко определяем какие информационные блоки на страницах сайта хотим разметить для сниппетов.
  2. Находим файлы шаблонов соответствующих страниц.
  3. В этих файлах находим блоки с соответствующей информацией.
  4. Для родительского тега задаём атрибут itemscope и за ним сразу атрибут itemtype. В качестве значения атрибута itemtype указываем соответствующий тип сущности.
  5. Для дочернего тега, т.е. для тега, в котором непосредственно находится наша информация, указываем атрибут itemprop с соответствующим значением свойства разметки. Либо же добавляем мета тег <meta> с атрибутом itemprop с соответствующим значением свойства разметки.

Вот такая вот короткая инструкция по внедрению микроразметки Schema.org на сайт. Надеюсь получилась понятной.

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

Примеры кода с микроразметктой для наиболее часто встречающихся типов данных

В данном разделе приведены HTML-конструкции с внедрённой микроразметкой наиболее популярных блоков. Все коды ниже протестированы в валидаторах Яндекса и Google. По состоянию на 07.06.2020 года ошибки и предупреждения отсутствовали за исключением блоков для товаров.

При создании микроразметки сайта нельзя использовать скрытые блоки display:none. Если Вы хотите указать данные, которые не должен видеть пользователь, -  используйте тег <meta>.

Микроразметка шапки страницы

<header itemscope itemtype="https://schema.org/WPHeader">
    <meta itemprop="headline" content="Сайт Общественной организации Русь">
    <meta itemprop="description" content="На сайте представлена информация о славянских Богах">
    <meta itemprop="keywords" content="Сайт Русь, Славянские Боги, официальный славянский сайт">
    <h1 id="site-title" itemprop="name">
        <a href="http://vpkrus.ru/" rel="home" title="">Общественная Оранизация Русь</a>
    </h1>
    <p class="site-description" itemprop="description">Краткое описание сайта</p>
    <span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
        <a href="http://vpkrus.ru/" title="" rel="home">
            <img itemprop="url image" src="/logo.png" alt="Мой сайт">
        </a>
        <meta itemprop="width" content="150">
        <meta itemprop="height" content="150">
    </span>
</header>

Микроразметка навигации (меню)

<nav role="navigation" itemscope itemtype="https://www.schema.org/SiteNavigationElement">
    <ul>
        <li><a itemprop="url" href="/page-1">Блог</a></li>
        <li><a itemprop="url" href="/page-2">Об авторе</a></li>
        <li><a itemprop="url" href="/page-3">Контакты</a></li>
    </ul>
</nav>

Микроразметка хлебных крошек

<ul itemscope itemtype="http://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="/">
	    <span itemprop="name">Главная</span>
	</a>
	<meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="/razdel-1.html" >
	    <span itemprop="name">Раздел-1</span>
	</a>
	<meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <span><span itemprop="name">Посадочная страница</span></span>
	<meta itemprop="position" content="3" />
    </li>
</ul>

Микроразметка сайдбара страницы

<aside itemscope itemtype="http://schema.org/WPSideBar">
    <section class="block-1">
        <h2 itemprop="headline" class="title">Популярные новости</h2>
            <!-- код соответствующего блока -->
    </section>
    <section class="last-news">
        <h2 itemprop="headline" class="title">Последние новости</h2>
            <!-- код соответствующего блока -->
    </section>
</aside>

Микроразметка виджета группы в социальной сети (экспериментально)

<aside itemscope itemtype="http://schema.org/WPSideBar">
    <section class="social-block">
        <h2 itemprop="headline" class="title">Виджет группы ВКонтакте</h2>
        <!-- VK Widget -->
        <div id="vk_groups_foot"><meta itemprop="isBasedOnUrl" content="https://vk.com/zdravnarod"></div>
        <script type="text/javascript">
            VK.Widgets.Group("vk_groups_foot", {mode: 0, width: "245"}, 171076998);
        </script>
    </section>
</aside>

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

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

Микроразметка подвала страницы 

<footer itemscope itemtype="http://schema.org/WPFooter">
    <div>google.com<span itemprop="copyrightYear">2022</span>. Все права принадлежат русскому Народу!</div>
    <meta itemprop="copyrightHolder" content="Держатель копирайта">
</footer>

Микроразметка данных о компании (организации)

Вариант 1

<div itemscope itemtype="http://schema.org/Organization">
    <h2 itemprop="name">ООО Русь</h2>
    <link itemprop="url" href="https://example.com/">
    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        <span itemprop="postalCode">320000</span>
        <span itemprop="addressCountry">Россия</span>
        <span itemprop="addressRegion">Московская область</span>
        <span itemprop="addressLocality">Коломна</span>
        <span itemprop="streetAddress">Улица товарища Сталина</span>
    </div>
    <a itemprop="telephone" href="tel:+79653334455">+7 965 333 44 55</a>
    <a itemprop="email" href="/">slavjanin_Sobaka_mail.ru</a>
    <!-- Ссылки на социальные сети или сайт автора -->
    <ul>
        <li><a itemprop="sameAs" href="#" target="_blank" rel="external">ВКонтакте</a></li>
        <li><a itemprop="sameAs" href="#" target="_blank" rel="external">Одноклассники</a></li>
        <li><a itemprop="sameAs" href="#" target="_blank" rel="external">Инстаграмм</a></li>
        <li><a itemprop="sameAs" href="#" target="_blank" rel="external">Google+</a></li>
    </ul>
    <div class="logo" itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
        <a rel="home" href="https://example.com"  itemprop="url">
            <img itemprop="url image" src="/logo.png" alt="">
        </a>
        <meta itemprop="width" content="519">
        <meta itemprop="height" content="229">
    </div>
</div>

Вариант 2

<div itemscope itemtype="http://schema.org/LocalBusiness">
    <span itemprop="name">ООО «Сварог»</span>
    <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        <meta itemprop="streetAddress" content="ул. Великого Путина">
        <meta itemprop="postalCode" content="10000">
        <meta itemprop="addressLocality" content="Киев">
    </span>
    <span itemprop="telephone">8 (800) 555–85–89</span>
    <span itemprop="email">info_Sobaka_putin.ru</span>
    <time itemprop="openingHours" datetime="Mo-Fr, 9:00−18:00">Пн-Пт, 9:00 – 18:00</time>
    <img itemprop="image" src="https://example.com/thumbnail.jpg" alt="">
    <span itemprop="priceRange">100000000 руб.</span>
</div>

Во втором варианте priceRange – диапазон цен бизнеса.

Данные виды разметки можно применить на любых типах страниц, где указывается информация о компании, либо же просто какие либо контакты. К таким страницам можно отнести: «О компании», «Контакты» и др. Также данный блок может быть расположен либо в шапке, либо в подвале сайта, либо в другом месте страницы.

Микроразметка изображения на странице

<div itemscope itemtype="https://schema.org/ImageObject">
    <img itemprop="contentUrl" src="https://example.com/thumbnail.jpg" alt="">
    <meta itemprop="width" content="150">
    <meta itemprop="height" content="120">
</div>

Смотрите также как в блоке для организации размечено изображение.

Микроразметка блока с рекламой 

<div itemscope itemtype="https://schema.org/WPAdBlock">
    <h3 itemprop="name">Реклама</h3>
    <a rel="external" itemprop="url" href="/target-1.html">
        <img itemprop="image" src="/ad-1.png" alt="">
    </a>
    <a itemprop="url" rel="external" href="/target-2.html">
        <img itemprop="image" src="/ad-2.png" alt="">
    </a>
</div> 

Микроразметка рейтинга

<div itemscope itemtype="http://schema.org/AggregateRating">
    <meta itemprop="bestRating" content="5"/>
    <meta itemprop="ratingValue" content="4"/>
    <div itemprop="itemReviewed" itemscope itemtype="https://schema.org/Organization">
        <meta itemprop="name" content="Название компании"/>
        <meta itemprop="address" content="г. Минск"/>
        <meta itemprop="telephone" content="+375 (29) 134-14-91" />
    </div>
    <span itemprop="ratingCount">7</span><span>оценок</span>
</div>

Микроразметка отзывов

<div itemscope itemtype="http://schema.org/Review">
    <a itemprop="url" href="/ссылка-на-отзыв">№22</a>
    <span itemprop="name">Супер организация!</span> от <span itemprop="author">Алексей Гуляев</span>
    <time itemprop="datePublished" datetime="2005-08-09T18:31:42">24 июня 2020</time>
    <div itemprop="itemReviewed" itemscope itemtype="https://schema.org/Organization">
        <div itemprop="name">название-компании</div>
        <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
            <img itemprop="contentUrl" src="/ссылка_на_логотип_" alt="Logo">
        </div>
        <link itemprop="url" href="/ссылка-на-сайт">
        <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
            <span itemprop="postalCode">почтовый-индекс</span>,
            <span itemprop="addressCountry">Россия</span>,
            <span itemprop="addressRegion">Область</span>,
            <span itemprop="addressLocality">Город</span>,
            <span itemprop="streetAddress">улица, номер-дома</span>
        </div>
        <div>Телефон: <a itemprop="telephone" href="tel:+79999999999">+7 (111) 111-11-11</a></div>
        <div>Почта: <a itemprop="email" href="mailto:email_Sobaka_email.ru">svarog_Sobaka_mail.ru</a></div>
    </div>
    <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
        <meta itemprop="worstRating" content="0">
        <span itemprop="ratingValue">9</span>
        <span itemprop="bestRating">10</span>
    </div>
    <span itemprop="reviewBody">Очень хорошая организация! Пользовался их услугами, все ок!</span>
</div>

Микроразметка комментариев

<section>
    <div 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">А знаете ли Вы, что Билл Гейтс поддерживает умертвление части людей с помощью вакцинации</div>
    </div>
    <div 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">Да уж. Полностью с Вами согласен!</div>
    </div>
    <div 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">Здравствйте, Сварог. Да, мы понимаем, что такая сволочь как Билл Гейтс в любом случае ответит за свои злодеяния.</div>
    </div>
</section>

Микроразметка страницы блога (блога категорий)

Привожу два примера разметки для страницы блога категорий (анонсов).

Пример 1

<div itemscope="itemscope" itemtype="https://schema.org/Blog">
    <meta itemprop="description" content="Победа русских всегда заключалась в правде, в вере и в Боге! А также в том, что каждый русский человек осознаёт себя Богом творящим!">
    <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
        <h2 class="entry-title" itemprop="headline">
            <a href="#" itemprop="mainEntityOfPage" rel="bookmark">Название анонса записи 1</a>
        </h2>
        <span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
            <img itemprop="url contentUrl" src="#" alt="">
            <meta itemprop="width" content="350" >
            <meta itemprop="height" content="220">
        </span>
        <span class="entry-date">
            <time class="published" datetime="2022-07-16T16:39:44+00:00" itemprop="datePublished">22:22</time>
            <time class="updated" datetime="2022-02-22T16:39:44+00:00" itemprop="dateModified">22.02.2022</time>
        </span>
        <div class="entry-content" itemprop="description">
            <p>Текст, текст, текст, текст ...</p>
        </div>
        <span itemprop="author">Сварог</span>
        <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
            <meta itemprop="name" content="название_сайта">
            <meta itemprop="address" content="Москва">
            <div class="logo" itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
                <a rel="home" href="https://example.com" itemprop="url">
                    <img itemprop="image" src="/logo.png" alt="">
                </a>
            </div>
            <a itemprop="telephone" href="tel:+79999999999">+7 (999) 999-99-99</a>                                                
        </div>
    </article>
    
    <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
        <h2 class="entry-title" itemprop="headline">
            <a rel="bookmark" itemprop="mainEntityOfPage" href="#">Название анонса записи 2</a>
        </h2>
        <span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
            <img itemprop="url contentUrl" src="#" alt="">
            <meta itemprop="width" content="350">
            <meta itemprop="height" content="220">
        </span>
        <!-- Сообщаем, что содержимое анонса относится к определенной странице, атрибутом mainEntityOfPage указываем ссылку на эту статью -->
        <span class="entry-date">
            <time datetime="2022-02-23T16:39:44+00:00" itemprop="datePublished">20:25</time>
            <time datetime="2022-02-23T16:39:44+00:00" itemprop="dateModified">23.02.2022</time>
        </span><!-- Дата публикации и обновления -->
        <div class="entry-content" itemprop="description">
            <p>Текст, текст, текст, текст ...</p>
        </div>
        <span itemprop="author">Русич</span>
        <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
            <meta itemprop="name" content="название_сайта">
            <meta itemprop="address" content="Москва">
            <div class="logo" itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
                <a rel="home" href="https://example.com" itemprop="url">
                    <img itemprop="image" src="/logo.png" alt="">
                </a>
            </div>
            <a itemprop="telephone" href="tel:+79999999999">+7 (999) 999-99-99</a>
        </div>
    </article>
</div>

Выше приведён пример с указанием данных организации для каждого анонса статьи. Это своего рода подпись статьи. Если же данные об организации не указывать, то гугл выдаёт ошибку. Яндекс нормально реагирует.

Пример 2

Второй пример без указания адреса организации.

<div itemscope="itemscope" itemtype="https://schema.org/Blog">
    <meta itemprop="description" content="Победа русских всегда заключалась в правде, в вере и в Боге! А также в том, что каждый русский человек осознаёт себя Богом творящим!">
    <article>
        <a href="#" rel="bookmark" title="">
            <span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
                <img alt="" itemprop="url contentUrl" src="#">
            </span>
        </a>
        <h2 itemprop="headline">
            <a itemprop="mainEntityOfPage" href="#" rel="bookmark">Название анонса записи</a>
        </h2>
        <div class="entry-content" itemprop="description">
            <p>Текст, текст, текст, текст ...</p>
        </div>
        <span class="entry-date">
            <time class="published" datetime="2018-07-16T16:39:44+00:00" itemprop="datePublished">Время</time>
            <time class="updated" datetime="2018-07-16T16:39:44+00:00" itemprop="dateModified">16.07.2018</time>
        </span>
    </article>
    
    <article>
        <a href="#" rel="bookmark" title="">
            <span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
                <img alt="" itemprop="url contentUrl" src="#">
            </span>
        </a>
        <h2 itemprop="headline">
            <a itemprop="mainEntityOfPage" href="#" rel="bookmark">Название анонса записи</a>
        </h2>
        <div class="entry-content" itemprop="description">
            <p>Текст, текст, текст, текст ...</p>
        </div>
        <span class="entry-date">
            <time class="published" datetime="2018-07-16T16:39:44+00:00" itemprop="datePublished">Время</time>
            <time class="updated" datetime="2018-07-16T16:39:44+00:00" itemprop="dateModified">16.07.2018</time>
        </span>
    </article>
</div>

Микроразметка статьи блога

<article itemscope itemtype="http://schema.org/Article">
    <h1 itemprop="headline">название-статьи</h1>
    <img itemprop="image" src="/ссылка_на_изображение_статьи" />
    <div itemprop="articleBody">
        Полный текст статьи!
    </div>
    <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
        <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
            <img itemprop="url image" src="/ссылка_на_логотип"/>
        </div>
        <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
            <span itemprop="postalCode">почтовый_индекс</span>,
            <span itemprop="addressCountry">Россия</span>,
            <span itemprop="addressRegion">Область</span>,
            <span itemprop="addressLocality">Город</span>,
            <span itemprop="streetAddress">улица, номер-дома</span>
        </div>
        <div>Телефон: <a itemprop="telephone" href="tel:+79999999999">+7 (999) 999-99-99</a></div>
            <meta itemprop="name" content="название-сайта">
        </div>
        <meta itemprop="dateModified" content="2019-04-22T11:48:26+00:00">
        <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="ссылка-на-статью"/>
        <p>Автор: <span itemprop="author">Автор статьи</span></p>
        <span>Дата: <time itemprop="datePublished">2019-04-22T11:48:26+00:00</time></span>
</article>

И снова нам надо указывать адресную информацию. А если у нас обычный блог без адреса и номера телефона? Мы же помним, что они хотят знать о Вас всё. Кстати, Яндекс в отличие от гугля не требует адресов. Часть атрибутов является необязательными, поэтому можете смело их убирать.

Микроразметка списка товаров (товаров категории)

Для обозначения списка товаров используют такие типы как ListItem или AggregateOffer. Надо быть осторожным с AggregateOffer, так как этот тип предназначен для агрегаторов, где можно сравнивать цены на один и тот же товар у разных продавцов. Кто то утверждает, что во всех других случаях поисковики могут посчитать внедрение микроразметки спамом. Так ли это? Неизвестно.

<div itemscope itemtype="http://schema.org/ItemList">
    <link itemprop="url" href="https://multivarki.ru/?filters%5Bprice%5D%5BLTE%5D=39600" />
    <span itemprop="numberOfItems">20</span>
    <div itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">
        <img itemprop="image" src="https://multivarki.ru/c9/f1/kartinka.jpg" alt="Photo of product" />
        <a itemprop="url" href="https://multivarki.ru/brand_502/">
            <span itemprop="name">Бренд 1</span>
        </a>
        <div itemprop="description">Краткое описание товара</div>
        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <span itemprop="price">4399</span><span>руб.</span>
            <meta itemprop="priceCurrency" content="RUB">
        </div>
    </div>
    <div itemprop="itemListElement" itemtype="http://schema.org/Product">
        ...
    </div>
</div>

numberOfItems – количество элементов в списке.

Гугл для этого блока в любом случае выдаёт ошибку связанную со свойством position сущности Product. Если position не указывать, валидатор говорит, что для Product обязательно надо свойство position. А если указать position, то валидатор говорит, что свойство position нельзя указывать для Product. Уже не удивляюсь. Одним словом – «пиндосы…».

Яндекс данный код пропускает нормально без ошибок.

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

Микроразметка страницы товара

<div itemscope itemtype="http://schema.org/Product">
    <h1 itemprop="name">Наименование-товара</h1>
    <a itemprop="url" href="/tovar-1.html"><img src="/izobrazhenie.jpg" itemprop="image" /></a>
    <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
        <span itemprop="ratingValue">4</span>
        <span itemprop="reviewCount">9</span><!-- рейтинг 4 основан на 9 оценках -->
    </div>
    <div itemprop="description">Описание-товара</div>
    <div>Производитель: <span itemprop="brand">название-бренда</span></div>
    <div>Модель: <span itemprop="model">номер-модели</span></div>
    <div>Остаток на складе: <span itemprop="sku">4</span></div>
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <span itemprop="priceCurrency" content="RUB">руб.</span>
        <span itemprop="price">699</span>
        <span><link itemprop="availability" href="http://schema.org/InStock"/>В наличии</span>
        <meta itemprop="priceValidUntil" content="2013-09-14T21:30">
        <a itemprop="url" href="/tovar-1.html">Что то здесь должно быть</a>
    </div>
</div>

Валидатор гугла позволяет предварительно посмотреть как будет выглядеть сниппет такого кода (изображение ниже):

Сниппет рейтинга в поисковике
Рис. 6. Сниппет рейтинга в поисковой системе google

В данном примере валидатор Google выдаст несколько предупреждений, одно из них связанное с отсутствием отзыва. А отзывы валидаторы на данный момент поддерживают только о компаниях и автомобилях.

Дополнительный нюанс по микроразметке

Заметил, что некоторые ошибки в валидаторе яндекса пропадают, если в родительский тег вставить следующую строчку:

itemscope itemtype="http://webmaster.yandex.ru/vocabularies/term-def.xml"

Выводы по микроразметке так называемого «стандарта Schema.org»

Уважаемые друзья! Впервые размечать сайты мне пришлось лет 7 назад. С тех пор периодически внедрял микроразметку на различные сайты, и каждый раз не давало спокойствие чувство внутренней неудовлетворённости от отсутствия полного понимания микроразметки. 7 дней назад решил окончательно с этим вопросом разобраться. Перелопатил почти пол сотни сайтов, вдоль и поперёк изучил так называемый «стандарт Schema.org», изучил инструкции от Яндекса. Параллельно внедрял микроразметку на свой блог, и писал эту статью. Последних 4 дня полностью с утра до вечера только и делал, что изучал это недоразумение под названием «микроразметка Schema.org». И наконец, то я спокоен. Спокоен не от того, что понял стандарт Schema.org. Спокоен от того, что понял, что стандарт писался людьми либо недалёкого ума, либо же целенаправленными вредителями.

Так называемый стандарт «микроразметки Schema.org» является недоработанным, имеет множество ошибок и противоречий. В нём полностью отсутствует здравая логика изложения материала и построения схем. Я не говорю уже о том, что нет никакой официальной статистики положительного влияния микроразметки сайта на формирования сниппетов и улучшения SEO-показателей сайтов.

Не старайтесь понять этот стандарт, - только зря потратите время. В любом случае при внедрении микроразметки на сайт Вам придётся руководствоваться методом перебора и подстановок сущностей и свойств с периодической проверкой в валидаторах. Основные правила всё таки стоит выучить. А они простые: как задаются сущности и как расставляются свойства.

Считаю, что создание такого стандарта и его объявление, является целенаправленным вредительством тормозящим развитие информационных технологий на Руси. Его автора и заказчики должны быть привлечены к ответственности. В интернете на тему микроразметки написано сотни статей. По почерку авторов видно, что люди искренне стремились понять это, потратили большую уйму времени. В итоге все статьи противоречат друг другу, коды блоков с микроразметкой выдают ошибки в валидаторах (даже коды с официального сайта стандарта выдают ошибки). Поэтому перед принятием решения о его внедрении на сайт, хорошенько задумайтесь, нужна ли эта разметка Вам? А если уж и решите внедрять, то разметьте наиболее важные для Вас блоки и оставьте некоторые ошибки и предупреждения в валидаторах на совесть разработчиков и заказчиков этой микроразметки.

Не знаю как Вам, но лично мне приятно наблюдать сейчас картину в мире IT-индустрии. Большие положительные изменения происходят. В то время как на улицах городов Америки и Европы идут массовые безпорядки, мы видим, как все крупные IT-компании переходят в собственность и под полное управление русских специалистов. Ещё немного и мир будет другим: справедливым и гармоничным.

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

Ссылка на страницу со всеми вышеприведёнными блоками кода (для проверки в валидаторе): https://svarog-web.com/download/blog/SEO/demo-mikrorazmetka-schema-org/.

Ссылка на файл исходник со всеми блоками кода этой статьи: скачать.

С уважением, Анатолий Черкес.

P.S.

Рекомендую посмотреть Советский фильм 1933 года выпуска - «Частный случай». Фильм о борьбе со шпионами-вредителями, пробравшимися в среду советских учёных. Ниже один из эпизодов этого фильма.

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


ОБРАТНЫЙ ЗВОНОК
Заполните форму и наш менеджер Вам перезвонит