Микроразметка Schema.org: полное руководство

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

Разница межу сайтами с микроразметкой и без

Сайты с реализованной разметкой Schema org визуально различаются в поисковой выдаче Яндекса, Гугла. Причем один и тот же проект может отображаться по-разному.

(Первый сниппет – с разметкой, второй – без).

(Сниппет страницы с афишей фильмов при наличии микроразметки).

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

(В первом сниппете реализована разметка хлебных крошек, во втором – нет).

Мнение поисковых систем

Единый стандарт Schema org возник в 2011 г. Инициаторами выступили Microsoft, Google и Yahoo. Позднее разработанная схема для улучшения качества поисковой выдачи была поддержана компанией «Яндекс». Спустя 10 лет, в 2021 г., технологию стали применять свыше 10 млн сайтов различной направленности, причем не только для обработки веб-страниц, но и сообщений электронной почты.

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

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

Список самых важных типов микроразметки

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

Микроразметка VideoObject

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

Роль в SEO

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

Пример разметки VideoObject:

<div itemscope itemtype="http://schema.org/VideoObject">
<a itemprop="url" href="https://www.mysite.com/view/306/">
<h1 itemprop="name">Что такое Schema.org</h1>
</a>
<p itemprop="description">
Schema.org - это стандарт семантической разметки данных в сети, объявленный поисковыми системами Google, Bing и Yahoo! летом 2011 года. Цель семантической разметки — сделать интернет более понятным, структурированным и облегчить поисковым системам и специальным программам извлечение и обработку информации для удобного её представления в результатах поиска.</p>
 <meta itemprop="duration" content="PT6M58S">
 <meta itemprop="isFamilyFriendly" content="true">
 <p>
Дата загрузки:<span itemprop="uploadDate">
2013-06-05T00:00:00</span>
</p>
 <span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
<img itemprop="contentUrl" src="https://www.mysite.com/images/preview/img1.jpg">
 <meta itemprop="width" content="250">
 <meta itemprop="height" content="120">
 </span>
</div>

Разметка PERSON

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

Роль в SEO

Микроразметка Person способствует определению поисковыми алгоритмами человека как сущности. Посредством дополнительных опций (например, Organization) система может установить отношения между разными объектами (Физ. лицо – Организация). При помощи Person создаются блоки знаний в Knowledge Graph с детальными сведениями о конкретной личности.

Микроразметка такого типа считается простым и эффективным методом сообщить в Гугл и Яндекс информацию о «компетентности» и «авторитетности» авторов публикации, влияя на уровень Google E-A-T (совокупность показателей, определяющих качество контента в Google).

Примеры PERSON:

    <div itemscope itemtype="http://schema.org/Person">
 <span itemprop="name">George Bush</span>, the <span itemprop="disambiguatingDescription">
41st President of the United States</span>
 is the father of <div itemprop="children" itemscope itemtype="http://schema.org/Person">
 <span itemprop="name">George W. Bush</span>, the <span itemprop="disambiguatingDescription">
43rd President of the United States</span>
. </div>
</div>

Для повышения уровня E-A-T сайта рекомендуется добавить и следующие свойства:

• alumniOf (учебное заведение, которое окончил человек);
• hasCredential (ученая степень);
• award (полученные награды);
• honorificSuffix (почетное звание, стоящее после имени, например, «кандидат наук»);
• honorificPrefix (обращение, которое прописывается перед именем, например, «профессор»).

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

Микроразметка LocalBusiness/Organization

LocalBusiness (или Organization) выступает важным типом разметки для любого бизнес-проекта, помогая сообщить ПС сведения об организации. Добавление схемы структурированных данных стандартно осуществляется на главную страницу, в раздел «О компании» либо «Контактная информация».

Значение в SEO

Микроразметка LocalBusiness/Organization считается следующим этапом создания сущностей на ресурсе. Если указать детальную информацию о бренде либо компании, возможно вознаграждение от Google в виде блока Knowledge Graph. 

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

Кроме выгодных позиций в результатах поиска Яндекса и Google, структурированная разметка значительно повышает и уровень E-A-T.

Образец оформления Organization:

    <div itemscope itemtype="http://schema.org/Organization">
 <span itemprop="name">ООО Медведица</span>
 Адрес и телефон: <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
 <span itemprop="streetAddress">5-ая Парковая, 52</span>
 <span itemprop="postalCode">105264</span>
 <span itemprop="addressLocality">Москва, Россия</span>
 </div>
Телефон:<span itemprop="telephone">+7 (495) 223 45 45</span>, E-mail: <span itemprop="email">pochta@medvedica.org</span>
</div>

Аналогичная структура характерна и для микроразметки LocalBusiness, за исключением свойства @type. Дополнительно предусматривается возможность прописать сферу деятельности. Например, бар, пекарня и т. д. 

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

• geoCoordinates (геолокация);
• reviewRating (рейтинг заведения);
• priceRange (диапазон цен, например, $$$);
• menu (ссылка на меню);
• servesCuisine (кухня);
• openingHoursSpecification (рабочие часы);
• acceptsReservations (предусматривается ли бронирование столика).

Чтобы добавить микроразметку на сайт, можно воспользоваться генератором Merkle, который предлагает как вариант LocalBusiness, так и Organization. Также для оформления структурированных данных подойдет рассмотренный код, в котором достаточно заменить нужные значения.

Микроразметка Breadcrumbs («хлебные крошки»)

«Хлебные крошки» помогают посетителям ориентироваться на ресурсе и просматривать иерархию страниц. Микроразметка Breadcrumbs предназначена для передачи таких свойств сниппету.

Роль в SEO

Поисковые системы Яндекс и Гугл хорошо воспринимают иерархию страниц и отображают хлебные крошки, разбивая URL. Однако без микроразметки Breadcrumbs цепочки зачастую бывают неудобными для аудитории. 

(Результаты по аналогичному запросу: второй – с использованием разметки, первый – без).

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

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

    <ul itemscope itemtype="https://schema.org/BreadcrumbList">
 <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
 <a href="/" title="Главная" itemprop="item">
 <span itemprop="name">Главная</span>
 <meta itemprop="position" content="0">
 </a>
</li>
 <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
 <a href="/razdel/" title="Раздел" itemprop="item">
 <span itemprop="name">Раздел</span>
 <meta itemprop="position" content="1">
 </a>
</li>
 <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
 <a href="/razdel/podrazdel/" title="Подраздел" itemprop="item">
 <span itemprop="name">Подраздел</span>
 <meta itemprop="position" content="2">
 </a>
 </li>
</ul>

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

Разметка Product

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

Польза для SEO

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

Дополнительно разметка Product дает право получить значок продукта в картинках Google, что способствует привлечению внимания целевой аудитории к товарам.

Пример оформления:

    <ul itemscope itemtype="https://schema.org/BreadcrumbList">
 <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
 <a href="/" title="Главная" itemprop="item">
 <span itemprop="name">Главная</span>
 <meta itemprop="position" content="0">
 </a>
</li>
 <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
 <a href="/razdel/" title="Раздел" itemprop="item">
 <span itemprop="name">Раздел</span>
 <meta itemprop="position" content="1">
 </a>
</li>
 <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
 <a href="/razdel/podrazdel/" title="Подраздел" itemprop="item">
 <span itemprop="name">Подраздел</span>
 <meta itemprop="position" content="2">
 </a>
 </li>
</ul>

При внесении изменений в описание продукта это отражается и в микроразметке структурированных данных.

Микроразметка Article

Article – тип микроразметки, которая добавляется в записи и статьи в блогах. 

Виды:

• Article (это общий тип, который применятся для текстов, не попадающих в конкретные рубрики);
• BlogPosting (пост в блоге);
• NewsArticle (публикация с определенными новостями);
• ScholarlyArticle (научный контент);
• Report (отчет государственного либо частного предприятия);
• TechArticle (статья с техническим уклоном, например, инструкция).

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

Эффективность для SEO

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

Пример микроразметки Article (на основе BlogPosting):

    <div itemscope itemtype="https://schema.org/Article">
 <link itemprop="mainEntityOfPage" href="https://example.ru/"/>
 <link itemprop="image" href="image">
 <meta itemprop="headline name" content="Название Статьи">
 <meta itemprop="description" content="Обязательное краткое описание статьи для Яндекса длиной от 50 до 150 символов.">
 <meta itemprop="author" content="автор статьи">
 <meta itemprop="datePublished" datetime="2010-07-03" content="2010-07-03">
 <meta itemprop="dateModified" datetime="2018-09-15" content="2018-09-15">
 <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
 <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
 <img itemprop="url image" src="images/logo.png" alt="Описание картинки" title="Описание картинки" style="display:none;"/>
 </div>
 <meta itemprop="name" content="название сайта">
 <meta itemprop="telephone" content="">
 <meta itemprop="address" content="Россия">
 </div>
 <p>
Интро</p>
 <span itemprop="articleBody">
Контент</span>
</div>

В схему можно включать и дополнительные свойства, повышающие уровень E-A-T. Например, Citation для добавления перечня авторитетных источников, на которые автор ссылается в публикации.

Микроразметка FAQPAGE

Микроразметка FAQPage применяется для страниц, содержащих перечень часто задаваемых вопросов, а также ответов на них.

Польза для SEO

Микроразметка FAQPage обеспечивает извлечение вопросов и ответов со страницы и объединение их в сниппет в выдаче. В результате пользователи смогут узнать нужную информацию прямо с поиска.

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

Пример микроразметки FAQ:

    <div itemscope itemtype="http://schema.org/FAQPage">
 <div itemprop="mainEntity" itemscope itemtype="http://schema.org/Question">
 <div itemprop="name">Это вопрос</div>
 <div itemscope itemprop="acceptedAnswer" itemtype="http://schema.org/Answer">
 <div itemprop="text">Здесь размещается ответ на указанный вопрос</div>
 </div>
 </div>
 <div itemprop="mainEntity" itemscope itemtype="http://schema.org/Question">
 <div itemprop="name">Это вопрос</div>
 <div itemscope itemprop="acceptedAnswer" itemtype="http://schema.org/Answer">
 <div itemprop="text">Здесь размещается ответ на указанный вопрос</div>
 </div>
 </div>
</div>

Согласно рекомендациям Google, в микроразметку FAQPAGE полностью включается текст как вопроса, так и ответа, т. е. количество символов не ограничивается. Однако часто алгоритмы ПС показывают только отрывок, и пользователям приходится нажимать на кнопку «Еще».

Микроразметка HOWTO

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

Значение для SEO

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

(Текстовый сниппет).

(Сниппет с пошаговыми фото).

Сниппеты, отображающие практические советы, повышают трафик сайта.

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

    <div itemscope itemtype="http://schema.org/HowTo">
 <span itemprop="name">Заголовок статьи</span>
 <span itemprop="description">Краткое описание статьи (необязательно)</span>
</div>
<div>
 Примерно <span itemprop="totalTime" content="PT30M">30 минут</span>
</div>
 <!-- Далее — пример разметки одного шага из инструкции -->
<div itemprop="step" itemscope itemtype="http://schema.org/HowToSection">
 <div itemprop="name">Заголовок первого шага</div>
 <meta itemprop="position" content="1"/>
 <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">
 <meta itemprop="position" content="1"/>
 <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">
 <meta itemprop="position" content="1"/>
 <div itemprop="text">Здесь — содержимое первого шага, которое дает пользователю больше подробной информации.</div>
 </div>

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

Разметка Recipe

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

Роль в SEO

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

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

Пример микроразметки Recipe:

    <div itemscope itemtype="http://schema.org/Recipe"/>
<h1 itemprop="name">название_рецепта</h1>
<div itemprop="description">описание_рецепта</div>
<div>
Теги: <span itemprop="keywords">ключевые, слова, для, рецепта</span>
</div>
<img itemprop="image" src="ссылка_на_изображение_готового_блюда"/>
<ul>
 <li>Автор рецепта: <span itemprop="author">Автор</span></li>
 <li>После приготовления вы получите <span itemprop="recipeYield">4 порции</span></li>
 <li>Время приготовления: <meta itemprop="totalTime" content="PT45M"/>45 минут</li>
</ul>
<h2>ингредиенты</h2>
<ul>
 <li itemprop="recipeIngredient">1 курица</li>
 <li itemprop="recipeIngredient">5 л пива</li>
 <li itemprop="recipeIngredient">соль</li>
 <li itemprop="recipeIngredient">перец</li>
 <li itemprop="recipeIngredient">специи по вкусу</li>
</ul>
<h2>способ_приготовления</h2>
<ul itemprop="recipeInstructions" itemtype="https://schema.org/ItemList" itemscope>
 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"/>
 <img itemprop="image" src="ссылка_на_изображение_ингредиента"/>
 Курицу нарезать на кусочки, выложить в форму для запекания, посолить, поперчить, добавить специи по вкусу. </li>
 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"/>
 <img itemprop="image" src="ссылка_на_изображение_ингредиента"/>
 Курицу залить пивом, поставить в духовку. </li>
 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"/>
 <img itemprop="image" src="ссылка_на_изображение_ингредиента"/>
 Жарить при температуре 180 градусов в течение 40—45 минут. </li>
</ul>
<span itemprop="recipeCategory">Блюда из курицы</span>
<div itemprop="nutrition" itemtype="http://schema.org/NutritionInformation"/>Пищевая ценность:
<ul>
 <li>Калории: <itemprop="calories">120 ккал.</span>,</li>
 <li>Жиры: <span itemprop="fatContent">7 г.</span></li>
 <li>Углеводы: <itemprop="carbohydrateContent">1 г.</span>
</li>
</ul>
 </div>
Приятного аппетита!</div>

Распространенные ошибки микроразметки 

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

• 1. Обязательно проверять разметку. Даже единственный символ, который пропущен в коде JSON-LD, оказывает значительное влияние на структурирование данных. Для проверки кода можно использовать сервисы, расположенные по адресу: search.google.com/test/rich-results, validator.schema.org.
• 2. Не добавлять разметку к контенту, которого нет на сайте. Несмотря на то, что JSON-LD подходит для любой страницы, информация в коде должна соответствовать публикации. Если поисковые алгоритмы обнаружат неправильное применение разметки, последует предупреждение, а при его игнорировании ситуация может привести к снижению позиций ресурса в выдаче.
• 3. Не делать разметку для определенной страницы по всему сайту. В качестве примера можно привести код Rating, предназначенный для одного элемента, но распространяющегося полностью на рубрику.

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

https://developers.google.com/search/docs/advanced/structured-data/sd-policies

Отслеживание технического состояния и эффективности микроразметки 

Для проверки правильного структурирования данных необходимо перейти в раздел Enhancements (расположен в Google Search Console) и просмотреть состояние различных типов разметки на страницах сайта. При наличии недочетов показываются сведения о них и инструкции по устранению ошибок.

Кроме контроля технического состояния разметки Schema org, Search Console подходит для мониторинга ее эффективности в поисковой выдаче, для чего достаточно выбрать Performance > Search results > Search Appearance и просмотреть сводку кликов и показов. В верхней части консоли можно дополнительно нажать на NEW и задействовать фильтр для показа расширенных результатов поиска.