В статье:
Информационная микроразметка, которая иногда также именуется семантической разметкой (Semantic Markup), не является фактором ранжирования ни в Google, ни в Яндексе. Добавление ее на сайт не поможет вам продвинуть страницы в топ. Но внедрить семантическую разметку все равно стоит.
Зачем нужна микроразметка
Реализация микроразметки предполагает использование дополнительных тегов и атрибутов для четкого структурирования информации. Она указывает поисковым роботам на то, о чем написано на странице и отвечает за формирование красивого кликабельного сниппета в выдаче. К примеру, так можно структурировать контактную информацию организации, данные о товарах в ассортименте интернет-магазина, рецепты на сайте, обзоры и другие виды контента.
Поисковики в долгу не останутся. Структурированная разметка поможет сайту выделиться на странице результатов поисковой системы (SERP), а это может привести к повышению показателя кликабельности — CTR. Когда пользователь увидит выделяющийся сниппет с рейтингом, картинками, ценой и другими дополнительными элементами, скорее всего он кликнет на него.

Как составить разметку Schema.Org
Это один из самых распространенных и дружественных к новичкам стандартов. Дружественность выражается хотя бы в наличии широкого перечня уже готовых схем практически на все случаи жизни: от страниц мероприятий до разметки товаров и обзорников. Выбрать наиболее подходящую схему можно из коллекции на schema.org.
Многие рекомендуют использовать в качестве синтаксиса не Microdata, а JSON-LD, потому что тот способ проще и короче. В каталоге schema.org есть примеры и для записи Microdata, и для JSON-LD.
Для внедрения Schema.org нужно два шага:
- Оборачиваем в контейнер описание и указываем схему разметки:
- Размечаем свойства:
<div itemscope="" itemtype="http://schema.org/Organization"> </div>
<span itemprop="streetAddress">Орджоникидзе, 57</span>
Код разметки для объекта состоит из тегов и трех атрибутов:
— itemscope дает боту сигнал, что на странице описан объект;
— itemtype указывает тип объекта из официальной коллекции разметки;
— itemprop содержит описание объекта.
Чаще всего используют разметку таких типов:
- организации — schema.org/Organization;
- товары — schema.org/Product;
- статьи — schema.org/Article;
- видео — schema.org/VideoObject;
- рецепты — schema.org/Recipe;
- фильмы — schema.org/Movie;
- музыка — schema.org/MusicAlbum;
- отзывы и рейтинг — schema.org/Review;
- личности и персонажи — schema.org/Person.
Составить микроразметку для конкретной страницы можно, использовав
Помощника в разметке от Google. Вставляете в сервис ссылку на страницу, выбираете тип схемы и отмечаете элементы, а сервис сам вставляет код в html.

Код можно составить и вручную. Разберем несколько самых популярных случаев применения.
Разметка для главной страницы
Логотип и название компании:
<div itemscope="" itemtype="http://schema.org/Organization"> <a itemprop="url" href="http://www.example.com/">Главная</a> <img itemprop="logo" src="http://www.example.com/logo.png"> </div>
С помощью разметки в сниппет можно вывести поиск по сайту:

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

Сделать сниппет еще привлекательнее помогут «Хлебные крошки» — путь от главной до искомой страницы. Можно настроить понятный пользователям путь с помощью «хлебных крошек». К разметке присмотрятся оба поисковика, но Яндекс использует свои алгоритмы для формирования крошек.

Как сделать разметку товара и «хлебных крошек», какая разметка нужна агрегаторам, а также можно ли разметить товарную категорию — в статье «Микроразметка для сайта интернет-магазина».
Структурирование контактной информации
Реальный пример применения микроразметки для структурирования контактных данных организации:
<div itemscope="" itemtype="http://schema.org/Organization"> <span itemprop="name">Название организации</span> Контакты: <div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress"> Адрес: <span itemprop="streetAddress">Мира, 100</span> <span itemprop="postalCode">101000</span> <span itemprop="addressLocality">Москва</span>, </div> Телефон:<span itemprop="telephone">+7 495 000–00–00</span>, Факс: <span itemprop="faxNumber">+7 495 000–00–00</span>, Электронная почта: <span itemprop="email">mail@pr-cy.ru</span> </div>
Разметка статьи
Для статьи в разметке часто указывают URL, автора, дату публикации, дату обновления, описание.
Пример заполнения разметки:
<div itemscope="" itemtype="http://schema.org/Article"> <span itemprop="name">Название статьи</span> <span itemprop="description">Описание</span> <span itemprop="author">Автор</span> <link itemprop="url" href="ссылка на страницу"> <meta itemprop="datePublished" content="Дата публикации"> <div itemprop="articleBody"> Основной текст статьи </div> </div>
В разметке могут быть и другие поля: к примеру, рейтинг статьи, комментарии.

Подробнее о разметке статей и других текстов в материалах:
Как настроить разметку Schema.Org для статей и других текстов
Как доказать Google, что контент пишут эксперты
Разметка рецептов
Для рецептов обычно размечают название, URL, калорийность блюда, время готовки. Можно добавить автора рецепта, количество порций.
Пример разметки:
<div itemscope="" itemtype="http://schema.org/Recipe"> <h1 itemprop="name">Курица в пиве с рисом</h1> Описание <img itemprop="resultPhoto" 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="ingredients"> Ингредиент блюда </li> <li itemprop="ingredients"> Ингредиент блюда </li> <li itemprop="ingredients"> Ингредиент блюда </li> </ul> <h2>Способ приготовления</h2> <ul itemprop="recipeInstructions"> <li><img itemprop="image" src="creks.jpg" alt="иллюстрация к шагу"> Описание шага. </li> <li><img itemprop="image" src="feks.jpg" alt="иллюстрация к шагу"> Описание шага. </li> </ul> <span itemprop="recipeCategory">Блюда из курицы</span> <div itemprop="nutrition" itemscope="" itemtype="http://schema.org/NutritionInformation"> Пищевая ценность: <ul> <li>Калории: <span itemprop="calories">927 ккал.</span>,</li> <li>Жиры: <span itemprop="fatContent">4 г.</span></li> <li>Белки: <span itemprop="proteinContent">4 г.</span></li> <li>Углеводы: <span itemprop="carbohydrateContent">28 г.</span></li> </ul> </div> Приятного аппетита! </div>
В сниппете может быть и другая информация, к примеру, можно добавить рейтинг блюда, а указание жиров и углеводов убрать.

Разметка для фильма
В такой разметке обычно указывают длительность. рейтинг, год выпуска, сборы, режиссера, главных звезд, могут добавить другие данные.
Пример разметки:
<div itemscope="" itemtype="http://schema.org/Movie"> <h1 itemprop="name">Название</h1> <span itemprop="description">Описание</span> Режиссер <div itemprop="director" itemscope="" itemtype="http://schema.org/Person"> <span itemprop="name">Имя режиссера</span> </div> Звезды: <div itemprop="actor" itemscope="" itemtype="http://schema.org/Person"> <span itemprop="name">Актер</span>, </div> <div itemprop="actor" itemscope="" itemtype="http://schema.org/Person"> <span itemprop="name">Актер</span>, </div> <div itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating"> <span itemprop="ratingValue">8</span>/<span itemprop="bestRating">10</span> stars from <span itemprop="ratingCount">200</span> users. Отзывы <span itemprop="reviewCount">50</span>. </div></div>

Как внедрить Schema.Org на сайт
Составленную разметку нужно добавить на сайт, это можно сделать с помощью плагинов или вручную: данные вставляют перед закрывающим тегом .
Если вы работаете на WordPress, используйте один из плагинов:
- самый популярный плагин Schema;
- All In One Schema.org Rich Snippets;
- WPSSO Schema JSON-LD Markup;
- WP SEO Structured Data Schema;
- Markup (JSON-LD) structured in schema.org.
Если на Drupal, то для него тоже есть модуль Schema.org.
Для Joomla! есть расширение
J4Schema.org, которое работает с редактором JCE.
Как проверить корректность разметки Schema.Org
После внедрения семантической разметки рекомендуется проверить ее на предмет корректности с использованием специальных инструментов Google и Яндекса.
Наличие микроразметки Schema.Org и Open Graph проверит сервис «Анализ сайтов». Кроме сводки по 70+ тестам, он определит, корректно ли установлена микроразметка, и покажет превью ссылки с Open Graph

Есть и отдельные инструменты для проверки только разметки. В случае Google для проверки корректности применяется инструмент
Structured Data Testing Tool.
Разметку можно проверить на любом сайте: введите в поле URL или фрагмент кода и запустите проверку, а инструмент покажет ошибки и предупредит, какие графы еще можно заполнить.

Яндекс интегрировал специальный валидатор в свой Вебмастер. В него также можно вставить код или адрес страницы. Инструмент показывает, как парсер видит микроразметку.

Рекомендуем проверять через оба инструмента, чтобы удостовериться, что и Яндекс, и Google верно считывают информацию. Обратите внимание, что если доступ к странице заблокирован в robots.txt, с помощью метатега noindex или другим способом, бот не сможет считать разметку.
Информационную разметку не так сложно настроить — для составления есть помощники и руководства, для вставки у популярных CMS есть плагины или можно вставлять вручную. Настроенная разметка образует выделяющийся дополненный сниппет, который повысит кликабельность и привлечет больше трафика.