и еще 120+ наград

SEO-продвижение с гарантией

Рассчитать стоимость

и еще 500+ наград

Звоните по будням, 09:00 - 19:00

+7 (499) 350-34-86

#menu1

https://skobeeff.com/uslugi/

Звоните по будням
09:00 - 19:00
+7 (499) 350-34-86

Рассчитать стоимость

Главная /

Блог /

Микроразметка сайта: полное руководство по настройке для SEO

Главная

Блог

SEO

#SEO

#Продвижение

Микроразметка сайта: полное руководство по настройке для SEO

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

Автор: Андрей Мережко

Ведущий SEO-оптимизатор

~ 20мин

Поделиться статьей

easy

сложность:

09.11.2022

Содержание

Что такое микроразметка и для чего она нужна?

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

Виды синтаксиса (форматы микроразметки)

Структура словаря Schema.org

Как быстро внедрить разметку Schema.org на сайт без вмешательства в исходный код

Какие данные можно разметить Schema.org

Примеры разметки популярных данных на базе Schema.org

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

Что важно запомнить

Что такое микроразметка и для чего она нужна?

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

Виды синтаксиса (форматы микроразметки)

Структура словаря Schema.org

Как быстро внедрить разметку Schema.org на сайт без вмешательства в исходный код

Какие данные можно разметить Schema.org

Примеры разметки популярных данных на базе Schema.org

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

Что важно запомнить

Что такое микроразметка и для чего она нужна?

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

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

Для чего нужна микроразметка:

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

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

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

Ниже приведен пример размеченной и неразмеченной страницы сайта:

Пример сниппета неразмеченной страницы

Важно понимать, что несмотря на то, что и Яндекс и Google рекомендуют внедрять разметку, о прямом влиянии на ранжирование (при ее физическом наличии) речи не идет.

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

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

Словарь микроразметки – это подборка классов и свойств, описывающих основной контент на странице.

Наиболее популярным словарем семантической разметки является Schema.org (определён как стандарт микроразметки с 2011 года, поддерживается как Яндексом, так и Google). При этом, существует ряд других словарей, также предназначенных для структуризации:

___Open Graph – используется для передачи структурированных данных при публикации постов, активно используется в таких мессенджерах, как ВКонтакте, Twitter, Telegram, WhatsApp, Pinterest и др.

___Microformats (uF) – разработан W3C, подходит для описания событий, рецептов, лент новостей и пр.

___FOAF (Friend of a Friend) – социальный словарь, специализируется на описании человека и связей между людьми.

___Data Vocabulary – на текущий момент, объединен со Schema.org и используется, в основном, для отображения контактных данных в сниппете и организации разметки «хлебных крошек».

___Dublin Core – был создан для библиотечных нужд и музеев, позволяет подробно описать книги и экспонаты.

___Good Relations – используется для электронной коммерции (расширенное описание книг, каталогов рекламы, билетов на концерты и т.д.).

Виды синтаксиса (форматы микроразметки)

Синтаксис – способ работы со словарем (т.е. то, как указывают в коде его элементы).

Виды синтаксиса, с помощью синтаксиса свойства и сущности передаются поисковику:

Microdata (микроданные);

JSON-LD (JavaScript Object Notation for Linked Data);

RDFa (Resource Description Framework);

микроформат

Microdata

Микродата структурирует данные непосредственно в HTML-коде между тегами <body> и </body> (т.е. используется как дополнение к существующим HTML-тегам).

В основе разметки микродата – следующие атрибуты:

___

https://www.htmlstrip.com/schema-markup-generator

___

https://webcode.tools/generators/structured-data

штмлс

вебкод

JSON-LD

JSON-LD – структурирование данных посредством JavaScript. Основная особенность синтаксиса – это внедряют в скрипт, а не в код страницы. Данный синтаксис рекомендуется к использованию Google.

Базовый вид синтаксиса:

<script type="application/ld+json">
{
# элементы
}
</script>

Внутри данной конструкции заключен код, передающий роботу информацию о типе размеченных данных.

Плюсы:

___рекомендации Google по использованию данного формата;

___множество плагинов для CMS;

___неприхотлив к месту размещения в коде (может быть размещен в любом месте страницы – как в <head>, так и в <body>)

Минусы:

___несмотря на все заявления Яндекса относительно индексации скриптов, вероятность непонимания (или же неполноценности индексирования) – остается;

___риски получения санкций от поисковых систем в случае попытке манипулирования (а такая возможность есть, т.к. в отличие от микроданных, можно размечать контент, отличный от фактической текстовой информации страницы);

___необходимость знания азов JavaScript для интеграции.

Сервисы для генерации кода JSON-LD:

___https://www.schemaapp.com/solutions
___https://technicalseo.com/tools/schema-markup-generator/

шемап

техникал

RDFa

RDFa, как и микродата, встраивается в тело страницы. Чаще всего используется в словаре Open Graph.

Обязательные атрибуты:

___typeof (аналог itemtype);
___property (аналог itemprop).

Плюсы:

может описать любую сущность (объект, событие), сходство с микроданными.

Минусы:

___сложная поддержка и обновление;
___сложное внедрение в исходный код

Структура словаря Schema.org

В словаре Schema.org описано множество сущностей, у каждой сущности есть свойства. Самая общая сущность – Thing.

Фрагмент сущностей и свойств сущности Thing:

Product (товары): название товара, наименование бренда, модель, цена.
VideoObject (видеоролик): режиссер, актеры, качество видео.
Article (статья) — текст статьи, дата публикации.
Movie (фильмы) — актеры, длительность, страна.
Review (отзывы) — текст отзыва, рейтинг.
Organization (организация) — наименование бренда, адрес, режим работы, email, телефон.

Примечание: список всех сущностей - https://schema.org/docs/full.html

Примеры основных сущностей Schema.org и их свойств:

Schema.org предполагает выделение основных типов сущностей и их свойств с дальнейшим присвоением им значений. Для описания сущностей и свойств подходят разные варианты синтаксиса, передача же данных происходит непосредственно в коде страницы с помощью microdata, JSON-LD или RDFa.

шема

Как быстро внедрить разметку Schema.org на сайт без вмешательства в исходный код

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

___маркер данных в Google Search Console; плагины для CMS (WordPress)

1 способ:

___маркер данных в Google Search Console

Маркер данных в Search Console позволяет разметить данные типовых страниц без вмешательства в исходный код.

Инструкция по использованию:

___шаг 1: перейти на страницу инструмента (https://www.google.com/webmasters/ markup-helper/) по аккаунту ресурса с подтвержденными в Search Console правами;
___шаг 2: выбрать тип страницы, для которой будет создаваться страница + указать URL, на примере которого будет происходить генерация

гугл

шаг 3: левой кнопкой мыши выделить размечаемые элементы страницы и в выпадающем окне выбрать их свойства:

шаг 4: выбрать синтаксис разметки (microdata или JSON-LD):

___шаг 5: проверить собранные системой в одной группе страницы с аналогичным шаблоном (согласиться или же создать свою группу)

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

2 способ: использование плагинов для CMS

Список плагинов для WordPress:

__ https://ru.wordpress.org/plugins/schema/
__ https://ru.wordpress.org/plugins/wp-seo-structured...
__ https://ru.wordpress.org/plugins/all-in-one-schema...

Плагин для Bitrix:

___https://marketplace.1c-bitrix.ru/solutions/coffeed...

Плагин для Joomla:

___https://joomla.center/knowledge-base/extensions/go...

Какие данные можно разметить Schema.org

С помощью Schema.org можно разметить следующие типы страниц:

___товарные страницы (листинги + карточки товаров);
___страницу контактных данных;
___инфо-страницы, страницы блогов/порталов.

Популярные размечаемые данные:

___контактные данные;
___товары и цены;
___отзывы;
___хлебные крошки;
___поиск по сайту;
___рейтинг;
___блок вопросов-ответов;
___инструкции;
___фильмы;
___рецепты;
___рефераты;
___программы;
___графика;
___видеоролики;
___footer и header;
___меню

Примеры разметки популярных данных на базе Schema.org

Представлены примеры разметки синтаксисом microdata.

Разметка отзыва


<div>
       <span>Отличная компания!</span> от <span>Николай Правдин</span>, 
       <span>Остались только положительные эмоции от сотрудничества! Услуга предоставлена качественно и в срок!</span>
</div>

пример неразмеченного отзыва


<div itemscope itemtype="http://schema.org/Review">
       <a href="ссылка на отзыв" itemprop="url">№222</a>
       <span itemprop="name">Отличная компания!</span> от <span itemprop="author">Иван Петров</span>,
       <time itemprop="datePublished" datetime="2022-07-01">01 июля 2022</time>
    
       <div itemprop="itemReviewed" itemscope itemtype="https://schema.org/Organization">
              <div itemprop="name">название компании</div>
              <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
                     <img itemprop="contentUrl" src="ссылка на логотип_" alt="Logo_site">
              </div>
              <link itemprop="url" href="ссылка на сайт">
              <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
                     <span itemprop="postalCode">почтовый_индекс</span>,
                     <span itemprop="addressCountry">Страна</span>, 
                     <span itemprop="addressRegion">Область</span>, 
                     <span itemprop="addressLocality">Город</span>, 
                     <span itemprop="streetAddress">улица + номер дома</span>
              </div>
              <div>Телефон: <a itemprop="telephone" href="tel:+79998888888">+7 (999) 888-88-88</a></div>
              <div>Почта: <a itemprop="email" href="mailto:best.company@mail.ru">best.company@mail.ru</a></div>
              <div>Факс: <a itemprop="faxNumber" href="tel:+79998888888">+7 (999) 888-88-88</a></div>
       </div>
       <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
              <meta itemprop="worstRating" content="0">
              <span itemprop="ratingValue">8</span>
              <span itemprop="bestRating">10</span>
       </div>
       <span itemprop="reviewBody">Остались только положительные эмоции от сотрудничества! Услуга предоставлена качественно и в срок!</span>
</div>

пример размеченного отзыва

Разметка поиска


<div>
	<form action="/search/">
		<input type="text" placeholder="Поиск по сайту" name="q">
		<input type="submit" name="s" value="Найти">
	</form>
</div>

пример неразмеченного поиска


<div itemscope="" itemtype="http://schema.org/WebSite">
	<form action="/search/" itemprop="potentialAction" itemscope="" itemtype="http://schema.org/SearchAction">
		<meta itemprop="target" content="/search/?q={query}">
		<input type="text" class="text" placeholder="Поиск по сайту" name="q">
		<input itemprop="query-input" type="hidden" name="query">
		<input type="submit" class="submit" name="s" value="Найти">
	</form>
</div>>

пример размеченного поиска

Разметка footer


<footer>
	 <div>© 2022 «The best company». Все права защищены.</div>
</footer>

пример неразмеченного footer


<footer itemscope itemtype="http://schema.org/WPFooter">
       <meta itemprop="copyrightYear" content="2022">
       <meta itemprop="copyrightHolder" content="Компания-держатель копирайта">
       <div>© 2022 «The best company». Все права защищены.</div>
</footer>

пример размеченного footer

Разметка header


<head>
      <title>наименование страницы</title>>
      <meta name="description" content="описание страницы">
</head>

пример неразмеченного header


<head itemscope itemtype="http://schema.org/WPHeader">
       <title itemprop="headline">наименование страницы</title>
       <meta itemprop="description" name="description" content="описание страницы">
</head>

пример размеченного header

Разметка меню сайта


<ul>
      <li>
            <a href="ссылка-1">наим-е ссылки меню 1</a>
      </li>
      <li>
            <a href="ссылка-2">наим-е ссылки меню 2</a>
      </li>
      <li>
            <a href="ссылка-3">наим-е ссылки меню 3</a>
      </li>
</ul>

пример неразмеченного меню


<ul itemscope itemtype="http://schema.org/SiteNavigationElement">
       <li>
              <a itemprop="url" href="ссылка-1">наим-е ссылки меню 1</a>
       </li>
       <li>
              <a itemprop="url" href="ссылка-2">наим-е ссылки меню 2</a>
       </li>
       <li>
              <a itemprop="url" href="ссылка-3">наим-е ссылки меню 3</a>
       </li>
</ul>

пример размеченного меню

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


<ul>
      <li>
            <a href="ссылка-1">
                <span>главная</span>
            </a>
      </li>
      <li>
            <a href="ссылка-2">
                <span>название раздела 1</span>
            </a>
      </li>
      <li>
            <a href="ссылка-3">
                <span>название раздела 2</span>
            </a>
      </li>
      …
</ul>

пример неразмеченных хлебных крошек


<ul itemscope itemtype="http://schema.org/BreadcrumbList">
       <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
              <a itemprop="item" href="ссылка-1">
                     <span itemprop="name">главная</span>
              </a>
              <meta itemprop="position" content="1" />
       </li>
       <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
             <a itemprop="item" href="ссылка-2" >
                    <span itemprop="name">название раздела 1</span>
             </a>
             <meta itemprop="position" content="2" />
       </li>
       <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
             <a itemprop="item" href="ссылка-3">
                    <span itemprop="name">название раздела 2</span>
             </a>
             <meta itemprop="position" content="3" />
       </li>
       …
</ul>

пример размеченных хлебных крошек

Разметка организации


<div>
       <div>название организации</div>
       <div><img src="ссылка на логотип организации" /></div>
       <div>индекс, страна, область, город, улица, номер дома</div>
       <div>Телефон: <a href="tel:+7999888888">+7 (999) 888-88-88</a></div>
       <div>Почта: 
<a href="mailto:best.company@mail.ru">best.company@mail.ru</a></div>
       <div>Факс: <a href="tel:+79999999999">+7 (999) 999-99-99</a></div>
</div>
       </li>
       …
</ul>

пример неразмеченной организации


<div itemscope itemtype="http://schema.org/Organization">
       <div itemprop="name">название организации</div>
       <link itemprop="url" href="url-сайта">
       <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
              <span itemprop="postalCode">индекс</span>,
              <span itemprop="addressCountry">страна</span>, 
              <span itemprop="addressRegion">область</span>, 
              <span itemprop="addressLocality">город</span>, 
              <span itemprop="streetAddress">улица, номер дома</span>
       </div>
       <div>Телефон: <a itemprop="telephone" href="tel:+7999888888">+7 (999) 888-88-88</a></div>
       <div>Почта: <a itemprop="email" href="mailto:best.company@mail.ru">best.company@mail.ru</a></div>
       <div>Факс: <a itemprop="faxNumber" href="tel:+7999888888">+7 (999) 888-88-88</a></div>
</div>

пример размеченной организации


<div>
    <span>ООО «The Best Company»</span>
    <div>112211, Москва, ул. Московская, д.222, оф. 333</div>
    <span>8 (999) 888–88–89</span>
    <span>info@best.company.ru</span>
    <time>Пн-Пт, 9:00 – 21:00</time>
</div>

пример филиала без микроразметки


<div itemscope itemtype="http://schema.org/LocalBusiness">
    <span itemprop="name">ООО «The Best Company»</</span>
    <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        <meta itemprop="streetAddress" content="ул. Московская, д.222, оф. 333">
        <meta itemprop="postalCode" content="112211">
        <meta itemprop="addressLocality" content="Москва">
    </span>
    <span itemprop="telephone">8 (999) 888–88–89</span>
    <span itemprop="email">info@best.company.ru</span>
    <time itemprop="openingHours" datetime="Mo-Fr, 9:00−21:00">Пн-Пт, 9:00 – 21:00</time>
    <img itemprop="image" src="ссылка на изображение филиала" />
</div>

пример размеченного филиала

Разметка товара


<div>
   <h1>наименование_товара</h1>
   <a href="ссылка-на-увеличенное-изображение-товара.jpg">
       <img src="ссылка-на-изображение-товара" />
   </a>
    <div>
       <div>В наличии</div>
    </div>
    <div>Описание товара</div>
</div>

пример неразмеченного товара


<div itemscope itemtype="http://schema.org/Product">
       <h1 itemprop="name">наименование товара</h1>
       <a href="ссылка-на-увеличенное-изображение-товара.jpg">
              <img itemprop="image" src="ссылка-на-изображение-товара" />
       </a>
       <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
              <meta itemprop="price" content="1555.00">
              <meta itemprop="priceCurrency" content="RUB">
              <link itemprop="availability" href="http://schema.org/InStock">
              <div>В наличии</div>
       </div>
       <div itemprop="description">описание товара </div>
</div>

пример размеченного товара

Разметка услуги


<div>
       <div>наименование услуги</div>
       <div>описание услуги</div>
       <img src="ссылка-на-изображение-услуги" />
       <div>
              <div>Заявка на оказание услуги!</div>
              <div>Цена: от 2 550 до 5 650 руб.</div>
       </div>
</div>

пример неразмеченной услуги


<div itemscope itemtype="http://schema.org/Product">
       <div itemprop="name">наименование услуги</div>
       <div itemprop="description">описание услуги</div>
       <img itemprop="image" src="ссылка-на-изображение-услуги" />
 
       <div itemprop="offers" itemscope itemtype="http://schema.org/AggregateOffer">
              <div>Заявка на оказание услуги!</div>
              <meta itemprop="priceCurrency" content="RUB">
              <link itemprop="availability" href="http://schema.org/InStock">
              <div>Цена: от <span itemprop="lowPrice">2550</span> до <span itemprop="highPrice">5650</span> руб.</div>
       </div>
</div>

пример размеченной услуги

Разметка статьи блога

BlogPosting – схема для разметки публикаций и статей блога.
NewsArticle – схема для разметки новостей.
Article – общая схема (подходит для всех материалов)


<article>
       <p>Автор: Иван Петров</p>
       <span>Дата: <time>2022-07-01T12:54:11+00:00</time></span>
       <h1>наименование статьи</h1>
       <img src="ссылка-на-изображение-статьи" />
       <div>текст статьи</div>
</article>

пример неразмеченной статьи


<div itemscope itemtype="http://schema.org/Article">
       <p>Автор: <span itemprop="author">Иван Петров</span></p>
       <p>Дата публикации: <time itemprop="datePublished" datetime="2022-07-01">1 июля 2022</time></p>
       <h1 itemprop="headline">наименование статьи</h1>
       <img itemprop="image" src="ссылка-на-изображение-статьи" />
       <article itemprop="articleBody">текст статьи</article>
       <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
               <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
                      <img itemprop="url image" src="ссылка-на-логотип" />
                </div>
               <link itemprop="url" href="ссылка-на-сайт">
               <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
                      <span itemprop="postalCode">почтовый индекс</span>,
                      <span itemprop="addressCountry">страна</span>, 
                      <span itemprop="addressRegion">область</span>, 
                      <span itemprop="addressLocality">город</span>, 
                      <span itemprop="streetAddress">улица, номер дома</span>
               </div>
               <div>Телефон: <a itemprop="telephone" href="tel:+79998888888">+7 (999) 888-88-88</a></div>
               <meta itemprop="name" content="наименование сайта">
       </div>
       <meta itemprop="dateModified" content="2022-07-01T12:54:11+00:00">
       <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="ссылка-на-статью"/>
</div>

пример размеченной статьи

Разметка изображения


<div>
       <div>Компьютер</div>
       <img src="sotrudnik_work.jpg" />
       <span>Сотрудник за рабочим местом.</span>
</div>

пример неразмеченного изображения


<div itemscope itemtype="http://schema.org/ImageObject">
       <div itemprop="name">Сотрудник за рабочим местом.</div>
       <img src="computer.jpg" itemprop="contentUrl" />
       <span itemprop="description">Сотрудник работает за своим рабочим местом.</span>
</div>

пример размеченного изображения

Разметка видео


<div>
	 <link href="ссылка-на-видео">
	 <meta content="наименование-видео" />
	 <p>описание-видео</p>
	 <p>Дата загрузки: 2022-01-07T00:10:00</p>
</div>

пример неразмеченного видео


<div itemscope itemtype="http://schema.org/VideoObject">
	<link itemprop="url" href="ссылка-на-видео">
	<meta itemprop="name" content="наименование видео">
	<p itemprop="description">описание-видео</p>
	<meta itemprop="duration" content="PT7M45S" />
	<meta itemprop="isFamilyFriendly" content="true">
	<link itemprop="thumbnailUrl" href="превьюшка_изображение"/>
	<p>Дата загрузки: <span itemprop="uploadDate">2022-01-07T00:10:00</span></p>
	<div itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
        <img itemprop="contentUrl" src="превью-изображение">
	       <meta itemprop="width" content="260">
	       <meta itemprop="height" content="140">
	</div>
</div>

пример размеченного видео

Разметка блока «Вопрос-ответ»


<div>
       <div>Как утеплить стены?</div>
       <div>Ответ<span>Любое сооружение можно утеплить при помощи сэндвич-панелей. Для этого понадобятся уголки, герметики, крепежи и нащельники.</span></div>

пример неразмеченного блока «Вопрос-ответ»


<div itemscope itemtype="https://schema.org/FAQPage">
       <div itemprop="mainEntity" itemscope itemtype="https://schema.org/Question">
              <div itemprop="name">Как утеплить стены?</div>
              <span itemprop="answerCount">1</span> ответ</div>
              <div itemprop="upvoteCount">145</div> //Всего голосов за вопрос
              <div itemprop="acceptedAnswer" itemscope="" itemtype="http://schema.org/Answer"> 
                     <div itemprop="upvoteCount"/>5</div> //Всего голосов за ответ
                     Ответ: <span itemprop="text"> Любое сооружение можно утеплить при помощи сэндвич-панелей. Для этого понадобятся уголки, герметики, крепежи и нащельники.</span>
              </div>

пример размеченного блока «Вопрос-ответ»

Разметка рейтинга

AggregateRating — объект, посредством которого можно разметить рейтинг товара, новости или статьи.


<div itemscope itemtype="http://schema.org/Product">
       <h1 itemprop="name">название-товара</h1>
       <a href="ссылка-на-увеличенное-изображение.jpg">
              <img itemprop="image" src="ссылка-на-изображение-товара" />
       </a>
       <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
              <meta itemprop="price" content="1550.00">
              <meta itemprop="priceCurrency" content="RUB">
              <link itemprop="availability" href="http://schema.org/InStock">
              <div>в наличии</div>
       </div>
       <div itemprop="aggregateRating" itemscope="" itemtype="https://schema.org/AggregateRating">;            
           <meta itemprop="bestRating" content="10">
           <meta itemprop="ratingValue" content="7.9">
           <span itemprop="ratingCount">56</span>
       </div>      
       <div itemprop="description">описание-товара</div>
</div>

пример разметки внутри товара


<div itemscope itemtype="http://schema.org/Article">
       <p>Автор: <span itemprop="author">Иван Петров</span></p>
       <p>Дата публикации: <time itemprop="datePublished" datetime="2022-07-01">1 июля 2022</time></p>
       <h1 itemprop="headline">наименование статьи</h1>
       <img itemprop="image" src="ссылка-на-изображение-статьи" />
       <article itemprop="articleBody">текст статьи</article>
       <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
               <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
                      <img itemprop="url image" src="ссылка-на-логотип" />
                </div>
               <link itemprop="url" href="ссылка-на-сайт">
               <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
                      <span itemprop="postalCode">индекс</span>,
                      <span itemprop="addressCountry">страна</span>, 
                      <span itemprop="addressRegion">область</span>, 
                      <span itemprop="addressLocality">город</span>, 
                      <span itemprop="streetAddress">улица, номер дома</span>
               </div>
               <div>Телефон: <a itemprop="telephone" href="tel:+79998888888">+7 (999) 888-88-88</a></div>
               <meta itemprop="name" content="наименование-сайта">
       </div>
       <div itemprop="aggregateRating" itemscope="" itemtype="https://schema.org/AggregateRating">
             <meta itemprop="bestRating" content="10">
             <meta itemprop="ratingValue" content="7.9">
             <span itemprop="ratingCount">56</span>
       </div>
       <meta itemprop="dateModified" content="2022-01-07T10:37:46+00:00">
       <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="ссылка-на-статью"/>
</div>

пример разметки внутри статьи

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

Эффективность понимания добавленной разметки поисковыми системами зависит от корректности ее формирования.

Узнать, правильно ли поисковики извлекают размеченные данные, можно со специально предназначенных для этого сервисов – валидаторов (можно выполнить проверку как по конкретному URL, так и по фрагменту кода страницы):

----валидатор Яндекса (https://webmaster.yandex.com/tools/
microtest/):

веб

инструмент проверки расширенных результатов в Google (https://search.google.com/test/rich-results?hl=ru):

валидатор разметки Schema.org (https://validator.schema.org/):

валидатор Structured Data Linter:

Для валидации разметки постов для соц.сетей можно воспользоваться отладчиком репостов https://developers.facebook.com/tools/debug/:

девел

Примечание: на текущий момент, работает только по VPN.

Что важно запомнить

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

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

Для быстрого внедрения разметки (без правки исходного кода) рекомендуется использовать маркеры данных Search Console (подходит только для Google) и плагины для CMS.

Для описания контента на странице используются словари: Schema.org, Open Graph, Microformats, FOAF, Data Vocabulary, Dublin Core, Good Relations.

Schema.org — это наиболее популярный словарь сущностей и их свойств, использующийся для описания размещенных на сайте элементов.

Для работы со словарем используются синтаксисы: Microdata, JSON-LD, RDFa, микроформаты.

Google рекомендует размечать данные с помощью JSON-LD, для Яндекса рекомендуется использовать Microdata (параллельно размечать один и тот же контент разными синтаксисами – не стоит).

Необходимо проверять корректность разметки валидаторами.