В статье:
Информационная микроразметка, которая иногда также именуется семантической разметкой (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 есть плагины или можно вставлять вручную. Настроенная разметка образует выделяющийся дополненный сниппет, который повысит кликабельность и привлечет больше трафика.
