Укр
Рус
Українська мова
Русский язык
SEO

Микроразметка для сайта, и что о ней нужно знать

Что такое микроразметка, зачем она нужна, какие виды бывают.
25 января 2021
0
16 мин
logo

Хочешь зарабатывать больше? Пройди курс Комплексный интернет-маркетинг от команды tripmydream и освой профессию за 3 месяца!

    Содержание

Что такое микроразметка?

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

Микроразметку понимают все поисковые системы.

В 2005 году начал набирать популярности способ семантической разметки Микроформаты (microformats).

А 2011 году крупнейшие поисковые системы Google, Yahoo! и Microsoft инициировали разработку единой схемы для семантической разметки в HTML5 — Schema.org. Чуть позже присоединился и Яндекс.

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

Словари и синтаксисы микроразметки

Микроразметка состоит из словаря и синтаксиса. В словаре описаны классы и свойства данных. А в синтаксисе – набор правил, которые с помощью тегов и атрибутов помогают реализовать этот словарь.

Со времен зарождения идеи семантической разметки данных использовались разные словари и синтаксисы. В статье мы рассмотрим только самые популярные из них.

Словари

На практике вам чаще всего доведется сталкиваться со словарями Schema.org, который влияет на поисковую выдачу и Open Graph, который влияет на вид репоста в социальной сети Facebook.

Schema.org

Данную микроразметку понимают все поисковые системы. Еще 2011 году Google, Yahoo! и Microsoft, а чуть позже и Яндекс, инициировали разработку Schema.org — единой схемы для семантической разметки в HTML5.

Еще один плюс, словарь постоянно дополняется. Так например в 2019 году появились новые типы микроразметки: FAQ (часто задаваемые вопросы), Q&A (вопрос-ответ, как на форумах, например), HowTo (для инструкций).

Полная документация находиться на сайте schema.org. Но неокрепший ум новичка может там просто затеряться и потерять всякий энтузиазм.

Поэтому в первую очередь рекомендуем посмотреть:>

  1. Центр Google Поиска — тут довольно много справочной информации с инструкциями, примерами оформления кода в различном синтаксисе и скриншотами, как разные типы данных выглядят в поисковой выдаче.
  2. Яндекс.Вебмастер — аналогичная справочная библиотека, только только от Яндекс.

Open Graph

А этот словарь стал актуальным в эпоху шеринга страниц сайтов в Facebook, но так же поддерживается и в Telegram, Viber, Slack, ВКонтакте, LinkedIn, Skype и многих других. Решает проблемы с отображением ссылки, картинки, названия и описания страницы сайта для того чтобы, пост выглядел более привлекательно.

Стандартный набор тегов:

  • og:locale — указывает языковую версию страницы.
  • og:type — тип страницы (например, статья, новость или видео).
  • og:title — заголовок статьи.
  • og:description — краткое описание страницы.
  • og:url — ссылка на страницу сайта.
  • og:image — ссылка на картинку, которая будет отображаться в посте.
  • og:site_name — название сайта.

Пример:

<meta property="og:title" content="Как составить контент-план для социальных сетей"/>
<span id="selection-marker-1" class="redactor-selection-marker"></span>
<meta property="og:description" content="Контент-план для социальных сетей: что это такое, как составлять,
 примеры ведения и темы для постов Instagram, Facebook и Telegram.">
<meta property="og:type" content="article">
<meta itemprop="image" content="https://cdn.tripmydream.com/travelhub/blog/blog/46/18/block_4618.jpg">
<meta property="article:publisher" content="https://www.facebook.com/TRIPMYDREAMcom">
<meta property="og:site_name" content="tripmydream">

Больше можно посмотреть на официальном сайте ogp.me, есть даже версия на русском языке ruogp.me.

Для проверки работоспособности микроразметки можно использовать Facebook Object Debugger.

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

А вот особенность микроформатов заключается в том, что тут объединен и словарь и синтаксис. При использовании микроформатов к уже существующей html разметке добавляются параметры тегов.
Но ее же минус в том, что этот синтаксис не универсальный. Яндекс понимает только несколько микроформатов, а гугл чуть больше. Так что по нашему индивидуальному мнению, проще использовать Schema.org.

Официальный сайт: microformats.org.

Одни из самых известных микроформатов:

  • hCard — организации и люди;
  • hCalendar — события;
  • hAtom — ленты новостей (как аналог RSS и Atom) в обычном HTML или XHTML;
  • XFN — социальные взаимоотношения;
  • xFolk — помеченные ссылки;
  • adr — почтовые адреса;
  • geo — географические координаты;
  • hReview — отзывы;
  • hProduct — товары;
  • hRecipe — кулинарные рецепты.

Синтаксисы

Для того, чтобы внедрить микроразметку на сайт понадобиться выбрать синтаксис, с помощью которого и нужно будет реализовывать словарь.

JSON-LD

Самый свежий формат, появился в 2010 году и уже с 2013-2014 года именно его и рекомендуют использовать Schema.org и Google. Так что скорее всего именно с ним вам и придется иметь дело.

Основное отличие JSON-LD от остальных, это то, что он внедряется не в HTML-код страницы (это мы рассмотрим чуть ниже), а в тег <script>. Данный синтаксис представляет из себя набор пар “ключ”: “значение”, которые даже человеку можно легко понять, не то что поисковому боту.

Например разметка FAQ Page:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [{
    "@type": "Question",
    "name": "Текст вопроса 1",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "Текст ответа 1"
    }
  },{
    "@type": "Question",
    "name": "Текст вопроса 2",
    "acceptedAnswer": {<span id="selection-marker-1" class="redactor-selection-marker"></span>
      "@type": "Answer",
      "text": "Текст ответа 2"
    }
  }]
}
</script>

В данном случае видно, что, например, "@context", "@type", "name", "text" — это ключи, а после двоеточия уже идут значения — "https://schema.org", "FAQPage", "Текст вопроса 1" и "Текст ответа 1".

Microdata

Синтаксис начал использоваться в HTML-5. Благодаря ему поисковики начали лучше понимать контент и стали появляться те самые приятные глазу расширенные данные в поисковой выдаче. В соответствии с этим синтаксисом разметка происходит в HTML-коде страницы. Причем внедряется она в видимую часть страницы.

Используется несколько основоположных атрибутов: itemscope, itemtype и itemprop, через которые указываются и описываются сущности в HTML-коде.

  • Itemscope указывает, что в коде расположена сущность;
  • Itemtype описывает ее тип. Itemscope и Itemtype всегда идут в паре;
  • Itemprop же описывает свойства этой сущности.

Например, микроразметка «breadcrumbs»:

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://tripmydream.academy/blog">
            <span itemprop="name">Главная</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://tripmydream.academy/blog"
           href="https://tripmydream.academy/blog">
          <span itemprop="name">Академия.Блог</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">SEO</span>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
  </body>
</html>

RDFa

Разметка также происходит в HTML-коде. Реализация сложнее, чем в предыдущих вариантах. Синтаксис RDFa чаще всего используют со словарем Open Graph для формирования красивого сниппета в социальных сетях. Пример такого кода мы уже давали в описании к Open Graph.

Основные виды структурированных данных

Вот именно в этом разделе статьи будет та, информация, которую лучше запомнить!

Самые главные типы микроразметки для расширенных результатов поиска:

  • Товар;
  • Строка навигации, она же хлебные крошки или breadcrumbs;
  • Статья, она же запись в блоге или новость;
  • Отзыв;
  • Рейтинг;
  • Логотип;
  • Местная компания;
  • FAQ – Часто задаваемые вопросы;
  • Вопросы и ответы;
  • Инструкции с пошаговым выполнением;
  • Рецепт;
  • Фильм;
  • Видео;
  • Подкаст;
  • Книга;
  • Строка поиска по сайту;
  • Приложение;
  • Учебные курсы;
  • Отзывы критиков;
  • Событие;
  • Проверка фактов;
  • Домашние занятия;
  • Лицензия на изображение;
  • Вакансия работодателя;
  • Программа обучения;
  • Ориентировочная зарплата;
  • Speakable – новостной контент, который может быть озвучен Google Ассистентом;
  • Платный контент и подписка;
  • Карусель – результаты с одного сайта, которые выводятся в виде списка или галереи, используется в сочетании с разметкой для Рецептов, Курсов, Ресторанов или Фильмов;
  • Крупные наборы данных / Dataset (сюда очень много всего входит, почитайте лучше тут).

Подробное описание со скринами и примерами кода в разном синтаксисе можно посмотреть в Центре Google Поиска и Яндекс.Вебмастере.

Есть гораздо больше данных, которые можно разметить, но далеко не все из них могут быть использованы в расширенных результатах поисковой выдачи. Чтобы узнать больше, изучите schema.org, там очень много всего интересного.

Внедрение микроразметки

В микроразметке хорошо то, что нет необходимости заучивать словари и синтаксис как какой-то отдельный язык программирования. Главное запомнить какие основные виды данных вообще можно размечать, мониторить, а не стали ли поддерживаться поисковиками какие-то новые виды. А уже при практической работе с сайтом прикидывать, какие из них могут принести вам пользу.

А уже что и как писать, можно подсмотреть в многочисленных примерах в кабинетах вебмастеров Гугл и Яндекс, на просторах интернета и даже в онлайн-генераторах микроразметки вроде Schema Markup Generator (JSON-LD) или визуальном генераторе Мастер разметки структурированных данных. Вы можете сделать это сами или поручить программисту через элементарное ТЗ со всеми полезными для него ссылками на инструкции, примерами того, что вы хотите и инструментом для проверки итоговой микроразметки. Так вы сэкономите время и себе и ему.

Маркер от Google Search Console

В старой версии вебмастера Google есть замечательный инструмент — Маркер, который поможет настроить микроразметку для поисковой выдачи Гугл без обращения к программисту и даже без внедрения разметки в код вашего сайта. Один существенный минус – тут доступно всего 9 типов микроразметки:

  1. Мероприятия
  2. Местные организации
  3. Обзоры книг
  4. Приложения
  5. Продукты (Товары)
  6. Рестораны
  7. Статьи
  8. Телесериалы
  9. Фильмы

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

Советы

  • Что именно вы хотите видеть в результатах поиска?
    В первую очередь определитесь, какие именно расширенные результаты вы хотите видеть в сниппетах вашего сайта и внедряйте именно их. Если размечать все возможные варианты, то поисковик, вероятнее всего, выберет сам, что именно будет показано, и есть большая вероятность, что это будет не тот, результат, который вы хотели получить.
  • А что если пользователь даже не зайдет на сайт?
    Взвесьте вероятность того, что расширенный результат может уже сразу в поисковой выдаче дать готовый ответ пользователю, решить его проблему еще до того как он зайдет на ваш сайт. Поможет ли это вашему бизнесу?
  • А ведь можно и под фильтр попасть!
    За спам в микроразметке можно попасть под фильтр и лишиться сразу всех расширенных результатов. Это может произойти, если вы неверно, и, скорее всего, злонамеренно, выберете не соответствующий вашему контенту тип микроразметки, например, букеты цветов будете размечать как рецепты приготовления блюд, потому что они в выдаче красивее выглядят.

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

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

Напоминаем, что как и многие другие операции, добавление микроразметки на сайт еще не гарантия того, что в поисковой выдаче в вашем сниппете появятся расширенные результаты, но это значительно повышает вероятность!

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

Отслеживание результатов

Микроразметка напрямую не влияет на позицию сайта в поисковой системе, но влияет на привлечение внимания пользователя именно к вашему сниппету и может повысить количество кликов по нему — CTR. Так что при прежней позиции и прежнем количестве просмотров вы получите больше трафика на сайт. А вот значительное повышение CTR может и поднять сайт и на более высокие позиции.

Так вот, после переиндексации сайта поисковиками вы:

  1. Просто визуально можете отслеживать, появились ли расширенные результаты в выдаче.
  2. Можете замерять и сравнивать показатели CTR с предыдущим периодом, до внедрения микроразметки (эти данные можно посмотреть в кабинетах вебмастеров поисковых систем).
  3. В Google Search Console можно посмотреть статистику эффективности расширенных результатов в отчете Эффективность / Вид в поиске.
  4. Также в кабинетах собираются данные о работоспособности таких улучшений. Если в каких-то типах данных что-то сломается, вы об этом узнаете.
Понравилась статья?
😍
2
😂
😄
3
😐
🤔
😩
1
РАСCКАЗАТЬ ДРУЗЬЯМ:
Комментариев нет