Микроразметка Schema.Org на сайте, что это и зачем нужна

Информационная микроразметка, которая иногда также именуется семантической разметкой (Semantic Markup), не является фактором ранжирования ни в Google, ни в Яндексе. Добавление ее на сайт не поможет вам продвинуть страницы в топ. Но внедрить семантическую разметку все равно стоит.

Зачем нужна микроразметка

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

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

Как составить разметку Schema.Org

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

Многие рекомендуют использовать в качестве синтаксиса не Microdata, а JSON-LD, потому что тот способ проще и короче. В каталоге schema.org есть примеры и для записи Microdata, и для JSON-LD.

Для внедрения Schema.org нужно два шага:

1. Оборачиваем в контейнер описание и указываем схему разметки:


&lt;div itemscope itemtype="http://schema.org/Organization" &gt;
&lt;/div&gt;

</div>

1. Размечаем свойства:


&lt;span itemprop="streetAddress"&gt;Орджоникидзе, 57&lt;/span&gt;

<span itemprop="streetAddress">Орджоникидзе, 57</span>

Код разметки для объекта состоит из тегов и трех атрибутов:

— itemscope дает боту сигнал, что на странице описан объект;
— itemtype указывает тип объекта из официальной коллекции разметки;
— itemprop содержит описание объекта.

Чаще всего используют разметку таких типов:

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

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

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

Логотип и название компании:


&lt;div itemscope itemtype="http://schema.org/Organization"&gt;
    &lt;a itemprop="url" href="http://www.example.com/"&gt;Главная&lt;/a&gt;
    &lt;img itemprop="logo" src="http://www.example.com/logo.png" /&gt;
&lt;/div&gt;

<a itemprop="url" href="http://www.example.com/">Главная</a>

</div>

Разметка товара schema.org и «хлебных крошек»

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

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

Структурирование контактной информации

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


&lt;div itemscope itemtype="http://schema.org/Organization"&gt;
    &lt;span itemprop="name"&gt;Название организации&lt;/span&gt; Контакты:
    &lt;div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"&gt;
        Адрес:
        &lt;span itemprop="streetAddress"&gt;Мира, 100&lt;/span&gt;
        &lt;span itemprop="postalCode"&gt;101000&lt;/span&gt;
        &lt;span itemprop="addressLocality"&gt;Москва&lt;/span&gt;,
    &lt;/div&gt;
    Телефон:&lt;span itemprop="telephone"&gt;+7 495 000–00–00&lt;/span&gt;, Факс:
    &lt;span itemprop="faxNumber"&gt;+7 495 000–00–00&lt;/span&gt;, Электронная почта: &lt;span itemprop="email"&gt;mail@pr-cy.ru&lt;/span&gt;
&lt;/div&gt;

<span itemprop="name">Название организации</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, автора, дату публикации, дату обновления, описание.

Пример заполнения разметки:


&lt;div itemscope itemtype="http://schema.org/Article"&gt;
    &lt;span itemprop="name"&gt;Название статьи&lt;/span&gt;
    &lt;span itemprop="description"&gt;Описание&lt;/span&gt;
    &lt;span itemprop="author"&gt;Автор&lt;/span&gt;
    &lt;link itemprop="url" href="https://mehelps.ru/ссылка на страницу" /&gt;
    &lt;meta itemprop="datePublished" content="Дата публикации"&gt;
    &lt;div itemprop="articleBody"&gt;
        Основной текст статьи
    &lt;/div&gt;
&lt;/div&gt;

<span itemprop="name">Название статьи</span>

<span itemprop="description">Описание</span>

<span itemprop="author">Автор</span>

Основной текст статьи

</div>

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

Разметка рецептов

Для рецептов обычно размечают название, URL, калорийность блюда, время готовки. Можно добавить автора рецепта, количество порций.

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


&lt;div itemscope itemtype="http://schema.org/Recipe"&gt;
    &lt;h1 itemprop="name"&gt;Курица в пиве с рисом&lt;/h1&gt; Описание
    &lt;img itemprop="resultPhoto" src="https://mehelps.ru/адрес фото" /&gt;
    &lt;ul&gt;
        &lt;li&gt;Автор рецепта: &lt;span itemprop="author"&gt;Оля Давыдова&lt;/span&gt;&lt;/li&gt;
        &lt;li&gt;После приготовления вы получите &lt;span itemprop="recipeYield"&gt;4 порции&lt;/span&gt;&lt;/li&gt;
        &lt;li&gt;Время приготовления:
            &lt;meta itemprop="totalTime" content="PT45M" /&gt;45 минут&lt;/li&gt;
    &lt;/ul&gt;
    &lt;h2&gt;Ингредиенты&lt;/h2&gt;
    &lt;ul&gt;
        &lt;li itemprop="ingredients"&gt;
            Ингредиент блюда
        &lt;/li&gt;
        &lt;li itemprop="ingredients"&gt;
            Ингредиент блюда
        &lt;/li&gt;
        &lt;li itemprop="ingredients"&gt;
            Ингредиент блюда
        &lt;/li&gt;
    &lt;/ul&gt;
    &lt;h2&gt;Способ приготовления&lt;/h2&gt;
    &lt;ul itemprop="recipeInstructions"&gt;
        &lt;li&gt;&lt;img itemprop="image" src="creks.jpg" alt="иллюстрация к шагу" /&gt; Описание шага.
        &lt;/li&gt;
        &lt;li&gt;&lt;img itemprop="image" src="feks.jpg" alt="иллюстрация к шагу" /&gt; Описание шага.
        &lt;/li&gt;
    &lt;/ul&gt;
    &lt;span itemprop="recipeCategory"&gt;Блюда из курицы&lt;/span&gt;
    &lt;div itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation"&gt;
        Пищевая ценность:
        &lt;ul&gt;
            &lt;li&gt;Калории: &lt;span itemprop="calories"&gt;927 ккал.&lt;/span&gt;,&lt;/li&gt;
            &lt;li&gt;Жиры: &lt;span itemprop="fatContent"&gt;4 г.&lt;/span&gt;&lt;/li&gt;
            &lt;li&gt;Белки: &lt;span itemprop="proteinContent"&gt;4 г.&lt;/span&gt;&lt;/li&gt;
            &lt;li&gt;Углеводы: &lt;span itemprop="carbohydrateContent"&gt;28 г.&lt;/span&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    Приятного аппетита!
&lt;/div&gt;

<h1 itemprop="name">Курица в пиве с рисом</h1> Описание

<ul>

<li>Автор рецепта: <span itemprop="author">Оля Давыдова</span></li>

<li>После приготовления вы получите <span itemprop="recipeYield">4 порции</span></li>

<li>Время приготовления:

</ul>

<h2>Ингредиенты</h2>

<ul>

Ингредиент блюда

</li>

Ингредиент блюда

</li>

Ингредиент блюда

</li>

</ul>

<h2>Способ приготовления</h2>

<li><img itemprop="image" src="creks.jpg" alt="иллюстрация к шагу" /> Описание шага.

</li>

<li><img itemprop="image" src="feks.jpg" alt="иллюстрация к шагу" /> Описание шага.

</li>

</ul>

<span itemprop="recipeCategory">Блюда из курицы</span>

Пищевая ценность:

<ul>

<li>Калории: <span itemprop="calories">927 ккал.</span>,</li>

<li>Белки: <span itemprop="proteinContent">4 г.</span></li>

<li>Углеводы: <span itemprop="carbohydrateContent">28 г.</span></li>

</ul>

</div>

Приятного аппетита!

</div>

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

Разметка для фильма

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

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


&lt;div itemscope itemtype="http://schema.org/Movie"&gt;
    &lt;h1 itemprop="name"&gt;Название&lt;/h1&gt;
    &lt;span itemprop="description"&gt;Описание&lt;/span&gt; Режиссер
    &lt;div itemprop="director" itemscope itemtype="http://schema.org/Person"&gt;
        &lt;span itemprop="name"&gt;Имя режиссера&lt;/span&gt;
    &lt;/div&gt;
    Звезды:
    &lt;div itemprop="actor" itemscope itemtype="http://schema.org/Person"&gt;
        &lt;span itemprop="name"&gt;Актер&lt;/span&gt;,
    &lt;/div&gt;
    &lt;div itemprop="actor" itemscope itemtype="http://schema.org/Person"&gt;
        &lt;span itemprop="name"&gt;Актер&lt;/span&gt;,
    &lt;/div&gt;
    &lt;div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"&gt;
        &lt;span itemprop="ratingValue"&gt;8&lt;/span&gt;/&lt;span itemprop="bestRating"&gt;10&lt;/span&gt; stars from
        &lt;span itemprop="ratingCount"&gt;200&lt;/span&gt; users. Отзывы &lt;span itemprop="reviewCount"&gt;50&lt;/span&gt;.
    &lt;/div&gt;

<h1 itemprop="name">Название</h1>

<span itemprop="description">Описание</span> Режиссер

<span itemprop="name">Имя режиссера</span>

</div>

Звезды:

<span itemprop="name">Актер</span>,

</div>

<span itemprop="name">Актер</span>,

</div>

<span itemprop="ratingValue">8</span>/<span itemprop="bestRating">10</span> stars from

<span itemprop="ratingCount">200</span> users. Отзывы <span itemprop="reviewCount">50</span>.

</div>

Как внедрить Schema.Org на сайт

Составленную разметку нужно добавить на сайт, это можно сделать с помощью плагинов или вручную: данные вставляют перед закрывающим тегом </body>.

Если вы работаете на WordPress, используйте один из плагинов:

Если на Drupal, то для него тоже есть модуль Schema.org.

Для Joomla! есть расширение J4Schema.org, которое работает с редактором JCE.

Как проверить корректность разметки Schema.Org

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

В случае Google для проверки корректности микроразметки применяется инструмент Structured Data Testing Tool .

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

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

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

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

Источник: PR-CY

Статья была полезной?