Что такое микроразметка сайта, и зачем она нужна

Для улучшения поведенческих факторов и привлечения трафика на сайт можно использовать разные методы. Возможно, большинство из них вы уже перепробовали, но нужного результата так и не добились. Обратите внимание, как выглядят сниппеты конкурентов в поисковой выдаче. Отличается ли превью вашего сайта от них? Если нет, пора задуматься о внедрении микроразметки на страницы сайта. О том, что такое микроразметка, и как её внедрять, читайте в этом посте.

• 1. Что такое микроразметка
• 2. Преимущества микроразметки
• 3. Из чего состоит микроразметка сайта
• 4. Словари микроразметки
• 5. Синтаксис микроразметки
• 6. Микроразметка Google и Яндекс
• 7. Как проверить микроразметку
• Подводим итоги

1. Что такое микроразметка

Микроразметка — это разметка на сайте и страницах, которая помогает донести больше информации о странице поисковым роботам и посетителям сайта за счёт внедрения в HTML-код дополнительных тегов и атрибутов.

Благодаря микроразметке страницы выглядит более привлекательно в поисковой выдаче. Поэтому семантическая разметка способствует эффективному SEO-продвижению сайта.

2. Преимущества микроразметки

Среди основных преимуществ микроразметки можно выделить следующие:

1. Привлекательный сниппет. В поисковой выдаче он будет выгодно выделяться среди конкурентов.

   

2. Определение информации на странице, которую нужно обработать поисковикам.
3. Определение поисковиком типа и содержания страницы: контакты, описание товара, рецепт, мероприятие и другие.

3. Из чего состоит микроразметка сайта

Это набор тегов и атрибутов с конкретным содержимым. Часть из них считывают поисковые роботы, другая часть видна пользователям. С помощью микроразметки можно вставить в сниппет:

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

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

Использовать микроразметку выгодно любому интернет-магазину — она позволяет разметить информацию о каждом товаре. При этом вы самостоятельно выбираете данные, которые отобразятся в выдаче.

4. Словари микроразметки

Микроразметка состоит из словаря и синтаксиса. Словарь определяет классы и свойства, с помощью которых передаётся контент со страницы в поисковую выдачу. Синтаксис содержит теги и атрибуты для описания сущностей — объектов программирования с присущими только им свойствами. Сущности отличаются между собой состоянием и типом операций, которые можно проводить над ними.

С момента появления разметки внедрялись разные словари и синтаксисы. Рассмотрим наиболее популярные варианты.

Schema.org

Поддерживается с 2011 года поисковыми гигантами: Google, Яндекс, Yahoo, Bing. Словарь считается международным, постоянно дополняется по инициативе людей со всего мира. С помощью Schema.org веб-мастера создают привлекательные сниппеты с указанием ценных характеристик объекта.

Описание типов данных в словаре имеет древовидную структуру. Здесь собраны сотни классов, с помощью которых описываются разные объекты. Для каждого из них в синтаксисе есть стандартные атрибуты:

• itemtype — тип объекта из списка словаря. Чаще используется Thing, который имеет свои подтипы: Action, CreativeWork, Person, Product и другие;
• itemscope — информация о том, что в этом участке кода описывается некий объект;
• itemprop —дополнительная информация об объекте. Например, продолжительность видеозаписи, время начала мероприятия.

Участок кода с атрибутами Schema.org выглядит так:

Open Graph

Еще один популярный словарь разметки, который используется для корректного отображения постов в Facebook. С Open Graph пост будет содержать заголовок, картинку и описание.

При отсутствии этого типа разметки пост будет выглядеть уныло:

Для создания кода разметки используют теги синтаксиса:

• og:title — заголовок объекта репоста;
• og:description — описание объекта;
• og:image — изображение;
• og:url — ссылка на расположение объекта;
• og:type — тип объекта.

Пример кода с разметкой Open Graph:

Микроформаты

Словарь микроразметки Microformats.org создан в 2007 году. Он включает разные типы объектов и описания их свойств. Этим словарём описывают товары, мероприятия, компании, рецепты и другие сущности с набором уникальных характеристик. Из всего списка микроформатов чаще используется hCard, который описывает контактные данные людей и организаций.

С помощью hCard можно указать:

• bday — дату рождения;
• n — имя;
• adr — адрес;
• photo — фото;
• geo — геолокацию и другие данные.

Участок кода с использованием микроформатов будет выглядеть так:

5. Синтаксис микроразметки

Кроме основных атрибутов itemtype, itemscope, itemprope из словаря Schema.org могут использоваться дополнительные элементы:

1. RDFa и RDFa Lite для описания разных типов объектов через атрибуты xmlns:v=”http://rdf.data-vocabulary.org/#, property=”v:title”, typeof=”v:Breadcrumb” и другие.
2. JSON-LD используется для описания объектов связанных данных. С целью адаптации разметки к поисковикам, они помещаются в теги <script>. В RDFa и JSON-LD данные представлены в формате «ключ-значение». Пример:
   <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "TrainReservation", "reservationId": "KBJ59P" } </script>,

   где ключ @context указывает на использование словаря schema.org, @type означает резерв билета на поезд и reservationId обозначает номер билета.

Как добавить микроразметку на сайт

1. Сформировать код разметки. Вы можете самостоятельно прописать нужные теги и атрибуты для роботов и реальных пользователей.
2. Использовать онлайн-инструменты. Например, Schema-generator.
3. Установить плагин или расширение в CMS. Например, Schema Creator by Raven для WordPress.

6. Микроразметка Google и Яндекс

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

Микроразметка Google.

А так выглядит микроразметка Яндекс:

7. Как проверить микроразметку

Для проверки правильности составления кода микроразметки сайта используйте валидатор Google. Там можно вставить ссылку на страницу либо фрагмент кода с синтаксисом разметки. Внедрять этот код на сайт можно лишь при отсутствии ошибок.

Также в краулере Netpeak Spider можно определять, на каких страницах есть микроразметка, а на каких её нет, а также узнать, какие форматы разметки используются на страницах, и какие типы данных размечены. Для этого:

1. Вставьте домен сайта.
2. В разделе параметров «Контент» выберите пункт «Микроразметка: типы данных».

   

3. Запустите сканирование.
4. По окончании вы можете увидеть данные о микроразметке:
   • В модуле «База данных».

     

   • В пункте «Содержат микроразметку» в отчёте «Сводка» на боковой панели.

     

   Чтобы выполнить валидацию микроразметки в сервисе Google Structured Data Testing Tool, откройте контекстное меню и выберите пункт «Открыть URL в сервисе».

   

Также проверки микроразметки Schema.org в Netpeak Spider можно воспользоваться функцией парсинга.

1. Откройте вкладку с настройками парсинга.
2. Вставьте селекторы [itemprop] для поиска элементов микроразметки.
3. Выберите Извлечение данных → Весь HTML-элемент.

   

4. Вставьте начальный URL сайта в адресную строку.
5. Отметьте чекбокс «Парсинг» в параметрах на боковой панели.
6. Запустите сканирование.
7. По окончании перейдите на вкладку «Отчёты» → «Парсинг» и ознакомьтесь с результатами. Чтобы посмотреть страницы, на которых найдены или не найдены элементы микроразметки, нажмите на кнопки «Есть» и «Нет» соответственно.

   

Мы подготовили краткое и наглядное видео о том, как проверить микроразметку с помощью Netpeak Spider:

Подводим итоги

Микроразметка сайта используется с целью правильной индексации страниц и определения контента на этих страницах. Также синтаксическая разметка создаёт расширенный сниппет с указанием полезной информации для посетителей сайта. Чаще всего с помощью микроразметки внедряют хлебные крошки, цены, рейтинг, картинки. Благодаря этому сниппеты выглядят более привлекательными в поисковой выдаче.

Микроразметка состоит из словаря и синтаксиса. Для создания кода чаще используют словарь Schema.org со стандартным набором метатегов и классов. Проверить готовый код синтаксической разметки можно при помощи валидаторов поисковых систем Google и Яндекс.

А как вы внедряете микроразметку на свой сайт? Расскажите об этом в комментариях 👇