11711 Знания

Как внедрить микроразметку информации Schema.Org на сайт, и что это дает?

Обновленное руководство по Schema.Org: зачем нужна информационная микроразметка, какие виды бывают, и как установить разметку на сайт.


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

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

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

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

сайт со сниппетом

Сниппет с подробной разметкой рецепта

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

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

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

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

  1. Оборачиваем в контейнер описание и указываем схему разметки:
  2. <div itemscope="" itemtype="http://schema.org/Organization">
    </div>
    
  3. Размечаем свойства:
  4. <span itemprop="streetAddress">Орджоникидзе, 57</span>
    

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

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

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

Составить микроразметку для конкретной страницы можно, использовав Помощника в разметке от 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 для статей и других текстов»

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

Для рецептов обычно размечают название, 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, используйте один из плагинов:

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

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

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

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


Наличие микроразметки Schema.Org и Open Graph проверит сервис «Анализ сайтов». Кроме сводки по 70+ тестам, он определит, корректно ли установлена микроразметка, и покажет превью ссылки с Open Graph

проверка микроразметки Schema.Org и Open Graph

Проверка микроразметки в сервисе


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

проверка разметки

Пример проверки разметки

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

валидатор разметки от Яндекс

Результаты проверки валидатором

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



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

Показ блока с ответами и Schema.org: есть ли связь?
Главное о микроразметке: подборка знаний для веб-мастеров
Google представил новый формат расширенных сниппетов
Комментарии (9)
http://schema.org/Organization"> Надо бы div itemscope itemtype="http://schema.org/Organization" PS Не получается в коменты html код вставить
ig0r   14.01.2016 17:17
поправили спасибо
Андрей Иванов   15.01.2016 18:06
Вот получается так же, что seo по ним не получиться сделать, но правильность заполнения, корректность текста, правильно растравленные разметки почему то при оптимизации играет не малую роль. Так не стоит ли учитывать и это как один из пунктов seo продвижения?
witosp   16.01.2016 16:00
schema.org - Google ДЦ 173.194.112.69 IP сайта --> Считаю это очередной монополией гугла. Навязывают свои правила - почему нельзя микроразметку сделать без schema.org и вообще если не хотите чтобы вас заспамили - не пользуйтесь этой лажей.
gwegbinkame   13.04.2019 07:22
в 2019 году спама бояться... спасибо, улыбнули)
Мерцающий   28.05.2019 21:23
https://dendrblog.ru/sozdanie-bloga/wordpress-plugins/antispam-onlain-servis-dlya-wordpress.html И забудьте про спам, как про страшный сон.
Андрей Иванов   17.01.2016 00:08
как просто у нас в законе "Тебя посудят, а ты не воруй!" а почему же так нельзя сделать в ...даже не знаю как подобрать слова для данного типа интернет разработок.
Мерцающий   28.05.2019 21:25
А какие плагины для WordPress могут автоматически размещать рецепты? Один пробовал, но там каждый рецепт ручками надо. А у меня их уже пара сотен. По одному ручками - мазохизм.
Nikolyaseaman   29.05.2019 06:42
Как-то несколько поздновато проснулись. Разметка используется черти сколько времени, уже везде успели перемусолить как её необходимость, так и бесполезность. А тут бах, оказывается микроразметка появилась.

Чтобы оставлять комментарии, вам нужно войти в систему

Авторизоваться

К данной записи нельзя добавлять комментарии, т.к. она очень старая.