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

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

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

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

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

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

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

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

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

    Как микроразметка отображается в поисковой выдаче

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

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

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

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

Пример расширенного сниппета

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

Расширенные сниппеты в выдаче Google

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

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

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

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

Schema.org

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

Сниппет, созданный с помощью словаря микроразметки Schema.org

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

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

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

<div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">Титаник</h1> <div itemprop="director" itemscope itemtype="http://schema.org/Person">Режиссер: <span itemprop="name">Джеймс Кэмерон</span> (род. <span itemprop="birthDate">16 августа 1954 г.</span>) </div> <span itemprop="genre">мелодрама</span> <a href="../movies/titanik-theatrical-trailer.html" itemprop="trailer">Трейлер</a> </div>

Open Graph

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

Пример сниппета Open Graph в Facebook

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

Пост без сниппета

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

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

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

<head> <meta property="og:title" content="Название видео" /> <meta property="og:url" content="http://yoursite.ru/video/" /> <meta property="og:video" content="http://site.ru/video/" /> <meta property="og:description" content="Описание видео” /> <meta property="og:type" content="video.other"/> </head>

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

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

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

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

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

<div class="hcard"> <img class="photo" src="http://site.com/gagarin.jpg" /> <strong class="fn">Иван Иванов</strong> <span class="title">Лётчик-испытатель</span> в <span class="org">Военно-воздушные силы</span> <a class="url" href=http://site.com/Иванов>Страница И.Иванова</a> <div class="bday"> <span class="value-title" title="1982-12-05">5 декабря 1982</span> </div> <span class="note">Герой страны</span> </div>

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 или J4Schema для Joomla.

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

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

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

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

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

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

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

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

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

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

    Как проверить микроразметку в Netpeak Spider

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

      Как посмотреть данные микроразметки в модуле «База данных» в Netpeak Spider

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

      Как посмотреть данные микроразметки в пункте «Сводка» в Netpeak Spider

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

    Как выполнить валидацию микроразметки в сервисе Google Structured Data Testing Tool «Сводка» через Netpeak Spider

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

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

    Как проверить микроразметку в Netpeak Spider

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

    Как проверить микроразметку в Netpeak Spider c помощью парсинга

Больше кейсов по парсингу вы найдёте в посте «Как парсить различные данные с помощью Netpeak Spider».

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

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

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

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