Микроразметка сайта для поисковых систем Яндекс и Google в формате Schema.org, JSON-LD и Open Graph. Разметку старался делать без js, т.к. Яндекс ее не учитывает. Микроформат Schema.org подходит для Яндекс/Google. Преимущество данного метода - не нужно ждать бота, который придет, просканирует страницу с включенным js и поймет что там находится. Ускоряет обработку данных в микроданных.

Всем привет. Меня зовут Толстенко Александр. Я частный SEO специалист. В сфере разработки и продвижения бизнеса в интернете я с 2009 года. Ознакомиться с другими статьями и кейсами, можно в профиле habr.

Занимаясь SEO продвижением одного крупного СМИ портала, была необходимость собрать по максимуму определенные виды микроразметок и внедрить их на сайт, чтобы Яндекс и Google корректно понимали какой контент находится на сайте и данные в ней побыстрее попадали в сниппеты результатов выдачи, делая сайт заметным на поиске.

У Яндекса есть проблемы с пониманием JSON-LD, а Google сканирует сайт не сразу с включенным js, из-за чего данные в микроформате не сразу учитываются роботом.

Поэтому, пришлось собирать нужную разметку и переделывать JSON-LD в Schema.org, чтобы все поисковые машины смогли распознать информацию на сайте корректно.

Яндекс не понимает JSON-LD?

Как так, в валидаторе же, при проверке данные видны? Пример проверки js микроразметки на скрине.

Специально, задал этот вопрос техподдержке Яндекса. Ответ на скрине ниже.

Итак, погнали. Начну с определения и немного примеров, потом будет мясо.

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

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

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

Из справки Яндекс https://yandex.ru/support/webmaster/schema-org/

Для чего нужна микроразметка сайта при SEO продвижении?

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

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

Некоторые примеры из выдачи Яндекса

Некоторые примеры из выдачи Гугл

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

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

Для продвижения сайта в Яндекс и Google SEOшники используют только три вида разметки: Schema.org, Open Graph, JSON-LD, чтобы объяснить роботу какой текст, находится в каком блоке на сайте и по возможности (алгоритмы постоянно меняются), эта информация попала в описание площадки на поиске. Другие встречаются очень редко.

Формат Schema.org рекомендует использовать Яндекс, JSON-LD - Google.

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

Инфа для программистов!

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

Где проверять правильность разметки на сайте

В Яндексе: https://webmaster.yandex.ru/tools/microtest/ - некоторая разметка в может показываться с ошибкой в онлайн сервисе проверки. В Google ошибок не было.

В Гугле: https://search.google.com/structured-data/testing-tool

P.S.: При проверки примеров микроразметки в Яндлекс.Вебмастере, кое какая будет выдавать ошибку, в Гугл - ошибки не будет. Проверял все по Гуглу. Если, где то будет ошибка, прошу строго не судить, я не прогер, за обратную связь буду благодарен.

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

Ниже находятся примеры разных методов разметки данных. По максимуму старался сделать в формате Schema.org, но использовал и другие. Разметка подойдет для сайта услуг, блога, информационного портала СМИ. Что то можно взять и для интернет магазина. Кому надо, берите правьте под себя.

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

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

Добавить в блок head микроразметку для og и twitter. Пример кода:

<head>
{содержание head}

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="{Заголовок статьи h1}">
<meta property="og:url" content="текущий_url_материала">
<meta property="og:image" content="ссылка на фото материала. Еcли нет, вставить заглушку с логотипом сайта формат jpg">
<meta property="og:description" content="{Описание материала. Если пусто ШАБЛОН: Заголовок H1 - Имя сайта}">
<meta property="og:site_name" content="Название домена или Компании и описание, чем занимается сайт">
<meta property="og:locale" content="{Язык. Пример: ru_RU, ru-UA, ru-KZ, ru-BY, ru-UZ, ru-TJ}" />
<meta property="article:published_time" content="{Дата размещения статьи. Формат: 2015-05-20T10:31:27+00:00}" />
<meta property="article:modified_time " content="{Дата изменения статьи. Формат: 2020-01-20T11:31:27+00:00}" />
<meta property="article:author" content="{Автор статьи, если пусто то: Название домена или Компании}" />
<meta property="article:section" content="{Категория}" />
<meta property="article:tag" content="{Тег статьи}" />
<meta name="referrer" content="origin-when-crossorigin">

<!-- twitter -->
<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="{Название домена или Компании}"/>
<meta name="twitter:title" content="{Заголовок материала}">
<meta name="twitter:description" content="{Описание материала. Если пусто ШАБЛОН: Заголовок H1 - Имя Сайта}"/>
<meta name="twitter:creator" content="https://site.ru/"/>
<meta name="twitter:image:src" content="ссылка на фото материала. Если нет, вставить заглушку с логотипом сайта формат jpg"/>
<meta name="twitter:domain" content="https://site.ru/"/>
<meta name="content-language" content="{Язык. Пример: ru, ua, kz, by, uz, tj}" />

</head>

Разметка для поиска по сайту

<div itemscope itemtype="https://schema.org/WebSite">

    <meta itemprop="url" content="%домен%"/>

    <form itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction">

        <meta itemprop="target" content="%домен%/search.html?query={search_term_string}" />

        <input itemprop="query-input" type="text" name="search_term_string" required />

        <input type="submit" />

    </form>

</div>

Подробнее можно в справке тут: https://developers.google.com/search/docs/data-types/sitelinks-searchbox?hl=ru

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

Сделать хлебные крошки и их микроразметку — ПОСЛЕДНЮЮ КРОШКУ, НЕ ДЕЛАТЬ ССЫЛКОЙ!

<nav>
<ul itemscope itemtype="http://schema.org/BreadcrumbList">
   <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="url_ссылки" title="Основной раздел" itemprop="item">
<span itemprop="name">Основной раздел</span><meta itemprop="position" content="0">
</a>
   </li>
   <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="url_ссылки" title="Подраздел уровня 1" itemprop="item"><span itemprop="name">Подраздел уровня 1</span><meta itemprop="position" content="1"></a>
   </li>
   <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="url_ссылки" title="Подраздел уровня 2" itemprop="item"><span itemprop="name">Подраздел уровня 2</span><meta itemprop="position" content="2"></a>
   </li>
</ul>
</nav>

Разметка меню навигации

Для меню в шапке

<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="url" itemprop="url">Пункт 1</a><meta itemprop="name" content="Пункт_1" /></li>
    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"><a href="url" itemprop="url">Пункт_2<meta itemprop="name" content="Пункт_2" /></a></li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ItemList"><a href="url" itemprop="url">Пункт_3</a>
    <meta itemprop="name" content="Пункт_3" />
      <menu>
       <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"><a href="url" itemprop="url">Под_пункт_3_1<meta itemprop="name" content="Пункт_3_1" /></a></li>
       <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"><a href="url" itemprop="url">Под_пункт_3_2<meta itemprop="name" content="Пункт_3_2" /></a></li>
      </menu>
    </li>
    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"><a href="url" itemprop="url">Пункт_4<meta itemprop="name" content="Пункт_4" /></a></li>
  </menu>
</div>

Для меню в футере (другая верстка)

<menu itemscope itemtype="http://schema.org/SiteNavigationElement">
       <li>
              <a itemprop="url" href="ссылка">название_пункта_меню_1</a>
       </li>
       <li>
              <a itemprop="url" href="ссылка">название_пункта_меню_2</a>
       </li>
</menu>

Страница(ы) контактов

<div itemscope="" itemtype="http://schema.org/Organization" class=”DisplaNone”>
<meta itemprop="name" content="Название Юр.лица">
  <meta itemprop="telephone" content="телефон">
  <meta itemprop="email" content="ваш e-mail">
  <meta itemprop="address" content="Ваш адрес">   
  <meta itemprop="logo" content="url к логу компании">
  <meta itemprop="image" content="url к картинке офиса">
  <meta itemprop="description" content="Описание страницы">
  <meta itemprop="legalName" content="Название компании и чем занимается">
  <link itemprop="url" href="url-страницы" content="url-страницы">
<meta itemprop="sameAs" content="ссылка на соц сеть">
<div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
<meta itemprop="worstRating" content="1"> <!-- Мин. значение -->
<meta itemprop="bestRating" content="5"/> <!-- Макс. Значение -->
   	<meta itemprop="ratingValue" content="5"> <!-- средняя оценка -->
    	<meta itemprop="ratingCount" content="1064">  <!-- общее количество голосов -->
  </div>
</div>

Разметка футера сайта

<span itemscope itemtype="r" class=”DisplaNone”>
       <meta itemprop="copyrightYear" content="%year%">
       <meta itemprop="copyrightHolder" content="Название домена или Компании">       
</span>

Разметка списка статьи блога (Blog) (список)

Для новостей заменить http://schema.org/Blog на http://schema.org/NewsArticle

<div itemscope itemtype="http://schema.org/Blog">
       <h1 itemprop="description">{Название документа/раздела}</h1>

       <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
             <h2 itemprop="headline">{название_статьи_N}</h2>
<meta itemprop="datePublished" content="{Дата публикации. Пример: 2020-01-14T07:20:10+03:00}" />
<img itemprop="articleSection" content="{название раздела}">
<img itemprop="image" src="{ссылка_на_фото_материала}">
<meta itemprop="description" content="{краткое_описание_статьи N}" /> 
<meta itemprop="author" content="{Автор статьи}" /> 
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization" class=”DisplaNone”>
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
                                  		<img itemprop="url image" src="ссылка_на_логотип" /> 
                           	</div>
                            <meta itemprop="name" content="Название домена или Компании"> 
                     </div>
                     <meta itemprop="dateModified" content="{Дата изменения. Пример: 2020-01-14T07:20:10+03:00}">
                     <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="{ссылка_на_статью}"/>
        </article>
</div>
<!-- рецензия материала -->
<div itemscope="" itemtype="http://schema.org/Organization">
  <meta itemprop="name" content="Название_страницы">
  <meta itemprop="description" content="description">
  <link itemprop="url" href="url_страницы">
<div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
<meta itemprop="worstRating" content="1"> <!-- Мин. значение -->
<meta itemprop="bestRating" content="5"/> <!-- Макс. Значение -->
<meta itemprop="ratingValue" content="4.6"> <!-- средняя оценка. если пусто выводим 5 -->
    	<meta itemprop="ratingCount" content="8864">  <!-- общее количество голосов  -->
  </div>
<div itemprop="review" itemtype="http://schema.org/Review" itemscope="">
    <div itemprop="author" itemtype="http://schema.org/Person" itemscope="">
      <meta itemprop="name" content="Название домена или Компании">
      <link itemprop="url" href="https://site.ru/">   
    </div>   
  </div>
</div>

Разметка конкретного материала: Статьи/Новости

Для новостей заменить http://schema.org/Article на http://schema.org/NewsArticle

<article itemscope itemtype="http://schema.org/Article">
    <meta itemprop="headline" content="title" />
    <h1 itemprop="name">{Заголовок документа}</h1>
    <!-- Ссылка на статью -->
    <meta itemprop="url" content="{Ссылка на статью}" />
   <meta itemprop="description" content="{description}" />
   <img itemprop="articleSection" content="{название раздела}">
    <!-- Каноническая ссылка статьи -->
    <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="{Каноническая ссылка}" content="{Заголовок статьи}" />
    <!-- Ссылка на превью статьи -->
    <div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
        <img itemprop="url contentUrl" src="{Ссылка на превью}" alt="{Заголовок статьи}" />
    </div>
    <!-- Дата публикации и дата последнего изменения -->
    <meta itemprop="datePublished" content="{Дата публикации. Пример: 2020-01-14T07:20:10+03:00}" />
    <meta itemprop="dateModified" content="{Дата изменения. Пример: 2020-01-14T07:20:10+03:00}" />
    <meta itemprop="inLanguage" content="ru-RU" /> <!-- язык текста на сайте -->
    <!-- основной текст статьи -->
    <div itemprop="articleBody">
        {текст_материала в html}
    </div>
    <!-- Автор статьи -->
    <div itemprop="author" itemscope itemtype="http://schema.org/Person">
        <meta itemprop="name" content=”{Автор статьи}”>
    </div>
    <!-- Контактная информация о сайте/организации -->
    <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
        <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
            <img itemprop="url" src="{Ссылка на логотип}" alt="Название домена или Компании" />
<meta itemprop="width" content="200" />
        	<meta itemprop="height" content="200" />
        </div>
        <meta itemprop="name" content="Название домена или Компании" />
        <meta itemprop="url" content="https://site.ru/" />        
    </div>
</article>
<!-- рецензия материала -->
<div itemscope="" itemtype="http://schema.org/Organization">
  <meta itemprop="name" content="Название_страницы">
  <meta itemprop="description" content="description">
  <link itemprop="url" href="url_страницы">
<div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
<meta itemprop="worstRating" content="1"> <!-- Мин. значение -->
<meta itemprop="bestRating" content="5"/> <!-- Макс. Значение --> 
<meta itemprop="ratingValue" content="4.6"> <!-- средняя оценка. если пусто выводим 5 -->
<meta itemprop="ratingCount" content="8864">  <!-- общее количество голосов если нет выводим 10  -->
  </div>
<div itemprop="review" itemtype="http://schema.org/Review" itemscope="">
    <div itemprop="author" itemtype="http://schema.org/Person" itemscope="">
      <meta itemprop="name" content="Название домена или Компании"> <!-- если нет автора -->
      <link itemprop="url" href="https://site.ru/">   
    </div>   
  </div>
</div>

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

<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="{2020-01-14T07:20:10+03:00}">{2020-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="{2020-02-27T08:21:11+03:00}">{2020-02-27}</time>
            <p itemprop="commentText">{Другой комментарий}</p>
        </li>
    </ul>
</div>

Микроразметка отзывов о сайте (если они есть)

<div itemprop="review" itemtype="http://schema.org/Review" itemscope="">
    <div itemprop="author" itemtype="http://schema.org/Person" itemscope="">
      <meta itemprop="name" content="{Имя_пользователя_или_ник}">
      <link itemprop="url" href="ссылка_на_страницу_профиля_или_соц_сети_если_есть_если_нет_не_выводим">
      <link itemprop="image" href="url_картинки_пользователя"> <!--  если есть -->  
    </div>
    <meta itemprop="datePublished" content="2018-09-07"> <!-- дата_публикации --> 
    <span itemprop="reviewBody">Текст_отзыва</span>
    <div itemprop="reviewRating" itemtype="http://schema.org/Rating" itemscope="">
      	<meta itemprop="worstRating" content="1"> <!-- Мин. значение -->
<meta itemprop="bestRating" content="5"/> <!-- Макс. Значение -->
 	<meta itemprop="ratingValue" content="5"> <!-- Оценка  -->
    </div>
<div itemprop="itemReviewed" itemscope itemtype="https://schema.org/Organization">
        <meta itemprop="name" content="Название домена или Компании">
 </div>
  </div>

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

<div itemscope itemtype="http://schema.org/VideoObject" >
    <link itemprop="thumbnailUrl" href="ссылка_на_превью_фото_для_видео">
    <h2 itemprop="name">{Заголовок видео}</h2>
    <meta itemprop="description" content="{Описание видео}">
    <meta itemprop="duration" content="PT6M58S"> <!-- указание в видео PT6 - цифра - это длительность 6 минут, М58S - цифры - длительность 58 секунд -->
    <meta itemprop="isFamilyFriendly" content="true"> <!-- разрешено ли детям -->
    <meta itemprop="uploadDate" content="2013-06-05T00:00:00"> <!-- формат публикации даты -->
    <span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject" class=”DisplayNone”> 
      <img itemprop="contentUrl" src="{https://www.mysite.com/images/preview/img1.jpg}"> <!-- ссылка на фото к видео -->
      <!-- размеры -->
      <meta itemprop="width" content="250">
      <meta itemprop="height" content="120">
    </span>
 <span itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
        	<span itemprop="interactionType" itemscope itemtype="http://schema.org/WatchAction"></span>
        	<meta itemprop="userInteractionCount" content="102111" /> <!-- кол-во просмотров -->
        </span>
</div>

Разметка мобильного приложения

<div itemscope itemtype="https://schema.org/SoftwareApplication">
<meta itemprop="name" content="{Название_Приложения} Android">
<meta itemprop="description" content="краткое_описание_приложения"> 
<meta itemprop="applicationCategory" content="GameApplication">
<meta itemprop="operatingSystem" content="ANDROID">
<meta itemprop="inLanguage" content="ru-RU">  <!-- язык приложения страны в которой живет пользователь -->
<meta itemprop="image" content="ссылка_на_фото_если_есть">
<link itemprop="url" href="ссылка_на_страницу_на_нашем_сайте">
<meta itemprop="softwareVersion" content="4.6.4r"> <!-- если известна, если нужна в разметки -->
<meta itemprop="fileSize" content="12,32 МБ"> <!-- если известен размер, если нужна в разметки -->
<div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
<meta itemprop="worstRating" content="1"> <!-- Мин. значение -->
<meta itemprop="bestRating" content="5"/> <!-- Макс. Значение -->
 	<meta itemprop="ratingValue" content="4.6"> <!-- средняя оценка -->  
    	<meta itemprop="ratingCount" content="8864">  <!-- количество голосов -->
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
	<meta itemprop="url" content="ссылка_на_страницу_на_нашем_сайте">
<meta itemprop="category" content="free">
<meta itemprop="price" content="0">
<meta itemprop="priceCurrency" content="RUB">
</div>
<div itemprop="author" itemtype="http://schema.org/Person" itemscope="">
      <meta itemprop="name" content="{Название_Организации}">
      <link itemprop="url" href="ссылка_на_сайт">
      <link itemprop="image" href="url_логотипа_организации"> <!--  если есть -->    
    </div>
</div>

FAQ: Часто задаваемые вопросы, вопрос/ответы

<div itemscope itemtype="https://schema.org/QAPage">
<div itemprop="mainEntity" itemscope itemtype="https://schema.org/Question">
   <h2 itemprop="name">How many ounces are there in a pound?</h2>
   <div itemprop="upvoteCount">52</div>
   <div itemprop="text">I have taken up a new interest in baking and keep running across directions in ounces and pounds. I have to translate between them and was wondering how many ounces are in a pound?</div>
<div>
    <div><span itemprop="answerCount">3</span> answers</div>
    <div><span itemprop="upvoteCount">26</span> votes</div>
    <div itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">
       <div itemprop="upvoteCount">1337</div>
       <div itemprop="text">
       1 pound (lb) is equal to 16 ounces (oz).
       </div>
      <a itemprop="url" href="https://example.com/question1#acceptedAnswer">Answer Link</a>
      </div>
    <div itemprop="suggestedAnswer" itemscope itemtype="https://schema.org/Answer">
       <div itemprop="upvoteCount">42</div>
       <div itemprop="text">
       Are you looking for ounces or fluid ounces? If you are looking for fluid ounces there are 15.34 fluid ounces in a pound of water.
       </div>
       <a itemprop="url" href="https://example.com/question1#suggestedAnswer1">Answer Link</a>
     </div>
     <div itemprop="suggestedAnswer" itemscope itemtype="https://schema.org/Answer">
       <div itemprop="upvoteCount">0</div>
       <div itemprop="text">
       I can't remember exactly, but I think 18 ounces in a lb. You might want to double check that.
       </div>
       <a itemprop="url" href="https://example.com/question1#suggestedAnswer2">Answer Link</a>
    </div>
</div>
</div>
</div>

Подробнее в справке https://developers.google.com/search/docs/appearance/structured-data/qapage?hl=ru#микроданные

How-To (Инструкция)

<div itemscope itemtype="https://schema.org/HowTo">
  <b><span itemprop="name">How to tie a tie</span></b>
  <div>About <span itemprop="totalTime" content="PT2M">2 minutes</span></div>
  <div itemprop="video" itemscope itemtype="https://schema.org/VideoObject">
    <meta itemprop="name" content="Tie a Tie" />
    <meta itemprop="description" content="How to tie a four-in-hand knot." />
    <link itemprop="thumbnailUrl" content="https://example.com/photos/photo.jpg" />
    <link itemprop="contentUrl" content="https://www.example.com/videos/123_600x400.mp4" />
    <link itemprop="embedUrl" content="https://www.example.com/videoplayer?id=123" />
    <meta itemprop="duration" content="P1MT10S" />
    <meta itemprop="uploadDate" content="2019-01-05T08:00:00+08:00" />
    <video>...</video>
  </div>
  <div>Necessary Items:</div>
  <div itemprop="supply" itemtype="https://schema.org/HowToSupply">A tie</div>
  <div itemprop="supply" itemtype="https://schema.org/HowToSupply">A collared Shirt</div>
  <div itemprop="tool" itemtype="https://schema.org/HowToTool">A mirror</div>
  <div>
    <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
      <div itemprop="name">Preparations</div>
      <div itemprop="text">Button your shirt how you'd like to wear it, then drape the tie around your neck. Make the thick end about 1/3rd longer than the short end. For formal button down shirts, it usually works best with the small end of the tie between 4th and 5th button.</div>
      <div itemprop="image">https://example.com/1x1/photo1.jpg</div>
      <meta itemprop="url" content="https://example.com/tie#step1" />
    </div>

    <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
      <div itemprop="name">Crossing once</div>
      <div itemprop="text">Cross the long end over the short end. This will form the basis for your knot.</div>
      <div itemprop="image">https://example.com/1x1/photo2.jpg</div>
      <meta itemprop="url" content="https://example.com/tie#step2" />
    </div>

    <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
      <div itemprop="name">Second crossing</div>
      <div itemprop="text">Bring the long end back under the short end, then throw it back over the top of the short end in the other direction.</div>
      <div itemprop="image">https://example.com/1x1/photo3.jpg</div>
      <meta itemprop="url" content="https://example.com/tie#step3" />
    </div>

    <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
      <div itemprop="name">Loop in</div>
      <div itemprop="text">Now pull the long end through the loop near your neck, forming another loop near your neck.</div>
      <div itemprop="image">https://example.com/1x1/photo4.jpg</div>
      <meta itemprop="url" content="https://example.com/tie#step4" />
    </div>

    <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
      <div itemprop="name">Pull and tighten</div>
      <div itemprop="text">Pull the long end through that new loop and tighten to fit!</div>
      <div itemprop="image">https://example.com/1x1/photo5.jpg</div>
      <meta itemprop="url" content="https://example.com/tie#step5" />
    </div>
  </div>
</div>

Подробнее в справке https://developers.google.com/search/docs/appearance/structured-data/how-to?hl=ru

SaleEvent (Распродажа/Бонус)

<div itemscope="" itemtype="http://schema.org/SaleEvent">
<meta itemprop="startDate" content="2020-05-05 08:00:00+03:00"> <!-- формат даты начала -->
	<meta itemprop="endDate" content="2020-11-06 24:00:00+03:00">  <!-- формат даты конца если есть -->
	<meta itemprop="name" content="? {Название_Бонуса_или_сумма_бонуса}"> <!-- Пример скобок: 4 000 ₽ бонуса! -->
	<meta itemprop="description" content="{Краткое_описание c description или шаблонный текст: h1 - Название сайта}">
	<meta itemprop="eventAttendanceMode" content="https://schema.org/OnlineEventAttendanceMode">
	<meta itemprop="eventStatus" content="https://schema.org/EventScheduled">
	<meta itemprop="url" content="url_страницы">
	<meta itemprop="image" content="url_картинки">	
<meta itemprop="performer" content="Участник мероприятия">  
	<span itemscope="" itemtype="http://schema.org/Place" itemprop="location">
	<meta itemprop="logo" content="лого_компании">
	<meta itemprop="name" content="{Название_Документа}">
		<span itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
			<meta itemprop="url" content="url_страницы">
		</span>
	</span>
<span itemprop="offers" itemscope itemtype="https://schema.org/Offer">
            <meta class="event-price" itemprop="price" content="4000"> <!-- размер бонуса -->
	<meta itemprop="priceCurrency" content="RUB">
<meta itemprop="url" content="url_страницы">
<link itemprop="availability" href="https://schema.org/InStock"/>
	<meta itemprop="validFrom" content="2020-05-05 08:00:00+03:00">
</span>
</div>

Разметка в формате ld json для Google

Разметка Логотипа

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Organization",
      "url": "url-сайта",
      "logo": "{Ссылка на логотип}"
    }
    </script>

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

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Person",
  "name": "Имя",
  "additionalName": "Отчество (можно второе имя, ник)",
  "jobTitle": "Должность",
  "affiliation": "Организация, с которой связан человек",
  "email": "Адрес email",
  "telephone": "Контактный телефон",
  "url": "URL персональной страницы или профиля на сайте",
  "image": "URL фото",
  "address": {
    "@type": "PostalAddress",
    "addressCountry": "Страна",
    "addressRegion": "Регион (область)"
  }
}
</script>

Карусель Статей/Новостей

 <script type="application/ld+json">
    {
      "@context":"https://schema.org",
      "@type":"ItemList",
      "itemListElement":[
        {
          "@type":"ListItem",
          "position":1,
          "url":"ссылка_на_документ_N",
          "name":"Имя_документа_N",
          "image": [
              "https://example.com/photos/1x1/photo.jpg",
              "https://example.com/photos/4x3/photo.jpg",
              "https://example.com/photos/16x9/photo.jpg"
            ]
        },
        {
          "@type":"ListItem",
          "position":2,
          “url":"ссылка_на_документ_N",
          "name":"Имя_документа_N",
          "image": [
              "https://example.com/photos/1x1/photo.jpg",
              "https://example.com/photos/4x3/photo.jpg",
              "https://example.com/photos/16x9/photo.jpg"
            ]
        }
      ]
    }
    </script>

Разметка голосового поиска (Speakable)

Добавить документу доп поле, в котором можно будет написать информацию о чем этот текст.

Рекомендации поисковых систем: текст должен быть не больше 2-3 предложений, чтобы озвучка текста не занимал более 30 секунд. Подробнее о разметке можно почитать тут https://developers.google.com/search/docs/data-types/speakable?hl=ru

<script type="application/ld+json">
    {
     "@context": "https://schema.org/",
     "@type": "WebPage",
     "name": "h1_документа",
     "speakable":
     {
      "@type": "SpeakableSpecification",
      "xpath": [
        "/html/head/title",
        "/html/head/meta[@name='description_page']/@content"
        ]
      },
     "url": "url_страницы"
     }
    </script>

Для продвижения конкретного ресурса нужна была не вся микроразметка. Если что то не нашли, можно разметку структурированных данных, которая поддерживается в Google Поиске, можно посмотреть тут: https://developers.google.com/search/docs/appearance/structured-data/search-gallery?hl=ru

Со всеми свойствами и примерами схемы schema.org, можно ознакомиться на официальном сайте https://schema.org/ и собрать нужную самостоятельно при необходимости.

На этом все, спасибо за внимание.

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

Микроразметка сайта для Яндекс и Google с примерами