Информационная микроразметка, которая иногда также именуется семантической разметкой (Semantic Markup), не является фактором ранжирования ни в Google, ни в Яндексе. Добавление ее на сайт не поможет вам продвинуть страницы в топ. Но внедрить семантическую разметку все равно стоит.
Зачем нужна микроразметка
Реализация микроразметки предполагает использование дополнительных тегов и атрибутов для четкого структурирования информации. Она указывает поисковым роботам на то, о чем написано на странице и отвечает за формирование красивого кликабельного сниппета в выдаче. К примеру, так можно структурировать контактную информацию организации, данные о товарах в ассортименте интернет-магазина, рецепты на сайте, обзоры и другие виды контента.
Поисковики в долгу не останутся. Структурированная разметка поможет сайту выделиться на странице результатов поисковой системы (SERP), а это может привести к повышению показателя кликабельности — CTR. Когда пользователь увидит выделяющийся сниппет с рейтингом, картинками, ценой и другими дополнительными элементами, скорее всего он кликнет на него.
Как составить разметку Schema.Org
Это один из самых распространенных и дружественных к новичкам стандартов. Дружественность выражается хотя бы в наличии широкого перечня уже готовых схем практически на все случаи жизни: от страниц мероприятий до разметки товаров и обзорников. Выбрать наиболее подходящую схему можно из коллекции на schema.org.
Многие рекомендуют использовать в качестве синтаксиса не Microdata, а JSON-LD, потому что тот способ проще и короче. В каталоге schema.org есть примеры и для записи Microdata, и для JSON-LD.
Для внедрения Schema.org нужно два шага:
-
- Оборачиваем в контейнер описание и указываем схему разметки:
1 2 3 4 | <div itemscope itemtype="http://schema.org/Organization" > </div> |
-
- Размечаем свойства:
1 2 3 | <span itemprop="streetAddress">Орджоникидзе, 57</span> |
Код разметки для объекта состоит из тегов и трех атрибутов:
— itemscope дает боту сигнал, что на странице описан объект;
— itemtype указывает тип объекта из официальной коллекции разметки;
— itemprop содержит описание объекта.
Чаще всего используют разметку таких типов:
Составить микроразметку для конкретной страницы можно, использовав Помощника в разметке от Google. Вставляете в сервис ссылку на страницу, выбираете тип схемы и отмечаете элементы, а сервис сам вставляет код в html.
Код можно составить и вручную. Разберем несколько самых популярных случаев применения.
Разметка для главной страницы
Логотип и название компании:
1 2 3 4 5 6 | <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 и «хлебных крошек»
Для товарной позиции в интернет-магазине можно сделать разметку, включающую диапазон цен, описание, указание наличия товара, рейтинг и отзывы.
Сделать сниппет еще привлекательнее помогут «Хлебные крошки» — путь от главной до искомой страницы. Можно настроить понятный пользователям путь с помощью «хлебных крошек». К разметке присмотрятся оба поисковика, но Яндекс использует свои алгоритмы для формирования крошек.
Структурирование контактной информации
Реальный пример применения микроразметки для структурирования контактных данных организации:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <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, автора, дату публикации, дату обновления, описание.
Пример заполнения разметки:
1 2 3 4 5 6 7 8 9 10 11 12 | <div itemscope itemtype="http://schema.org/Article"> <span itemprop="name">Название статьи</span> <span itemprop="description">Описание</span> <span itemprop="author">Автор</span> <link itemprop="url" href="https://mehelps.ru/ссылка на страницу" /> <meta itemprop="datePublished" content="Дата публикации"> <div itemprop="articleBody"> Основной текст статьи </div> </div> |
В разметке могут быть и другие поля: к примеру, рейтинг статьи, комментарии.
Разметка рецептов
Для рецептов обычно размечают название, URL, калорийность блюда, время готовки. Можно добавить автора рецепта, количество порций.
Пример разметки:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <div itemscope itemtype="http://schema.org/Recipe"> <h1 itemprop="name">Курица в пиве с рисом</h1> Описание <img itemprop="resultPhoto" src="https://mehelps.ru/адрес фото" /> <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> |
В сниппете может быть и другая информация, к примеру, можно добавить рейтинг блюда, а указание жиров и углеводов убрать.
Разметка для фильма
В такой разметке обычно указывают длительность. рейтинг, год выпуска, сборы, режиссера, главных звезд, могут добавить другие данные.
Пример разметки:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <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, используйте один из плагинов:
Если на Drupal, то для него тоже есть модуль Schema.org.
Для Joomla! есть расширение J4Schema.org, которое работает с редактором JCE.
Как проверить корректность разметки Schema.Org
После внедрения семантической разметки рекомендуется проверить ее на предмет корректности с использованием специальных инструментов Google и Яндекса.
В случае Google для проверки корректности микроразметки применяется инструмент Structured Data Testing Tool .
Разметку можно проверить на любом сайте. Введите в поле URL или фрагмент кода и запустите проверку, а инструмент покажет ошибки и предупредит, какие графы еще можно заполнить.
Яндекс интегрировал специальный валидатор в свой Вебмастер. В него также можно вставить код или адрес страницы. Инструмент показывает, как парсер видит микроразметку.
Рекомендуем проверять через оба инструмента, чтобы удостовериться, что и Яндекс, и Google верно считывают информацию. Обратите внимание, что если доступ к странице заблокирован в robots.txt, с помощью метатега noindex или другим способом, бот не сможет считать разметку.
Информационную разметку не так сложно настроить — для составления есть помощники и руководства, для вставки у популярных CMS есть плагины или можно вставлять вручную. Настроенная разметка образует выделяющийся дополненный сниппет, который повысит кликабельность и привлечет больше трафика.
Источник: PR-CY
Статья была полезной?