Поисковики
Как внедрить микроразметку информации Schema.Org на сайт, и что это дает?
Зачем нужна микроразметка
Как составить разметку Schema.Org
Как внедрить Schema.Org на сайт
Как проверить корректность разметки Schema.Org
Информационная микроразметка, которая иногда также именуется семантической разметкой (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>
В разметке могут быть и другие поля: к примеру, рейтинг статьи, комментарии.
Сниппет статьи с рейтингом
Разметка рецептов
Для рецептов обычно размечают название, 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>
Пример сниппета фильма
Как внедрить Schema.Org на сайт
Составленную разметку нужно добавить на сайт, это можно сделать с помощью плагинов или вручную: данные вставляют перед закрывающим тегом </body>.
Если вы работаете на 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 и Яндекса.
В случае Google для проверки корректности микроразметки применяется инструмент
Structured Data Testing Tool .
Разметку можно проверить на любом сайте. Введите в поле URL или фрагмент кода и запустите проверку, а инструмент покажет ошибки и предупредит, какие графы еще можно заполнить.
Пример проверки разметки
Яндекс интегрировал специальный
валидатор в свой Вебмастер. В него также можно вставить код или адрес страницы. Инструмент показывает, как парсер видит микроразметку.
Результаты проверки валидатором
Рекомендуем проверять через оба инструмента, чтобы удостовериться, что и Яндекс, и Google верно считывают информацию. Обратите внимание, что если доступ к странице заблокирован в
robots.txt, с помощью метатега noindex или другим способом, бот не сможет считать разметку.
Информационную разметку не так сложно настроить — для составления есть помощники и руководства, для вставки у популярных CMS есть плагины или можно вставлять вручную. Настроенная разметка образует выделяющийся дополненный сниппет, который повысит кликабельность и привлечет больше трафика.
Источник: pr-cy.ru
