Микроразметка schema.org: реализация с примерами и способы проверки

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

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

Поисковик Google дает рекомендации использовать формат JSON-LD. Яндекс, к сожалению, его пока не поддерживает, поэтому, чтобы угодить всем поисковым системам, стоит выбрать разметку в соответствующем формате, для которого есть поддержка от разных поисковиков, в том числе Yahoo и других.

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

Задача микроразметки — четко указать поисковым роботам, что на странице site.ru/product_page1 есть товар, а также передать содержание и его основные параметры: название, цену, артикул, производителя и т.д. С учетом этих данных поисковики создают расширенные сниппеты в поисковой выдаче.

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

Основной вид микроразметки — Schema.org. Он существует давно, является наиболее популярным и позволяет описать практически любой продукт или услугу. Это своеобразный генератор структурированных данных — вручную прописывать ничего не придется. Имеет в своем багаже очень много тегов, но основой являются три: itemscope - указывает поисковому роботу на то, что будет произведено описание объекта. Остальные два itemtype и itemprop — это его тип и свойства.

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

  1. Open Graph. Микроразметка Facebook, которую используют для настройки качества отображения публикации в соцсетях, когда пользователь поделился статьей с вашего сайта (заголовок, описание, правильная картинка). Изначально разметка была создана для Facebook, но сегодня она поддерживается и другими социальными сетями и мессенджерами (ВКонтакте, Твиттер, Телеграм и др.).
  2. Микроформаты. Разработка W3C, созданная в 2007 году. Часто используется для разметки товаров, выведения похожей группы товаров, отзывов, контактной информации и прочих видов контента. Раньше применялся такой микроформат более активно, но сейчас он имеет ряд недостатков, недостаточно быстро развивается и существенно уступает Schema.org.
  3. Dublin Core. Этот словарь разметки используют библиотеки и музеи — он позволяет описывать книги и музейные экспонаты.
  4. JSON-LD — формат вывода микроразметки через JS. Синтаксис JSON-LD и JSON идентичен. Разница заключается только в том, что в JSON-LD есть так называемые зарезервированные ключи, которые позволяют задать контекст описания или связать объекты. Например, ключ context нужен для указания на словарь объектов, а type — на тип сущности (к примеру, Person)/

Идеальное решение — когда на сайте используются все три вида. Присутствие Open Graph не только желательно, но и обязательно, поскольку данный тип отвечает за представление в соцсетях. Важность Schema.org переоценить невозможно, поскольку это разметка основного контента. “Джейсон” необходим, если необходимо отобразить какие-то мероприятия, события, концерты и т.д.

Как выглядят страницы с микроразметкой в поиске

Сниппет — это своего рода визитка сайта, с URL, заголовком и краткой информацией о ранжируемой странице. Поисковый робот автоматически генерирует ее или берет из title и description.

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

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

В чем преимущества расширенного сниппета?

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

  • увеличивают количество переходов с выдачи, так как дают наиболее полный ответ на запрос пользователей;
  • улучшают позиции за счет поведенческих факторов — сайт попадет в ТОП;
  • помогают поисковикам «видеть» сайты. Ресурсы с полезным контентом, но имеющим низкую позицию, начинают продвигаться. Поисковик их выхватывает и показывает в расширенном сниппете, но при этом не ранжирует сайт в ТОП-1;
  • расширенные результаты используются и голосовыми помощниками.

Добавление микроразметки на сайт

Посмотрим на наиболее востребованные на коммерческих и информационных страницах схемы: статьи, отзывы, товары, хлебные крошки.

Разметка хлебных крошек

КОД:
<ul itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a href="/" title="Главная страница" itemprop="item">
            <span itemprop="name">Главная</span>
            <meta itemprop="position" content="0">
        </a></li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a href="/category-name/" title="категория" itemprop="item">
            <span itemprop="name">категория</span>
            <meta itemprop="position" content="1">
        </a></li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a href="/category-name/subcategory/" title="Подкатегория" itemprop="item">
            <span itemprop="name">Подкатегория</span>
            <meta itemprop="position" content="2">
        </a>
    </li>
</ul>
  1. itemtype=https://schema.org/BreadcrumbList (строки навигации) — говорит о том, что элемент относится к типу объекта «хлебным крошкам» и состоит из цепочки связанных веб-страниц.
  2. itemscope — необходим только для того, чтобы показать поисковому роботу, что на странице описывается какой-либо объект.
  3. itemtype — всегда идет рядом с itemscope и нужен для того, чтобы показать поисковому боту тип объекта.
  4. itemprop="itemListElement" — означает, что элемент относится к отдельному пункту списка.
  5. itemprop="name" — тег с названием хлебной крошки.
  6. itemprop="item" — используется для разметки ссылки в документе.
  7. meta itemprop="position" content="%number%" — добавляют в конце блока хлебной крошки, определяет позицию элемента в навигационной цепочке. Данный тег не отображается на веб-странице, только в разметке.


Микроразметка для страницы контактов

Вид разметки, который обязательно должен присутствовать на каждом сайте. В Schema.org доступен выбор типа организации. Можно остановиться или на LocalBusiness, или на Organization, который подходит для всех.

Рассмотрим вариант Organization:

КОД:
<div itemscope="" itemtype=">
 <span itemprop="name"> </span>
 Контакты:
<div itemprop="address" itemscope="" itemtype=>
 Адрес:
 <span itemprop="streetAddress">ул. Декабрьская, дом 2</span>
 <span itemprop="postalCode">999888</span>
 <span itemprop="addressLocality">Ноябрьск, Россия</span>
 </div>
 Телефон:<span itemprop="telephone">+79127775544</span>,
 Факс:<span itemprop="faxNumber">факс</span>,
 E-mail: <span itemprop="email">e-mail</span>
</div>

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

Микроразметка для данных об организации

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

КОД:
<div style="display:none">
<div itemscope itemtype="http://schema.org/Organization">
<span itemprop="name">Создание и продвижение сайтов от Артема Опарина</span>
Контакты:<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
Адрес:<span itemprop="streetAddress">ул. Карла Маркса, 125</span>
<span itemprop="postalCode">610027</span>
<span itemprop="addressLocality">Киров</span>,</div>
Телефон:<span itemprop="telephone">+7 (953) 948-23-85</span>,
Электронная почта: <span itemprop="email">pr.oparin@yandex.ru</span></div></div>


Микроразметка для интернет-магазина

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

Микроразметка карточки товара

Например, у нас есть страница с конкретным товаром. Открываем исходный код, и выделяем нужные текстовые блоки, а затем с помощью синтаксиса Schema.org их нужно просто разметить:

КОД:
<div itemscope itemtype="http://schema.org/Product">
 <h1 itemprop="name">Толстовка</h1>
 <img src="/images/article/1556011480370.jpg" itemprop="image">
 <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <div>700 руб.</div>
 <meta itemprop="price" content="2700.00"> <meta itemprop="priceCurrency" content="RUB"> </div>
 <div>Производитель: <span itemprop="brand">Фабрика Молодости</span></div>
 <div>Модель: <span itemprop="model">Молодо-зелено</span></div>
 <div itemprop="description">Супер модная толстовка для тех, кто все еще молод в душе </div>
</div>

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

Микроразметка категории товаров

Такой микроразметки для маркетинга нет, поэтому адаптируют и внедряют разметку для карточки товара путем ввода таких параметров:

  • offerCount – количество товаров в разделе;
  • lowPrice и highPrice - самая низкая и высокая цена в категории;
  • availability — наличие товаров.

Подробнее про товарную микроразметку

https://developers.google.com/search/docs/advanced...

Микроразметка статей и новостей

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

  • headline – название статьи;
  • datePublished – когда опубликована;
  • image – картинка;
  • articleBody – непосредственно текст;
  • author – автор статьи;
  • publisher – имя ресурса, на котором публиковалась.

Ниже приведен пример микроразметки по shema.org

КОД:
<section itemscope itemtype="http://schema.org/Article">
<h1 itemprop="headline">Микроразметка что это такое?</h1>
<time itemprop="datePublished" datetime="2022-03-25T21:10:00+00:00">25 марта 2022</time>
<div itemscope itemprop="image" itemtype="http://schema.org/ImageObject">
 <img itemprop="url contentUrl" src="/images/article/microrazmetka-schema-org.png" alt="Микроразметка">
</div>
<h2 itemprop="alternativeHeadline">Зачем нужна микроразметка</h2>
<article itemprop="articleBody">
 <p>Текст</p>
</article>
<div>Автор: <span itemprop="author">Артем Опарин</span></div>
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
 <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
  <img itemprop="url image" src="logo.svg" />
 </div>
 <meta itemprop="name" content="Артем Опарин">
 <meta itemprop="telephone" content="+79127770099">
 <meta itemprop="address" content="г. Ноябрьск, ул. Декабрьская, дом 2">
</div>
<meta itemprop="dateModified" content="2022-03-25T21:10:00+00:00" />
<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="Ссылка для статьи" />
</section>

Микроразметка для отзывов

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

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

КОД:
<div itemprop="review" itemscope itemtype="http://schema.org/Review">

Затем следует использовать такие параметры:

  • name — название;
  • author — фамилия автора;
  • datePublished — дата размещения;
  • reviewBody — текст комментария;
  • reviewRating – объективная оценка.itemprop="bestRating" - самая высокая оценка, которая возможна в системе.

КОД:
<div itemprop="review" itemscope itemtype="http://schema.org/Review"> <span itemprop="name">Ой, какая хорошая статья!</span>
<span itemprop="author">Артем Опарин</span>
<meta itemprop="datePublished" content="2022-25-03">
 <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
  <meta itemprop="worstRating" content = "0">
  <span itemprop="ratingValue">10</span> <span itemprop="bestRating">10</span> </div>
  <span itemprop="reviewBody">Невероятно познавательный и хорошо структурированный гайд по SEO-продвижению! Подтянул свои знания, было интересно читать.</span>
 </div>
</div>

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

Микроразметка для изображений

Благодаря атрибуту itemprop="image" поисковый робот легко находит необходимую информацию. Нужно лишь указать адрес изображения, название, его размеры, сделать описание, а также поставить подпись.

КОД:
<div itemscope itemtype="http://schema.org/ImageObject">
  <h2 itemprop="name">Милые котики</h2>
  <img src="kittens.jpg" itemprop="contentUrl" />
  <span itemprop="description">Два милых котика.</span>
</div>

Микроразметка для видео

Благодаря расширенному сниппету видео можно получать трафик не на сайт, а на Ютуб канал. Этот сниппет лишь за последний год по своей популярности вырос втрое. Видео сейчас можно увидеть по большей части поисковых запросов.

КОД:
<details open=""><summary><em><span style="color: rgb(155, 187, 89);"><strong>КОД:</strong></span></em></summary>
<div itemscope itemtype="http://schema.org/VideoObject" >
<a itemprop="url" href="https://www.mysite.com/view/306/">
    <h1 itemprop="name">Микроразметка для чайников</h1></a>
    <p itemprop="description">Schema.org - это совместная инициатива по разработке единой схемы для семантической разметки в HTML-коде. </p>
    <meta itemprop="duration" content="PT6M58S">
    <meta itemprop="isFamilyFriendly" content="true">
    <p>Дата публикации:<span itemprop="uploadDate">2007-06-05T00:00:00</span></p>
    <span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
 <img itemprop="contentUrl" src="https://oparinseo.ru/images/preview/img1241.jpg">
    <meta itemprop="width" content="250">
    <meta itemprop="height" content="120">
    </span>
</div>

Такую микроразметку можно реализовать с помощью плагина Insert Video with Schema.org (IVS). В таком случае в расширенном сниппете будет показана заставка с названием ролика, его длительность, а также короткое описание.

Микроразметка страницы FAQ

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

Сначала, как всегда, стоит обозначить начало разметки. Затем следует написать тему вопроса:

КОД:
<span itemprop="name">Как поменять звук в телеграмме?</span>
<div><span itemprop="answerCount">Кол-во ответов</span></div>
<div itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">
<div itemprop="text">Ответ на вопрос</div>

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

Дополнительная информация с schema.org по этим видам разметок:

  1. HowTo – инструкции типа «как сделать», пошаговые руководства к действию.
  2. Q&A – страница с несколькими вопросами-ответами или ориентированная на один конкретный вопрос с несколькими вариантами ответов на него.

Микроразметка комментариев

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

КОД:
<div itemprop="comment" itemscope itemtype="http://schema.org/UserComments">
<h2>Комментарии</h2>
<ul>
<li>
<div itemprop="creator" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">{Имя пользователя}</span>
</div>
<time itemprop="commentTime" datetime="{2022-01-14T07:20:10+03:00}">{2022-01-14}</time>
 <p itemprop="commentText">{Текст комментария}</p>
</li>
<li>
<div itemprop="creator" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">{Имя другого пользователя}</span>
 </div>
<time itemprop="commentTime" datetime="{2022-02-27T08:21:11+03:00}">{2022-02-27}</time>
<p itemprop="commentText">{Другой комментарий}</p>
</li>
</ul>
</div>

Микроразметка для кулинарных рецептов

Микроразметка Recipe может использоваться только для рецептов и должна содержать следующую информацию: список продуктов, сколько времени готовится блюдо, его изображение, а также пошаговое приготовление.

Пример структуры:

КОД:
<div itemscope itemtype="http://schema.org/Recipe">
  <h1 itemprop="name" >Курица в соевом соусе</h1>
  Этот рецепт найден в книге Тибетского монастыря в 1880 году.
  <img itemprop="resultPhoto" src="profit.jpg" />
  <ul>
    <li>После приготовления вы получите <span itemprop="recipeYield" >4 порции</span></li>
    <li>Время приготовления: <meta itemprop="totalTime" content="PT45M"/>45 минут</li>
  </ul>
  <h2>Ингредиенты</h2>
  <ul>
    <li itemprop="recipeIngredient">
      1 курица
    </li>
    <li itemprop="recipeIngredient" >
      1 л соевого соуса
    </li>
    <li itemprop="recipeIngredient" >
      соль
    </li>
    <li itemprop="recipeIngredient" >
      перец
    </li>
    <li itemprop="recipeIngredient" >
      специи по вкусу
    </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>
    <li><img itemprop="image" src="peks.jpg" alt="курица в духовке"/>
      Запекать при температуре 180 градусов в течение 40—45 минут.
    </li>
  </ul>
  <div itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation">
  </div>
  Приятного аппетита!
</div>

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

Микроразметка для мероприятия

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

  1. Тип данных и наборы свойств. Для мероприятий стандартно использование разметки типа Event, которая включает название (name), дату мероприятия (startDate) и место его проведения (location). Среди рекомендуемых свойств: описание (description), название компании или имя организатора (organizer), участники (performer), страница покупки билетов (offers.url), дата окончания (endDate) и проч.
  2. Что дает разметка типа Event. Позволяет создать привлекательный сниппет с фотографиями и логотипом, получить отметку в «Картах» поисковиков, сообщить о мероприятии большему количеству человек и привлечь новых заинтересованных участников. Также с помощью разметки Event можно анонсировать и онлайн-события, например, разные курсы.
  3. Кому стоит использовать. Сайтам, посвященным ежегодному фестивалю, конференции и другим событиям, а также ресурсам, которые регулярно анонсируют мероприятия на отдельных страницах.

Используем плагины если есть CMS

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

Например, это модули All In One Schema Rich Snippets для WordPress и Google Structured Data — для Joomla.

Какие типы разметок использует Яндекс

Яндекс отдает предпочтение микроразметке Schema.org — стандарту, который был принят еще в 2011 г. Имеет большое количество сущностей, и их перечень постоянно пополняется. Для различных типов страниц и данных должны применяться собственные, специальные сущности:

  1. Товары — Product.
  2. Отзывы — Review.
  3. Мероприятие — Event.
  4. Организация — Organization.
  5. Место — Place.
  6. Товарное предложение — Offer.
  7. Несколько товаров — AggregateOffer.
  8. Сводный рейтинг — AggregateRating.
  9. Рецепт — Recipe.
  10. Книга — Book.
  11. Фильм — Movie.
  12. Ресторан — Restaurant.
  13. Аудио — AudioObject.
  14. Видео — VideoObject.
  15. Картинки — ImageObject.
  16. Программы — SoftwareApplication.
  17. Мобильные приложения — MobileApplication.
  18. Интернет-программы — WebApplication.
  19. Игры — VideoGame.
  20. Вопросы и ответы — Question и Answer.

Как проверить правильность микроразметки

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

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

Данный бесплатный сервис самый строгий из всех: он выявляет любое несоответствие.

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

Проверка расширенных результатов от Google

Если страница опубликована, ее можно проверить по URL. Когда необходимо протестировать код на этапе настройки микроразметки, используют команду «Проверить код».

https://search.google.com/test/rich-results?hl=ru

Валидатор микроразметки Яндекс.Вебмастер

Этот инструмент показывает, могут ли роботы распознать элементы разметки страницы. Валидатор поддерживает такие форматы, как schema.org, microdata, RDFa и другие.

https://webmaster.yandex.ru/tools/microtest/

Чтобы запустить проверку, необходимо указать URL страницы или скопировать и вставить ее код в специальную форму, и все готово. В результате парсинга появится список данных, в котором будут выделены ошибки и предупреждения. Их виды описаны в Яндекс.Справке.

Словари Schema.org для различных нужд

Для магазина одежды

https://schema.org/ClothingStore

Для магазина автозапчастей

https://schema.org/AutoPartsStore

Книжный магазин

https://schema.org/BookStore

Мебельный магазин

https://schema.org/FurnitureStore

Продуктовый магазин

https://schema.org/GroceryStore

Ювелирный магазин

https://schema.org/JewelryStore

Магазин оргтехники

https://schema.org/OfficeEquipmentStore

Для ломбарда

https://schema.org/PawnShop

Под оптовые магазины

https://schema.org/WholesaleStore

Выводы

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

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

Оставить комментарий
Комментарии

Пусто

Артем Опарин

Обсудим ваш проект бесплатно

Сделайте заказ прямо сейчас, и уже сегодня мы приступим к работе!
Заполняя данную форму вы соглашаетесь на обработку персональных данных в соответствии с законом №152-ФЗ "О персональных данных"