Микроразметка сайта: зачем нужна и какие преимущества способна дать

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

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

Зачем нужна микроразметка

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

Для поисковых систем

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

Приведу пару примеров:

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

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

1. Или он хочет купить посудомоечную машину определенного типа. Не уходя со страницы поиска, пользователь может оценить внешний вид, рейтинг магазина, стоимость, а потом уже перейти в дополнительные разделы и на саму страницу:

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

Вы справедливо можете заметить, что это же хорошо, что посетитель пришел на сайт! Да, но если он не найдет то, что искал (например, чтобы машина была не более 50 см шириной или имела настройки для ручной стирки), или ему не понравится цена, он быстро покинет страницу. Он не только разочаруется в вас как в продавце, но и увеличит показатель отказов страницы, а это для SEO не очень хорошо.

К тому же, зачем тратить время на поиск информации неизвестно где, если другой сайт уже услужливо предоставил все, что интересует? Значит там больше вероятности найти то, что требуется.

Доктрина поисковых систем давно уже поменялась в сторону полезности сайтов — пользователь должен приходить на тот веб-ресурс, который действительно ему интересен, не теряя времени на поиск.

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

Для мессенджеров и социальных сетей

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

Вот пример: отправлено 3 ссылки на салоны красоты в Сочи.

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

Любая дополнительная информация о вашей организации вне сайта — это плюс к лояльности ваших клиентов. Поэтому не стоит пренебрегать таким инструментом, как микроразметка данных.

Что можно и нужно размечать с помощью микроразметки

Форматы микроразметки различны, их несколько сотен, но здесь я опишу так называемый джентльменский набор для коммерческого сектора:

Также разметка может быть актуальна для информационных сайтов:

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

Как размечать

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

Но сам словарь никак не применим без синтаксиса — набора правил, по которым будет использоваться словарь в коде страницы. Вспоминаем школьную программу: есть словарь, где указано, как правильно пишется то или иное слово, а есть правила русского языка, которые рассказывают, как корректно расставить слова в предложении, чтобы вас понимали другие. Вот здесь точно так же.

Самые популярные синтаксисы для разметки: с помощью JSON-LD и микроданные (microdata).

JSON-LD

JSON-LD используется для передачи текстового формата данных в JavaScript. Простым языком, формируется скрипт, содержащий информацию в соответствии с типом размечаемого объекта, который размещается в коде страницы и считывается поисковой системой при индексации. Код, как правило, добавляется в <head> сайта.

Вот так будет выглядеть разметка для организации:

В чем преимущества такого метода:

Микроданные (microdata)

В отличие от JSON-LD микроданные используют синтаксис HTML, поэтому потребуется размечать код внутри контента страницы.

Информация из примера про организацию выше с помощью microdata будет размечена вот так:

В чем преимущества такой разметки?

Основной плюс такого формата — его можно использовать на сайтах, где нет возможности генерировать JSON-LD автоматически. С помощью микроданных можно сделать шаблон страницы товара или статьи, контент на странице контактов, и поисковые системы будут знать, с чем имеют дело. Да, тут уже не обойтись генератором и придется лезть в код.

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

Экспериментируйте с форматами и ищите оптимальный для вас и вашего продвижения.

Максим
Тарасенко

Основатель ReMarketing

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

Получить бесплатный SEO-аудит

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

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

Организация

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

Я уже приводила примеры выше с разметкой организации. Здесь же разберем, что к чему.

JSON-LD для организации:

<script type="application/ld+json">
{
    "@context": "http://schema.org/",
    "@type": "Organization",
     "name": "Модные колючки",
     "url": "https://site.ru/",
     "logo": "https://site.ru/images/logo.svg",
     "image": "https://site.ru/images/logo.svg",
     "description": "Лучшая одежда для Ёжиков.",
     "address": {
        "@type": "PostalAddress",
        "streetAddress": "Красная площадь, д. 3",
        "addressLocality": "Москва",
        "addressRegion": "Москва",
        "addressCountry": "Россия",
        "postalCode": "111000"
    },
    "telephone": "8 800 800-00-00",
    "email": "email@site.ru"
}
</script>

Код JSON-LD должен быть заключен в теги <script type="application/ld+json"></script>, размещать желательно в <head> сайта, но и в теле страницы он тоже будет работать.

Теперь по пунктам:

• @context — указывается словарь, который будет использован;
• @type — тип сущности, которую будем описывать (в нашем случае организация);
• name — название организации;
• url — адрес сайта организации;
• logo — логотип организации;
• image — изображение (здесь можно продублировать логотип или указать фото вашего офиса/магазина, если не указывать данное свойство, грубой ошибки не будет);
• description — описание организации;
• address — здесь используется тип сущности PostalAddress для расширенного описания адреса:
  • streetAddress — улица и номер дома,
  • addressLocality — город,
  • addressRegion — регион,
  • addressCountry — страна,
  • postalCode — почтовый индекс;
• telephone — телефон;
• email — электронная почта.

Вариант с микроданными:

<div itemscope itemtype="http://schema.org/Organization">
	<span itemprop="name">Модные колючки</span>
<img src ="https://site.ru/images/logo.svg" itemprop="logo">
	Наш адрес:
	<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
		<span itemprop="streetAddress">Красная площадь, д. 3</span>
		<span itemprop="postalCode">111000</span>
		<span itemprop="addressLocality">Москва, Россия</span>
	</div>
	Телефон:<span itemprop="telephone">8 800 800-00-00</span>,
	E-mail: <span itemprop="email">email@site.ru</span>
Сайт:<span itemprop="url">https://site.ru/</span>
</div>

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

Теперь подробнее:

• itemscope itemtype="http://schema.org/Organization" — указывает на то, что в данном блоке будет описана организация;
• itemprop="name" — название организации;
• itemprop="logo" — логотип;
• itemprop="address" itemscope itemtype="http://schema.org/PostalAddress" — адрес организации, будет использована сущность PostalAddress для детального описания:
  • itemprop="streetAddress" — улица и номер дома,
  • itemprop="addressLocality" — город, страна,
  • itemprop="postalCode" — почтовый индекс;
• itemprop="telephone" — телефон;
• itemprop="email" — электронная почта;
• itemprop="url" — сайт.

Если полная информация об организации уже есть на сайте, достаточно только разметить нужные свойства. Если какого-то свойства нет, или нежелательно его размещение именно в этом месте, то необходимое свойство можно добавить через тег <meta>. В вышеприведенном примере отсутствует описание организации, которое есть в JSON-LD. Этот недостаток можно исправить, добавив тег такого содержания:

<meta itemprop="description" content="Лучшая одежда для Ёжиков." />

где

• itemprop="description" — указание, что здесь будет свойство описания организации;
• content="Лучшая одежда для Ёжиков." — собственно описание.

Теги <meta> не отображаются на сайте, но есть в коде страницы, поэтому они считываются поисковыми системами.

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

Сомневаюсь, что за один – два тега на странице ваш сайт получит санкции, но увлекаться не стоит.

Хлебные крошки

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

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

При том, что на всех сайтах хлебные крошки присутствуют на страницах:

Разметка хлебных крошек в JSON-LD:

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Бытовая техника",
        "item": "https://site.ru/technika"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Мелкая бытовая техника",
        "item": "https://site.ru/technika/small"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Утюги"
      }]
    }
    </script>

Где:

• @context — словарь;
• @type — тип сущности (у нас хлебные крошки, BreadcrumbList);
• itemListElement — список элементов;
• @type: ListItem — сущность описываемого элемента (у нас элемент списка);
• position — порядковый номер элемента;
• name — название;
• item — сам элемент (в нашем случае url).

Microdata для хлебных крошек:

 <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://site.ru/technika">
            <span itemprop="name">Бытовая техника</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://site.ru/technika/small">
            <span itemprop="name">Мелкая бытовая техника</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
       
          <span itemprop="name">Утюги</span>
        <meta itemprop="position" content="3" />
      </li>
    </ol>

Где:

• itemscope itemtype="https://schema.org/BreadcrumbList" указывает на то, что в данном блоке будет описана цепочка навигации;
• temprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" — здесь будет описан список элементов:
  • itemprop="item" — сам элемент (url),
  • itemprop="name" — название;
• itemprop="position" — порядковый номер; обратите внимание, что он в скрытом теге <meta>.

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

Меню навигации

Благодаря верно размеченному меню поисковые системы смогут лучше понять, из каких разделов состоит сайт и какая у него структура.

JOSN-LD вариант:

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SiteNavigationElement",
"name": [
"О компании",
"Отзывы",
"Портфолио",
"Услуги",
"Акции",
"Статьи",
"Контакты"
],
"url": [
"https://site.ru/about/",  
"https://site.ru/about/rewievs/",  
"https://site.ru/about/portfolio/",
"https://site.ru/services/",
"https://site.ru/action/",
"https://site.ru/blog/",
"https://site.ru/contacts/"
]
}
</script>

Где:

• @context — словарь;
• @type — тип сущности (у нас меню, SiteNavigationElement);
• name — массив со списком названий пунктов меню;
• url — массив со списком url.

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

Микроданные для меню:

<div itemscope itemtype="http://schema.org/SiteNavigationElement">
  <menu itemprop="about" itemscope itemtype="http://schema.org/ItemList">
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ItemList"><a href="https://site.ru/about/" itemprop="url">О компании</a>
    <meta itemprop="name" content="О компании" />
      <menu>
       <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"><a href="https://site.ru/about/rewievs/" itemprop="url">Отзывы<meta itemprop="name" content="Отзывы" /></a></li>
       <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"><a href="https://site.ru/about/portfolio/" itemprop="url">Портфолио<meta itemprop="name" content="Портфолио" /></a></li>
      </menu>
    </li>
    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"><a href="https://site.ru/services/" itemprop="url">Услуги<meta itemprop="name" content="Услуги" /></a></li>
	<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"><a href="https://site.ru/action/" itemprop="url">Акции<meta itemprop="name" content="Акции" /></a></li>
	<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"><a href="https://site.ru/blog/" itemprop="url">Статьи<meta itemprop="name" content="Статьи" /></a></li>
	<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"><a href="https://site.ru/contacts/" itemprop="url">Контакты<meta itemprop="name" content="Контакты" /></a></li>
  </menu>
</div>

Где:

• itemscope itemtype="http://schema.org/SiteNavigationElement" указывает на то, что в данном блоке будет описан навигационный элемент;
• itemprop="about" itemscope itemtype="http://schema.org/ItemList" указывает, что здесь будет список элементов;
•  itemprop="itemListElement" itemscope itemtype="http://schema.org/ItemList" — элемент вышеупомянутого списка, который сам является списком;
• itemprop="url" — url пункта меню;
• itemprop="name" — название пункта меню.

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

Поиск по сайту

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

Просто так разметить поиск не получится. Предварительно нужно использовать разметку WebSite, а уже внутри размечать поиск.

JSON-LD вариант:

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "url": "https://site.ru/",
      "potentialAction": {
        "@type": "SearchAction",
        "target": {
          "@type": "EntryPoint",
          "urlTemplate": "https://site.ru/search?q={search_term_string}"
        },
        "query-input": "required name=search_term_string"
      }
    }
    </script>

Где:

• @context — словарь;
• @type — тип сущности (у нас веб-сайт, WebSite);
• url — адрес сайта;
• potentialAction — действие, для которого будем использовать другую сущность, SearchAction (поиск):
  • target — цель, точка входа для действия (тип сущности EntryPoint),
  • urlTemplate — шаблон адреса страницы поиска, где:
    • https://site.ru/search?q= — собственно адрес страницы поиска,
    • {search_term_string} — поисковая фраза,
  • query-input — указывает, что именно требуется обрабатывать (т. е. на поисковую фразу).

Microdata вариант для формы поиска:

<div itemscope itemtype="https://schema.org/WebSite">
  <meta itemprop="url" content="https://site.ru/"/>
  <form itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction">
    <meta itemprop="target" content="https://site.ru/search?q={search_term_string}"/>
    <input itemprop="query-input" type="text" name="search_term_string" required/>
    <input type="submit"/>
  </form>
</div>

Где:

• itemscope itemtype="https://schema.org/WebSite" указывает, что в данном блоке описывается веб-ресурс;
• itemprop="url" — адрес сайта;
• itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction" указывает, что действие будет выполняться с помощью сущности поиска по сайту:
  • itemprop="target" — точка входа, в которой содержится шаблон урла;
  • itemprop="query-input" — какой запрос конкретно нужно обрабатывать.

Хотя поиск по сайту используется пока только одной поисковой системой, микроразметка может улучшить поведенческие факторы.

Карточка товара

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

JSON-LD для карточки товара:

<script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Product",
      "name": "Кардиган Весёлый Ёжик",
      "image": [
        "https://site.ru/catalog/images/photo1.jpg",
        "https://site.ru/catalog/images/photo2.jpg",
        "https://site.ru/catalog/images/photo3.jpg"
       ],
      "description": "Красивый и легкий кардиган осчастливит любого хмурого ежа в осеннюю пору.",
      "sku": "7931656233",
      "mpn": "EZ653135",
      "brand": {
        "@type": "Brand",
        "name": "Модные Ёжики"
      },
      "review": {
        "@type": "Review",
        "reviewRating": {
          "@type": "Rating",
          "ratingValue": 4,
          "bestRating": 5
        },
        "author": {
          "@type": "Person",
          "name": "Иван Ёжиков"
        }
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": 4.4,
        "reviewCount": 89
      },
      "offers": {
        "@type": "Offer",
        "url": "https://site.ru/kardigan-ezhik",
        "priceCurrency": "RUB",
        "price": 999.99,
        "priceValidUntil": "2025-01-01",
        "itemCondition": "https://schema.org/NewCondition",
        "availability": "https://schema.org/InStock"
      }
    }
    </script>

Где:

• @context — словарь;
• @type — сущность (товар);
• name — название товара;
• image — фото товара в виде массива;
• description  — описание товара;
• sku — артикул товара у продавца (в магазине);
• mpn — артикул производителя;
• brand — бренд, представлен сущностью Brand с названием name;
• review — отзыв о товаре, представлен сущностью Review;
• reviewRating — рейтинг товара в отзыве, представлен сущностью Rating, где:
  • ratingValue — текущий рейтинг,
  • bestRating — максимально допустимое значение рейтинга;
• author — автор отзыва, представлен сущностью Person с именем name;
• aggregateRating — среднее значение рейтинга на основе отзывов и оценок, представлен сущностью AggregateRating, где:
  • ratingValue — текущий рейтинг,
  • reviewCount — количество отзывов;
• offers — информация о предложении, представлена сущностью Offer, где:
  • url — url страницы товара,
  • priceCurrency — валюта,
  • price — стоимость,
  • priceValidUntil — дата, до которой действительна цена,
  • itemCondition — состояние товара, указывается один из трех вариантов вида товара (новый, восстановленный, б/у),
  • availability — статус наличия товара (список статусов можно посмотреть здесь https://schema.org/ItemAvailability).

Микроданные для карточки товара:

<div>
    <div itemtype="https://schema.org/Product" itemscope>
      <meta itemprop="mpn" content="EZ653135" />
      <meta itemprop="name" content="Кардиган Весёлый Ёжик" />
      <link itemprop="image" href="https://site.ru/catalog/images/photo1.jpg" />
      <link itemprop="image" href="https://site.ru/catalog/images/photo2.jpg" />
      <link itemprop="image" href="https://site.ru/catalog/images/photo3.jpg" />
      <meta itemprop="description" content="Красивый и легкий кардиган осчастливит любого хмурого ежа в осеннюю пору." />
      <div itemprop="offers" itemtype="https://schema.org/Offer" itemscope>
        <link itemprop="url" href="https://site.ru/kardigan-ezhik" />
        <meta itemprop="availability" content="https://schema.org/InStock" />
        <meta itemprop="priceCurrency" content="RUB" />
        <meta itemprop="itemCondition" content="https://schema.org/NewCondition" />
        <meta itemprop="price" content="999.99" />
        <meta itemprop="priceValidUntil" content="2025-01-01" />
      </div>
      <div itemprop="aggregateRating" itemtype="https://schema.org/AggregateRating" itemscope>
        <meta itemprop="reviewCount" content="89" />
        <meta itemprop="ratingValue" content="4.4" />
      </div>
      <div itemprop="review" itemtype="https://schema.org/Review" itemscope>
        <div itemprop="author" itemtype="https://schema.org/Person" itemscope>
          <meta itemprop="name" content="Иван Ёжиков" />
        </div>
        <div itemprop="reviewRating" itemtype="https://schema.org/Rating" itemscope>
          <meta itemprop="ratingValue" content="4" />
          <meta itemprop="bestRating" content="5" />
        </div>
      </div>
      <meta itemprop="sku" content="7931656233" />
      <div itemprop="brand" itemtype="https://schema.org/Brand" itemscope>
        <meta itemprop="name" content="Модные Ёжики" />
      </div>
    </div>
  </div>

Где:

• itemtype="https://schema.org/Product" itemscope указывает на то, что мы описываем товар;
• itemprop="mpn" — артикул производителя;
• itemprop="name" — название товара;
• itemprop="image" — фотографии товара, представленные тремя ссылками;
• itemprop="description" — описание товара;
• itemprop="offers" itemtype="https://schema.org/Offer" itemscope — предложение о товаре, представленное сущностью Offer:
  • itemprop="url" — url страницы товара,
  • itemprop="availability" — статус наличия товара,
  • itemprop="price" — цена,
  • itemprop="priceValidUntil" — до какого числа действительна цена;
• itemprop="aggregateRating" itemtype="https://schema.org/AggregateRating" itemscope - рейтинг товара, использующий сущность AggregateRating:
  • itemprop="reviewCount" — количество отзывов,
  • itemprop="ratingValue" — текущий рейтинг;
• itemprop="review" itemtype="https://schema.org/Review" itemscope — отзыв, представленный сущностью Review:
  • itemprop="author" itemtype="https://schema.org/Person" itemscope — автор отзыва, представленный сущностью Person,
  • name — имя автора отзыва,
  • itemprop="reviewRating" itemtype="https://schema.org/Rating" itemscope — рейтинг товара в отзыве, представленный сущностью Rating:
    • itemprop="ratingValue" — текущий рейтинг,
    • itemprop="bestRating" — максимально возможный рейтинг;
• itemprop="sku" — артикул товара у продавца;
• itemprop="brand" itemtype="https://schema.org/Brand" itemscope — производитель товара, представленный сущностью Brand;
• itemprop="name" — название производителя.

Видя такую сложную структуру в разметке с помощью микроданных, нетрудно догадаться, почему все больше сайтов отдают предпочтение JSON-LD. Повторюсь, что для интернет-магазинов микроразметка товара должна стоять первой в списке, а каким образом вы её реализуете — вам решать.

Информационные статьи

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

JSON-LD для статей:

    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Article",
      "headline": "Как вырастить самый вкусный кактус",
      "image": [
        "https://site.ru/images/photo1.jpg",
        "https://site.ru/images/photo2.jpg",
        "https://site.ru/images/photo3.jpg"
       ],
      "datePublished": "2024-04-10T08:00:00+08:00",
      "dateModified": "2024-04-15T09:20:00+08:00",
      "author": [{
          "@type": "Person",
          "name": "Максим Кактусов",
          "url": "https://site.ru/author/maxim"
           }]
    }
    </script>

Где:

• @context — словарь;
• @type — сущность (статья);
• headline — название статьи;
• image — картинки к статье в виде массива;
• datePublished — дата публикации;
• dateModified — дата последнего изменения;
• author — автор статьи, представлен сущностью Person, где:
  • name — имя автора,
  • url — страница автора на сайте.

Microdata для статей:

<div itemscope itemtype="https://schema.org/Article">
      <div itemprop="headline">Как вырастить самый вкусный кактус</div>
      <meta itemprop="image" content="https://site.ru/images/photo1.jpg" />
      <meta itemprop="image" content="https://site.ru/images/photo2.jpg" />
      <img itemprop="image" src="https://site.ru/images/photo3.jpg" />
      <div>
        <span itemprop="datePublished" content="2024-04-10T08:00:00+08:00">
          10 Апреля 2024,  8:00
        </span>
        (последнее изменение
        <span itemprop="dateModified" content="2024-04-15T09:20:00+08:00">
         15 Апреля 2024, 9:20
        </span>
        )
      </div>
      <div>
       Автор:
        <span itemprop="author" itemscope itemtype="https://schema.org/Person">
          <a itemprop="url" href="https://site.ru/author/maxim">
            <span itemprop="name">Максим Кактусов</span>
          </a>
        </span>
      </div>
    </div>

Где:

• itemscope itemtype="https://schema.org/Article" — указание, что в данном блоке будет описываться статья;
• itemprop="headline" — название статьи;
• itemprop="image" — картинки к статье (обратите внимание, что часть картинок скрыта);
• itemprop="datePublished" — дата публикации;
• itemprop="dateModified" — дата последнего изменения;
• itemprop="author" itemscope itemtype="https://schema.org/Person"  — автор статьи, представленный сущностью Person:
  • itemprop="url" — страница автора на сайте,
  • itemprop="name" — имя автора.

Разметка статей довольна проста, поэтому грех не использовать её на своем сайте.

Изображения

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

JSON-LD для картинок:

  <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "ImageObject",
      "contentUrl": "https://site.ru/images/ezhik.jpg",
      "license": "https:/site.ru/license",
      "acquireLicensePage": "https://site.ru/how-to-use-my-images",
      "creditText": "Ёжики Студио",
      "creator": {
        "@type": "Person",
        "name": "Михаил Ёжиков"
       },
      "copyrightNotice": "Ёжики Студио"
    }
    </script>

Где:

• @context — словарь;
• @type — сущность (изображение);
• contentUrl — url изображения;
• license — url страницы с условиями лицензии на использование изображения;
• acquireLicensePage — url страницы с информацией о том, как получить лицензию на использование изображения;
• creditText — человек или организация, занимающиеся созданием контента;
• creator — автор контента, представленный сущностью Person с именем name;
• copyrightNotice — владелец авторских прав.

Микроданные для картинок:

<div itemscope itemtype="https://schema.org/ImageObject">
      <img alt="Ёжик" itemprop="contentUrl" src="https://site.ru/images/ezhik.jpg" />
      <span itemprop="license"> https:/site.ru/license</span><br>
      <span itemprop="acquireLicensePage">https://site.ru/how-to-use-my-images</span>
      <span itemprop="creator" itemtype="https://schema.org/Person" itemscope>
        <meta itemprop="name" content="Михаил Ёжиков" />
      </span>
      <span itemprop="copyrightNotice">Ёжики Студио</span>
      <span itemprop="creditText">Ёжики Студио</span>
    </div>

Где:

• itemscope itemtype="https://schema.org/ImageObject" — указание на использование сущностью изображения;
• itemprop="contentUrl" — url изображения;
• itemprop="license" — url страницы с условиями лицензии на использование изображения;
• itemprop="acquireLicensePage" — url страницы с информацией о том, как получить лицензию на использование изображения;
• itemprop="creator" itemtype="https://schema.org/Person" itemscope — автор контента, представленный сущностью Person:
  • itemprop="name" — имя автора изображения;
• itemprop="copyrightNotice" — владелец авторских прав;
• itemprop="creditText" — человек или организация, занимающиеся созданием контента.

Не стоит думать, что разметка картинок может пригодиться только фотографам или иллюстраторам. Интернет-магазину или сайту услуг будет только плюсом, если его товары/услуги будут находить в поиске картинок.

Вакансии

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

JSON-LD разметка для вакансий:

 <script type="application/ld+json">
    {
      "@context" : "https://schema.org/",
      "@type" : "JobPosting",
      "title" : "Монтажник натяжных потолков",
      "description" : "В дружную компанию по производству натяжных потолков Потолки ++ требуется монтажник",
      "identifier": {
        "@type": "PropertyValue",
        "name": "Потолки ++",
        "value": "1234567"
      },
      "datePosted" : "2024-10-18",
      "validThrough" : "2025-01-01",
      "employmentType" : "FULL_TIME",
      "hiringOrganization" : {
        "@type" : "Organization",
        "name" : "Потолки ++",
        "url" : "https://site.ru",
        "logo" : "https://site.ru/images/logo.png"
      },
      "jobLocation": {
      "@type": "Place",
        "address": {
        "@type": "PostalAddress",
        "streetAddress": "Сенная площадь, д. 6",
        "addressLocality": "Санкт-Петербург",
        "addressRegion": "Санкт-Петербург",
        "addressCountry": "Россия",
        "postalCode": "111000"
      
        }
      },
      "baseSalary": {
        "@type": "MonetaryAmount",
        "currency": "RUB",
        "value": {
          "@type": "QuantitativeValue",
          "value": 100000,
          "unitText": "Месяц"
        }
      }
    }
    </script>

Где:

• @context — словарь;
• @type — сущность (вакансия);
• title — название вакансии;
• description — описание;
• identifier — индивидуальный идентификатор вакансии, который представлен сущностью PropertyValue (значение свойства), где:
  • name — название компании,
  • value — идентификатор;
• datePosted — дата публикации;
• validThrough — до какого времени актуальна вакансия;
• employmentType — тип занятости (все типы можно посмотреть тут https://schema.org/JobPosting);
• hiringOrganization — название организации, которая представлена сущностью Организация, где:
  • name — название,
  • url — сайт компании,
  • logo — логотип;
• jobLocation — место работы, представлено сущностью Place (место), которое имеет свойство address (адрес), представленное сущностью PostalAddress, где:
  • streetAddress — улица и номер дома,
  • addressLocality — город,
  • addressRegion — регион,
  • addressCountry — страна,
  • postalCode — индекс;
• baseSalary — заработная плата, представленная сущностью MonetaryAmount (денежное значение), где:
  • currency — валюта,
  • value — значение, представленное сущностью QuantitativeValue, где:
    • value — значение,
    • unitText — период.

Микроданные для вакансии:

<div itemscope itemtype="https://schema.org/JobPosting">
  <h2 itemprop="title">Монтажник натяжных потолков</h2>
   <span>
    <p><strong>Адрес:</strong> 
	<span itemprop="jobLocation" itemscope itemtype="https://schema.org/Place">
	<span itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
    <span itemprop="addressLocality">Санкт-Петербург</span>, <span itemprop="streetAddress">Сенная площадь, д. 6</span>
	<meta  itemprop="addressRegion" content="Санкт-Петербург">
	<meta  itemprop="addressCountry" content="Россия">
	<meta  itemprop="postalCode" content="111000">
	</p>
  </span>
  <br><strong>Тип занятости:</strong> <span itemprop="employmentType">Полная</span>
  <br><strong>Заработная плата:</strong>  <span itemprop="baseSalary" itemscope itemtype="https://schema.org/MonetaryAmount"><span itemprop="value" itemscope itemtype="https://schema.org/QuantitativeValue"><span itemprop="value">100000</span><meta  itemprop="unitText" content="месяц"></span> <span itemprop="currency">RUB</span></span>
  </p>
<p> <strong>Описание вакансии:</strong> </p>
  <p itemprop="description">	
    В дружную компанию по производству натяжных потолков Потолки ++ требуется монтажник
  </p>
  <p>О компании:</p>
  <p itemprop="hiringOrganization" itemscope itemtype="https://schema.org/Organization">
<span itemprop="name">Потолки ++</span><br>
Сайт: <span itemprop="url">https://site.ru</span>
<meta  itemprop="logo" content="https://site.ru/images/logo.png">
</p>
  <p>Номер вакансии:</p>
  <p itemprop="identifier" itemscope itemtype="https://schema.org/PropertyValue">
  <meta itemprop="name" content="Потолки ++">
  <span itemprop="value">1234567</span>
 </p>
  <p>Дата: <span itemprop="datePosted">2024-10-18</span></p>
   <p>Вакансия актуальна до: <span itemprop="validThrough">2025-01-01</span></p>
</div>

Где:

• itemscope itemtype="https://schema.org/JobPosting" — указание, что будет описываться вакансия;
• itemprop="title" — название вакансии;
• itemprop="jobLocation" itemscope itemtype="https://schema.org/Place" — место работы, описываемое сущностью Place;
  • itemprop="address" itemscope itemtype="https://schema.org/PostalAddress" — адрес места работы, описываемый сущностью PostalAddress:
    • itemprop="addressLocality" — город,
    • itemprop="streetAddress" — улица, дом,
    • itemprop="addressRegion" — регион,
    • itemprop="addressCountry" — страна,
    • itemprop="postalCode" — почтовый индекс;
• itemprop="employmentType" — тип занятости;
• itemprop="baseSalary" itemscope itemtype="https://schema.org/MonetaryAmount" — оплата, описываемая сущностью MonetaryAmount:
  • itemprop="value" itemscope itemtype="https://schema.org/QuantitativeValue" — значение оплаты, описываемое сущностью QuantitativeValue:
    • itemprop="value" — само значение оплаты,
    • itemprop="unitText" — период, за который будет производиться оплата,
    • itemprop="currency" — валюта;
•  itemprop="description" — описание вакансии;
• itemprop="hiringOrganization" itemscope itemtype="https://schema.org/Organization" — информация о компании, описываемая сущностью Organization:
  • itemprop="name" — название компании,
  • itemprop="url" — сайт компании,
  • itemprop="logo" — логотип;
• itemprop="identifier" itemscope itemtype="https://schema.org/PropertyValue" — идентификатор вакансии, описываемый сущностью PropertyValue:
  • itemprop="name" — название компании,
  • itemprop="value" — значение идентификатора;
• itemprop="datePosted" — дата публикации;
• itemprop="validThrough" — до какого времени актуальна вакансия.

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

Отзывы

Отзывы могут быть как у товаров и услуг, так и у компании в целом. Чтобы посетители могли сразу увидеть рейтинг и отзывы в поиске, следует правильно их разметить.

JSON-LD разметка отзыва о компании:

  <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Review",
      "itemReviewed": {
        "@type": "Bakery",
        "image": "https://site.ru/logo.jpg",
        "name": "Вкусняшки от Няшки",
        "priceRange": "500-1500 RUB",
        "telephone": "8 (800) 800-00-00",
        "address" :{
          "@type": "PostalAddress",
          "streetAddress": "проспект Ленина, 10",
          "addressLocality": "Екатеринбург",
          "addressRegion": "Свердловская область",
          "postalCode": "111000",
          "addressCountry": "RU"
        }
      },
      "reviewRating": {
        "@type": "Rating",
        "ratingValue": 4
      },
      "author": {
        "@type": "Person",
        "name": "Мария Мартишкина"
      }
    }
    </script>

Где:

• @context — словарь;
• @type — сущность (отзыв);
• itemReviewed — объект отзыва, который представлен сущностью Пекарня (Bakery):
  • image — логотип компании,
  • name — название,
  • priceRange — диапазон цен,
  • telephone — телефон,
  • address — адрес пекарни, представленный сущностью PostalAddress, где:
    • streetAddress — улица и номер дома,
    • addressLocality — город,
    • addressRegion — регион,
    • addressCountry — страна,
    • postalCode — индекс;
• reviewRating — рейтинг, представленный сущностью Rating со значением ratingValue;
• author — автор отзыва, представленный сущностью Person с именем name.

Микроданные отзыва о компании:

 <div itemscope itemtype="https://schema.org/Review">
      <div itemprop="itemReviewed" itemscope itemtype="https://schema.org/Bakery">
        <img itemprop="image" src="https://site.ru/logo.jpg" alt="Вкусняшки от Няшки"/>
        <span itemprop="name">Вкусняшки от Няшки</span>
        <span itemprop="priceRange">500-1500 RUB</span>
        <span itemprop="telephone">8 (800) 800-00-00</span>
        <span itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
			<span itemprop="postalCode">111000</span>,
			<span itemprop="addressRegion">Свердловская область</span>,
			<span itemprop="addressLocality">Екатеринбург</span>,
			<span itemprop="streetAddress">проспект Ленина, 10</span>
			<meta itemprop="addressCountry" content="RU" />
			
		</span>
      </div>
      <span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
        <span itemprop="ratingValue">4</span>
      </span> звезды - <b>"Вкусная выпечка." </b>
      <span itemprop="author" itemscope itemtype="https://schema.org/Person">
        <span itemprop="name">Мария Мартишкина</span>
      </span>
    </div>

Где:

• itemscope itemtype="https://schema.org/Review" — указание, что будет описываться отзыв;
• itemprop="itemReviewed" itemscope itemtype="https://schema.org/Bakery — объект отзыва, описываемый сущностью Bakery, где:
  • itemprop="image" — логотип,
  • itemprop="name" — название,
  • itemprop="priceRange" — ценовой диапазон,
  • itemprop="telephone" — телефон,
  • itemprop="address" itemscope itemtype="https://schema.org/PostalAddress" — адрес компании, описываемый сущностью PostalAddress:
    • itemprop="postalCode" — почтовый индекс,
    • itemprop="addressRegion" — регион,
    • itemprop="addressLocality" — город,
    • itemprop="streetAddress" — улица, дом,
    • itemprop="addressCountry" — страна;
• itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating" — рейтинг отзыва, представленный сущностью Rating:
  • itemprop="ratingValue" — значение рейтинга;
• itemprop="author" itemscope itemtype="https://schema.org/Person" — автор отзыва, представленный сущностью Person:
  • itemprop="name" — имя автора.

Отзыв и рейтинг товара можно посмотреть в микроразметке карточки товара, так как это размечается вместе.

Вопросы и ответы (FAQ)

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

JSON-LD для FAQ:

  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      "mainEntity": [{
        "@type": "Question",
        "name": "Главный вопрос жизни, Вселенной и вообще?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "42"
        }
      }, {
        "@type": "Question",
        "name": "Каково население Марса?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Марс — единственная планета, населенная только роботами."
        }
      }]
    }
    </script>

Где:

• @context — словарь;
• @type — сущность (ЧаВо);
• mainEntity — массив описываемых объектов:
  • @type: Question — элемент массива, представленный сущностью вопроса;
    • name — вопрос,
    • acceptedAnswer — ответ, представленный сущностью Answer:
      • text — текст ответа.

Микроданные для ЧаВо:

<div itemscope itemtype="https://schema.org/FAQPage">
  <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
    <h2 itemprop="name">Главный вопрос жизни, Вселенной и вообще?</h2>
    <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
      <div itemprop="text">
       42.
      </div>
    </div>
  </div>
  <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
    <h2 itemprop="name">Каково население Марса?</h2>
    <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
      <div itemprop="text">
       Марс — единственная планета, населенная только роботами.
      </div>
    </div>
  </div>
</div>

Где:

• itemscope itemtype="https://schema.org/FAQPage" — указание, что будет описываться страница с часто задаваемыми вопросами:
  • itemscope itemprop="mainEntity" itemtype="https://schema.org/Question" — описываемый объект, заданный сущностью Question:
    • itemprop="name" — вопрос,
    • itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer" — ответ, представленный сущностью Answer,
      • itemprop="text" — текст ответа.

Получите коммерческое предложение по SEO

Узнать подробнее

Open Graph

Основные примеры Schema.org для коммерческого сектора я привела, теперь осталось рассказать про джентльменский набор разметки Open Graph. Разметка в основном предназначена для мессенджеров и социальных сетей, чтобы ссылки на сайт выглядели более информативно. Но это не значит, что поисковые системы не обращают на неё внимания. Все-таки удобное представление в соцсетях и мессенджерах улучшает поведенческие факторы, а значит повышает полезность сайта для пользователя, что так любят ПС.

Поэтому разметке Open Graph на сайте быть! И не только на главной странице — размечены должны быть все (вы же не знаете, какую из них будут отправлять друг другу пользователи в соцсетях).

Удобнее всего делать разметку в шаблоне, чтобы она автоматически применялась ко всем страницам. Для этого можно использовать плагины для популярных CMS или же самостоятельно доработать код.

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

А вот так в соцсети:

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

<meta property="og:title" content="Как увеличить трафик до 57 тысяч переходов в месяц - кейс для агрегатора кейтеринга CaterMe" />

<meta property="og:type" content="article" />

<meta property="og:url" content="https://remarketing.bz/blog/seo/kak-poluchit-57-tysyach-perehodov-v-mesyats-iz-seo-na-primere-agregatora-kejteringovyh-uslug-caterme/" />

<meta property="og:description" content="Кейс о том, как без магии и серых схем увеличить количество переходов до 57 тысяч в месяц. Рекомендации по работе с трафиком и конверсией от специалистов компании ReMarketing." />

<meta property="og:image" content="https://remarketing.bz/content/uploads/2024/07/caterme-1.jpg" />

<meta property="og:image:type" content="image/jpeg" />

<meta property="og:image:height" content="1440" />

<meta property="og:image:width" content="2540" />

<meta property="og:image" content="https://remarketing.bz/content/uploads/2024/07/caterme-1-160x160.jpg" />

<meta property="og:image:height" content="160" />

<meta property="og:image:width" content="160" />

<meta property="og:locale" content="ru_RU" />

<meta property="og:site_name" content="ReMarketing" />

Поскольку вся разметка в <meta>, логично добавить её в самый часто встречающийся элемент шаблона — шапку, а именно в тег <head></head>.

Теперь по порядку разберем свойства:

• og:title — название объекта. Если не будет указано название, соцсеть или мессенджер могут сами найти какое-нибудь. Возможно, это будет название сайта или подпись на кнопке. Поэтому лучше самим указать, какое название им использовать;

• og:type — тип, в нашем случае статья;
• og:url — url страницы;
• og:description — описание объекта (статьи). Опять же, если не укажем, для отображения могут взять любой текст, находящийся на странице;
• og:image — изображение. Если не указать явно, на обложку может попасть любое изображение из найденных на странице. А оно не всегда может быть нужного размера или пропорций или вообще не отвечать тематике статьи;
• og:image:type — тип изображения;
• og:image:height — высота изображения;
• og:image:width — ширина изображения. Обратите внимание, что изображений указано несколько вместе с размерами: одно большое, другое поменьше. Это сделано для удобства последующих публикаций. Можно будет выбрать, какое из изображений использовать;
• og:locale — язык страницы;
• og:site_name — название сайта/компании.

Вот таким простым способом можно сделать свой веб-ресурс приятным для отображения в социальных сетях и мессенджерах. Игнорировать его я не рекомендую.

Где проверить микроразметку

Готовую страницу или код можно проверить с помощью инструментов валидации, предлагаемых популярными поисковыми системами:

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

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

Вся соль

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

А еще она бесплатна, не требует подписок и абонентской платы. Для популярных CMS можно найти плагины, для ручного добавления — генераторы кода, также можно сделать по примерам и инструкциям самостоятельно.

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

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