Интернет

Микроразметка для Вашего сайта schema.org


Микроразметка для Вашего сайта schema.org

Schema.org – микроразметка, позволяющая структурировать данные на сайте для поисковых систем. С ее помощью поисковые системы понимают, какие данные взять для показа расширенного сниппета.

Schema.org – микроразметка, позволяющая структурировать данные на сайте для поисковых систем. С ее помощью поисковые системы понимают, какие данные взять для показа расширенного сниппета.

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

Пример сайта без микроразметки Schema.org:

Так выглядит сайт без микроразметки в выдаче поисковой системы

Сайт с микроразметкой:

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

Микроразметка Shema.org внедряется на уровне HTML кода. Ознакомиться с полным описанием микроразметки schema.org можно на официальном сайте.

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

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

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

Какие данные можно разметить с помощью schema.org

Schema.org включает в себя большой набор объектов и их свойств. Сейчас их уже больше сотни.

Микроразметкой Schema.org можно разметить:

  • Шапку сайта (WPHeader)
  • Меню (SiteNavigationElement)
  • Хлебные крошки (Breadcrumbs)
  • Адреса и организации (Organization и LocalBusiness)
  • Список товаров (Products list)
  • Карточку товара (Product → Offer)
  • Карточку услуги (Product → AggregateOffer)
  • Список статей блога (Blog)
  • Статью блога (Article, NewsArticle и BlogPosting)
  • Научная работа (CreativeWork)
  • Фильм (Movie)
  • Рецепт (Recipe)
  • Изображение (Painting)
  • Картинка (ImageObject)
  • Видео (VideoObject)
  • Событие (Event)
  • Вопрос-ответ (Question)
  • Отзывы (Reviews)
  • Поиск сайта (SearchAction)
  • Футер сайта (WPFooter)

Типы разметки данных Schema.org

Любое свойство разметить по-разному. Например, название товара можно разными способами:

  1. <meta itemprop="name" content="название товара" />
  2. <div itemprop="name">название товараdiv>
  3. <div itemprop="name"><h1>название товараh1>div>

Ссылку на товар можно описать способами:

  1. <a itemprop="url" href="ссылка">a>
  2. <meta itemprop="url" content="ссылка" />
  3. <link itemprop="url" href="ссылка" />

Способ разметки свойств зависит от преследуемых целей и задач. Некоторые интернет-магазины используют скрытую микроразметку с помощью тегов <meta> или <link>, которые изначально не видны, но доступны для просмотра через исходный код страницы.

Допустим, у нас есть такая шапка:

<head>
      <title>название_страницыtitle>>
      <meta name="description" content="описание_сайта">
      <meta name="keywords" content="ключевые_слова_тематики_сайта">head>

Шапка с микроразметкой:

<head itemscope itemtype="http://schema.org/WPHeader">
       <title itemprop="headline">название_страницыtitle>
       <meta itemprop="description" name="description" content="описание_страницы">
       <meta itemprop="keywords" name="keywords" content="ключевые_слова_для_страницы">head>

Для WPHeader предусмотрено множество свойств. Ознакомиться c ними и добавить их вы сможете самостоятельно, просмотрев страницу о объекте.

Главное меню без разметки:

<ul>
      <li>
            <a href="ссылка">название_пункта_меню_1a>
      li>
      <li>
            <a href="ссылка">название_пункта_меню_2a>
      li>
      <li>
            <a href="ссылка">название_пункта_меню_3a>
      li>
      <li>
            <a href="ссылка">название_пункта_меню_4a>
      li>
      <li>
            <a href="ссылка">название_пункта_меню_5a>
      li>
      <li>
            <a href="ссылка">название_пункта_меню_6a>
      li>
ul>

Главное меню с микроразметкой:

<ul itemscope itemtype="http://schema.org/SiteNavigationElement">
       <li>
              <a itemprop="url" href="ссылка">название_пункта_меню_1a>
       li>
       <li>
              <a itemprop="url" href="ссылка">название_пункта_меню_2a>
       li>
       <li>
              <a itemprop="url" href="ссылка">название_пункта_меню_3a>
       li>
       <li>
              <a itemprop="url" href="ссылка">название_пункта_меню_4a>
       li>
       <li>
              <a itemprop="url" href="ссылка">название_пункта_меню_5a>
       li>
       <li>
              <a itemprop="url" href="ссылка">название_пункта_меню_6a>
       li>
ul>

Хлебные крошки без микроразметки:

<ul>
      <li>
            <a href="ссылка">
                <span>название_1_пунктаspan>
            a>
      li>
      <li>
            <a href="ссылка">
                <span>название_1_пунктаspan>
            a>
      li>
      <li>
            <a href="ссылка">
                <span>название_1_пунктаspan>
            a>
      li>
      …
ul>

Хлебные крошки c микроразметкой:

<ul itemscope itemtype="http://schema.org/BreadcrumbList">
       <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
              <a itemprop="item" href="ссылка">
                     <span itemprop="name">название_1_пункта span>
              a>
              <meta itemprop="position" content="1" />
       li>
       <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
             <a itemprop="item" href="ссылка" >
                    <span itemprop="name">название_2_пунктаspan>
             a>
             <meta itemprop="position" content="2" />
       li>
       <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
             <a itemprop="item" href="ссылка">
                    <span itemprop="name">название_3_пунктаspan>
             a>
             <meta itemprop="position" content="3" />
       li>
       …
ul>

Другие примеры можно посмотреть на официальном сайте schema.org.

Как разметить последний элемент хлебных крошек (breadcrumbs)

Последний элемент размечать нужно ссылкой, через тег <a> без атрибута href:

<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
   <a itemprop="item">
     <span itemprop="name">название_последнего_пунктаspan>
   a>
   <meta itemprop="position" content="4">
li>

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

Пример разметки организации (Organization и LocalBusiness)

Объект Organization – более крупная организация, частью которой является объект LocalBusiness, если есть. Пример Organization – школа, НПО, корпорация. и др.

Объект LocalBusiness – филиал объекта Organization. Обычно LocalBusiness – это ресторан, ресторан сети ресторанов, филиал банка, клуб, боулинг и др.

Рекомендуем размечать юр. адрес типом Organization, остальные филиалы – через LocalBusiness. Объекты не должны быть вложены в друг друга (!), как может показаться изначально.

Организация без микроразметки (Organization):

<div>
       <div>название_компанииdiv>
       <div><img src="ссылка_на_логотип" />div>
       <div>почтовый_индекс, Страна, Область, Город, улица, номер домаdiv>
       <div>Телефон: <a href="tel:+79999999999">+7 (999) 999-99-99a>div>
       <div>Почта: <a href="mailto:[email protected]">[email protected]a>div>
       <div>Факс: <a href="tel:+79999999999">+7 (999) 999-99-99a>div>
div>

Организация с микроразметкой (Organization):

<div itemscope itemtype="http://schema.org/Organization">
       <div itemprop="name">название_компании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:+79999999999">+7 (999) 999-99-99a>div>
       <div>Почта: <a itemprop="email" href="mailto:[email protected]">[email protected]a>div>
       <div>Факс: <a itemprop="faxNumber" href="tel:+79999999999">+7 (999) 999-99-99a>div>
div>

Филиал без микроразметки (LocalBusiness):

<div>
    <span>ООО «Цифровой элемент»span>
    <div>454000, Челябинск, ул. Энгельса, д.2, оф. 200div>
    <span>8 (800) 555–85–89span>
    <span>[email protected]span>
    <time>Пн-Пт, 9:00 – 18:00time>
div>

Филиал с микроразметкой (LocalBusiness):

<div itemscope itemtype="http://schema.org/LocalBusiness">
    <span itemprop="name">ООО «Цифровой элемент»span>
    <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        <meta itemprop="streetAddress" content="ул. Энгельса, д.2, оф. 200">
        <meta itemprop="postalCode" content="454000">
        <meta itemprop="addressLocality" content="Челябинск">
    span>
    <span itemprop="telephone">8 (800) 555–85–89span>
    <span itemprop="email">[email protected]span>
    <time itemprop="openingHours" datetime="Mo-Fr, 9:00−18:00">Пн-Пт, 9:00 – 18:00time>
    <img itemprop="image" src="ссылка на изображение филиала" />
div>

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

Пример разметки списка товаров (Products list)

Список товаров без микроразметки:

<ul>
        <li>
                <a href="ссылка_на_товар">
                        <img src="ссылка_на_изображение_товара">
                        <div>название_товараdiv>
                        <div>
                               <span>47280span>
                               <span>руб.span>
                        div>
                        <div>Брендdiv>
                        <div>Модельdiv>
                a>
        li>
        <li>
                <a href="ссылка_на_товар">
                       <img src="ссылка_на_изображение_товара">
                       <div>название_товараdiv>
                       <div>
                              <span>47280span>
                              <span>руб.span>
                       div>
                       <div>Брендdiv>
                       <div>Модельdiv>
                a>
        li>
        <li>
                <a href="ссылка_на_товар">
                       <img src="ссылка_на_изображение_товара">
                       <div>название_товараdiv>
                       <div>
                              <span>47280span>
                              <span>руб.span>
                       div>
                       <div>Брендdiv>
                       <div>Модельdiv>
                a>
         li>
ul>

Список товаров с микроразметкой:

<ul itemscope itemtype="http://schema.org/ItemList">
       <li itemscope itemprop="itemListElement" itemtype="http://schema.org/Product">
              <a itemprop="url" href="ссылка_на_товар_1">
                     <img itemprop="image" src="ссылка_на_изображение_товара">
                     <meta itemprop="description" content="описание_товара">
                     <div itemprop="name">название_товараdiv>
                     <div itemscope itemprop="offers" itemtype="http://schema.org/Offer">
                            <div><span itemprop="price">47280span> руб.div>
                            <meta itemprop="priceCurrency" content="RUB">
                            <meta itemprop="availability" content="http://schema.org/InStock" />
                     div>
                     <div itemprop="brand">Брендdiv>
                     <div itemprop="model">Модельdiv>
              a>
       li>
       <li itemscope itemprop="itemListElement" itemtype="http://schema.org/Product">
              <a itemprop="url" href="ссылка_на_товар_2">
                     <img itemprop="image" src="ссылка_на_изображение_товара">
                     <meta itemprop="description" content="описание_товара">
                     <div itemprop="name">название_товараdiv>
                     <div itemscope itemprop="offers" itemtype="http://schema.org/Offer">
                            <div><span itemprop="price">47280span> руб.div>
                            <meta itemprop="priceCurrency" content="RUB" />
                            <meta itemprop="availability" content="http://schema.org/InStock" />
                     div>
                     <div itemprop="brand">Брендdiv>
                     <div itemprop="model">Модельdiv>
              a>
        li>
        <li itemscope itemprop="itemListElement" itemtype="http://schema.org/Product">
              <a itemprop="url" href="ссылка_на_товар_3">
                     <img itemprop="image" src="ссылка_на_изображение_товара">
                     <meta itemprop="description" content="описание_товара">
                     <div itemprop="name">название_товараdiv>
                     <div itemscope itemprop="offers" itemtype="http://schema.org/Offer">
                            <div><span itemprop="price">47280span> руб.div>
                            <meta itemprop="priceCurrency" content="RUB" />
                            <meta itemprop="availability" content="http://schema.org/InStock" />
                     div>
                     <div itemprop="brand">Брендdiv>
                     <div itemprop="model">Модельdiv>
              a>
        li>
ul>

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

Для Google не допускается разметка списка товаров при наличии детальной страницы (написано в документации). Поэтому, размечайте список только если ссылка на отдельную страницу товара отсутствует. Если детальная страница товара есть, размечайте только её.

Пример разметки товара (Product → Offer)

Товар без микроразметки:

<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="690.00">
              <meta itemprop="priceCurrency" content="RUB">
              <link itemprop="availability" href="http://schema.org/InStock">
              <div>В наличииdiv>
       div>
       <div itemprop="description">описание_товараdiv>
div>

Пример подробной микроразметки товаров:

<div itemscope itemtype="http://schema.org/Product">
       <span itemprop="name">Наименование_товараspan>
       <a href="ссылка-на-изображение.jpg"><img src="ссылка_на_изображение.jpg" itemprop="image" />a>
       <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
              <span itemprop="ratingValue">4span>
              <span itemprop="reviewCount">9span> //рейтинг 4 основан на 9 оценках
       div>
       <div itemprop="description">Описание_товараdiv>
       <div>Производитель: <span itemprop="brand">название_брендаspan>div>
       <div>Модель: <span itemprop="model">номер_моделиspan>div>
       <div>Остаток на складе: <span itemprop="sku">4span>div>
       <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
              <span itemprop="priceCurrency" content="RUB">руб.span>
              <span itemprop="price">699span>
              <span><link itemprop="availability" href="http://schema.org/InStock"/>В наличииspan>
              <meta itemprop="priceValidUntil" content="2013-09-14T21:30">
              <div itemprop="review" itemscope itemtype="http://schema.org/Review">
                     <span itemprop="name">Заголовок отзываspan>
                     от <span itemprop="author">Имя пользователяspan>,
                     <meta itemprop="datePublished" content="2013-09-14">
                     <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
                     <meta itemprop="worstRating" content="1"> //Минимальная оценка
                     <span itemprop="ratingValue">4span> //Оценка пользователя
                     <span itemprop="bestRating">5span>звезд. //Максимальная оценка
                     <span itemprop="description">текст_отзываspan>
              div>
        div>
div>

Каждый товар имеет свои особенности: где-то отсутствуют отзывы или нет названия бренда и т.д. Поэтому не всегда удается разметить товар подробно, но валидатор google будет это помечать.

Какие поля обязательные и как учитывает товары и цены Яндекс можно посмотреть на официальном сайте Яндекса.

Используемые свойства

Свойство или объект Описание свойства
http://schema.org/Product Указывается для начала разметки товара
http://schema.org/Offer Указывается для начала разметки свойств товара
http://schema.org/Review Указывается для начала разметки отзывов товара
http://schema.org/Rating Указывается для начала разметки рейтинга
name Название товара
image Изображение товара
price Цена товара
priceCurrency Валюта товара. Например: RUB, EURO, USD и т.д.
availability Доступность товара. Возможные значения:

  • http://schema.org/PreOrder - на заказ (товар под заказ).
  • http://schema.org/InStock - в наличии (товар есть в продаже).
  • http://schema.org/OutOfStock - отсутствует (товара нет в продаже).
description Описание товара
http://schema.org/AggregateRating Указывается для начала разметки рейтинга товара
ratingValue Сформированный рейтинг товара на основании голосов (оценка пользователей)
reviewCount Количество голосований (оценок) за рейтинг товара
brand Бренд товара
model Модель товара (артикул)
sku Остаток на складе (количество)
priceValidUntil Срок актуальности цены (до какого срока цена будет такой же)
name Заголовок отзыва (название)
author Автор отзыва (ФИО)
datePublished Дата публикации отзыва
worstRating Минимальная оценка отзыва
ratingValue Сформированный рейтинг отзыва на основании голосов (оценка пользователей)
bestRating Максимальная оценка отзыва
description Текст отзыва

Пример разметки услуги (Product → AggregateOffer)

Св-во AggregateOffer используется вместо Offer внутри объекта Product.

Бывают случаи, когда на сайте предлагают не товар, а услуги. Часто услуги не имеют точной цены и представлены "от" или в виде диапазона. Для этого случая можно использовать свойство AggregateOffer вместо обычного Offer.

Рекомендуется использовать объект https://schema.org/Service в случае разметки услуг, но мы предлагаем более простое решение с использованием http://schema.org/Product.

Услуга без микроразметки:

<div>
       <div>Название услугиdiv>
       <div>Описание услугиdiv>
       <img src="ссылка_на_изображение_услуги" />
       <div>
              <div>Готовы оказать услугу! Оставляйте заявку!div>
              <div>Цена: от 600 до 1000 руб.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">600span> до <span itemprop="highPrice">1000span> руб.div>
       div>
div>

Пример разметки списка статей блога (Blog)

Список статей без микроразметки:

<div>
       <article>
              <h2>название_статьи_1h2>
              <time>2019-04-22T11:48:26+00:00time>
              <img src="ссылка_на_постер_для_статьи">
              <p>краткое_описание_статьиp>
              <p>Авторp>
       article>
       <article>
              <h2>название_статьи_1h2>
              <time>2019-04-22T11:48:26+00:00time>
              <img src="ссылка_на_постер_для_статьи">
              <p>краткое_описание_статьиp>
              <p>Авторp>
       article>
       …
div>

Список статей с микроразметкой:

<div itemscope itemtype="http://schema.org/Blog">
       <div itemprop="description">описание_для_списка_статейdiv>
       <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
              <h2 itemprop="headline">название_статьи_1h2>
              <time itemprop="datePublished" datetime="2019-04-22">22 апреля 2019time>
              <img itemprop="image" src="ссылка_на_постер_для_статьи">
              <p itemprop="description">краткое_описание_статьиp>
              <p itemprop="articleBody">полный_текст_статьи_анонсp>
              <p itemprop="author">Авторp>
              <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:+79999999999">+7 (999) 999-99-99a>div>
                     <div>Почта: <a itemprop="email" href="mailto:[email protected]">[email protected]a>div>
                     <div>Факс: <a itemprop="faxNumber" href="tel:+79999999999">+7 (999) 999-99-99a>div>
                            <meta itemprop="name" content="название_сайта"> 
                     div>
                     <meta itemprop="dateModified" content="2019-04-22T11:48:26+00:00">
                     <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="ссылка_на_статью"/>
              div>
        article>
        <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
              <h2 itemprop="headline">название_статьи_2h2>
              <time itemprop="datePublished" datetime="2019-04-22">22 апреля 2019time>
              <img itemprop="image" src="ссылка_на_постер_для_статьи">
              <p itemprop="description">краткое_описание_статьиp>
              <p itemprop="articleBody">полный_текст_статьи_анонсp>
              <p itemprop="author">Авторp>
              <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:+79999999999">+7 (999) 999-99-99a>div>
                     <div>Почта: <a itemprop="email" href="mailto:[email protected]">[email protected]a>div>
                     <div>Факс: <a itemprop="faxNumber" href="tel:+79999999999">+7 (999) 999-99-99a>div>
                     <meta itemprop="name" content="название_сайта"> 
               div>
               <meta itemprop="dateModified" content="2019-04-22T11:48:26+00:00">
               <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="ссылка_на_статью"/>
        article>
        …
div>

Как правильно разметить статью блога (Article, NewsArticle или BlogPosting)

Чем отличается тип Article, NewsArticle и BlogPostiing?

Типы используют практически одинаковые свойства и передают основные параметры (заголовок, тело статьи, дата публикации). Если поменять тип BlogPosting на Article ничего не изменится.

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

Статья без микроразметки:

<article>
       <p>Автор: Автор статьиp>
       <span>Дата: <time>2019-04-22T11:48:26+00:00time>span>
       <h1>название_статьиh1>
       <img src="ссылка_на_изображение_статьи" />
       <div>полное_текст_статьиdiv>
article>

В разметке ниже, замените общий объект Article на NewsArticle или на BlogPosting, валидность сохранится. Это универсальная разметка.

Статья с микроразметкой:

<div itemscope itemtype="http://schema.org/Article">
       <p>Автор: <span itemprop="author">Автор статьиspan>p>
       <p>Дата публикации: <time itemprop="datePublished" datetime="2019-04-22">22 апреля 2019time>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:+79999999999">+7 (999) 999-99-99a>div>
               <meta itemprop="name" content="название_сайта">
       div>
       <meta itemprop="dateModified" content="2019-04-22T11:48:26+00:00">
       <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="ссылка_на_статью"/>
div>

Как правильно разметить научную работу (CreativeWork)

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

Научная работа без микроразметки:

<div>
       <img alt="essay cover" src="essay.jpg" />
       <span>Сказки Пушкинаspan>
       <span>Иван Петровspan>,
       <span>Александр Сергеевич Пушкин как выдающийся, великий русский поэт, драматург и прозаик. Общая характеристика творчества Пушкина в середине 20-х годов XIX века. История создания сказок. Образный мир и исторические корни сюжетов поэтических произведений.span>
div>

Научная работа с микроразметкой:

<div itemscope itemtype="http://schema.org/CreativeWork">
       <img itemprop="image" alt="essay cover" src="essay.jpg" />
       <meta itemprop="learningResourceType" content="StudentEssay">
       <span itemprop="name">Сказки Пушкинаspan>
       <span itemprop="author">Иван Петровspan>,
       <span itemprop="description">Александр Сергеевич Пушкин как выдающийся, великий русский поэт, драматург и прозаик. Общая характеристика творчества Пушкина в середине 20-х годов XIX века. История создания сказок. Образный мир и исторические корни сюжетов поэтических произведений.span>
div>

Больше примеров CreativeWork на официальном сайте.

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

Как правильно разметить фильм (Movie)

Фильм без микроразметки:

<div itemscope itemtype="http://schema.org/Movie"/>
       <h1>название_фильмаh1>
       <span>альтернативное_название_на_латиницеspan>
       <a href="ссылка_на_фильм">
              <img src="ссылка_на_изображение_превьюшку_фильма" />
       a>
       <p>
              <a href="ссылка_на_режиссера">фио_режиссераa>,
              <a href="ссылка_на_режиссера">фио_режиссераa>.
       p>
       <p>
              <a href="ссылка_на_продюсера">фио_продюсераa>,
              <a href="ссылка_на_продюсера">фио_продюсераa>,
              <a href="ссылка_на_всех_продюсеров">и другиеa>.
       p>
       <p>
              <a href="ссылка_на_композитора">фио_композитораa>,
              <a href="ссылка_на_композитора">фио_композитораa>.
       p>
       <p>
              <a href="ссылка_на_категорию_жанра">название_жанраa>,
              <a href="ссылка_на_категорию_жанра">название_жанраa>,
              <a href="ссылка_на_категорию_жанров">и другиеa>.
       p>
       <p>В главных ролях:p>
       <div>
              <a href="ссылка_на_актёра">фио_актёраa>
              <a href="ссылка_на_актёра">фио_актёраa>
              <a href="ссылка_на_актёра">фио_актёраa>
       div>
div>

Фильм c микроразметкой:

<div itemscope itemtype="http://schema.org/Movie"/>
       <h1 itemprop="name">название_фильмаh1>
       <span itemprop="alternativeHeadline">альтернативное_название_на_латиницеspan>
       <a itemprop="url" href="ссылка_на_фильм">
              <img src="ссылка_на_изображение_превьюшку_фильма" itemprop="image" />
       a>
       <p>
              <a itemprop="director" href="ссылка_на_режиссера">фио_режиссераa>,
              <a itemprop="director" href="ссылка_на_режиссера">фио_режиссераa>.
       p>
       <p>
              <a itemprop="producer" href="ссылка_на_продюсера">фио_продюсераa>,
              <a itemprop="producer" href="ссылка_на_продюсера">фио_продюсераa>,
              <a href="ссылка_на_всех_продюсеров">и другиеa>.
       p>
       <p>
              <a itemprop="musicBy" href="ссылка_на_композитора">фио_композитораa>,
              <a itemprop="musicBy" href="ссылка_на_композитора">фио_композитораa>.
       p>
       <p>
              <a itemprop="genre" href="ссылка_на_категорию_жанра">название_жанраa>,
              <a itemprop="genre" href="ссылка_на_категорию_жанра">название_жанраa>,
              <a href="ссылка_на_категорию_жанров">и другиеa>.
       p>
       <p>В главных ролях:p>
       <div>
              <a itemprop="actor" href="ссылка_на_актёра">фио_актёраa>
              <a itemprop="actor" href="ссылка_на_актёра">фио_актёраa>
              <a itemprop="actor" href="ссылка_на_актёра">фио_актёраa>
       div>
       <div itemprop="video" itemscope itemtype="http://schema.org/VideoObject"/>
              
              <link itemprop="url" href="ссылка_на_фильм" />
              <span itemprop="description">описание_фильмаspan>
              <meta itemprop="contentRating" content="официальный_рейтинг_фильма_возрастной_категории" />
              <meta itemprop="duration" content="PT1H30M" />
              <meta itemprop="uploadDate" content="2019-04-23T09:12:32+00:00" />
              <meta itemprop="inLanguage" content="ru" />
              <meta itemprop="isFamilyFriendly" content="true" />
              <meta itemprop="productionCompany" content="фио_компании_выпустившая_фильм" />
              <div>
                     <h1 itemprop="name">название_фильмаh1>
                     <span itemprop="alternativeHeadline">альтернативное_название_на_латиницеspan>
                     <img src="ссылка_на_изображение_превьюшку_фильма" itemprop="thumbnailUrl thumbnail" />
              div>
       div>
       <meta itemprop="dateCreated" content="2019-04-23T09:12:32+00:00" />
div>

Используемые свойства

Свойство или объект Описание свойства
http://schema.org/Movie Указывается для начала разметки фильма
http://schema.org/VideoObject Указывается для начала разметки объекта видео
director Режиссер фильма
producer Продюсер фильма
musicBy Композитор фильма или название группы
genre Жанр фильма
actor Актёр фильма
url Ссылка на фильм (видео)
description Краткое описание фильма
contentRating Возрастная категория фильма. Например, «MPAA R»
duration Продолжительность фильма, в формате ISO 8601. Например, промежуток 1 час 30 минут записывается как PT1H30M.
dateReleased Дата выхода фильма на экраны. Например, «2019-01-08T00:00:00»
uploadDate Дата загрузки фильма. Например, «2019-01-08T00:00:00»
dateCreated Дата окончания съемок фильма. Например, Например, «2019-01-08T00:00:00»
inLanguage Оригинальный язык фильма (ru, en, de и т.д.)
isFamilyFriendly True или False. Указывает, подходит ли этот фильм для семейного просмотра
productionCompany Кинокомпания, выпустившая фильм. Например, «Warner bros»
name Название фильма
alternativeHeadline Альтернативное название фильма на латинице
thumbnailUrl Постер фильма (изображение)
subtitleLanguage Язык субтитров (ru, en, de и т.д.)

Как правильно разметить рецепт (Recipe)

Рецепт без микроразметки:

<div>
       <h1>название_рецептаh1>
       <div>описание_рецептаdiv>
       <img src="ссылка_на_изображение_готового_блюда" />
       <ul>
              <li>Автор рецепта: Авторli>
              <li>После приготовления вы получите 4 порцииli>
              <li>Время приготовления: 45 минутli>
       ul>
       <h2>ингредиентыh2>
       <ul>
              <li>1 курицаli>
              <li>5 л пиваli>
              <li>сольli>
              <li>перецli>
              <li>специи по вкусуli>
       ul>
       <h2>способ_приготовленияh2>
       <ul>
              <li>
                     <img src="ссылка_на_изображение_ингредиента" />
                     Курицу нарезать на кусочки, выложить в форму для запекания, посолить, поперчить, добавить специи по вкусу.
              li>
              <li>
                     <img src="ссылка_на_изображение_ингредиента" />
                     Курицу залить пивом, поставить в духовку.
              li>
              <li>
                     <img src="ссылка_на_изображение_ингредиента" />
                     Жарить при температуре 180 градусов в течение 40—45 минут.
              li>
       ul>
       <span>Блюда из курицыspan>
       <div>
              Пищевая ценность: 
              <ul>
                     <li>Калории: 120 ккал.li>
                     <li>Жиры: 7 г.li>
                     <li>Углеводы: 1 г.li>
              ul>
       div>
       Приятного аппетита!
div>

Пример рецепта с микроразметкой:

<div itemscope itemtype="http://schema.org/Recipe"/>
       <h1 itemprop="name">название_рецептаh1>
       <div itemprop="description">описание_рецептаdiv>
       <div>Теги: <span itemprop="keywords">ключевые, слова, для, рецептаspan>div>
       <img itemprop="image" src="ссылка_на_изображение_готового_блюда" />
       <ul>
              <li>Автор рецепта: <span itemprop="author">Авторspan>li>
              <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">5 л пиваli>
              <li itemprop="recipeIngredient">сольli>
              <li itemprop="recipeIngredient">перецli>
              <li itemprop="recipeIngredient">специи по вкусуli>
       ul>
       <h2>способ_приготовленияh2>
       <ul itemprop="recipeInstructions" itemtype="https://schema.org/ItemList" itemscope>
              <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"/>
                     <img itemprop="image" src="ссылка_на_изображение_ингредиента" />
                     Курицу нарезать на кусочки, выложить в форму для запекания, посолить, поперчить, добавить специи по вкусу.
              li>
              <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"/>
                     <img itemprop="image" src="ссылка_на_изображение_ингредиента" />
                     Курицу залить пивом, поставить в духовку.
              li>
              <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"/>
                     <img itemprop="image" src="ссылка_на_изображение_ингредиента" />
                     Жарить при температуре 180 градусов в течение 40—45 минут.
              li>
       ul>
       <span itemprop="recipeCategory">Блюда из курицыspan>
       <div itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation"/>
              Пищевая ценность:
              <ul>
                     <li>Калории: <span itemprop="calories">120 ккал.span>,li>
                     <li>Жиры: <span itemprop="fatContent">7 г.span>li>
                     <li>Углеводы: <span itemprop="carbohydrateContent">1 г.span>li>
              ul>
       div>
       Приятного аппетита!
div>

Используемые свойства

Свойство или объект Описание свойства
http://schema.org/Recipe Указывается для начала разметки рецепта
name Обязательное поле. (Текст) Название рецепта или блюда.
image (URL) URL изображения результата приготовления. Рекомендуем указать данное поле для формирования расширенного сниппета.
author (Текст, Person/name, Organization/name) Автор рецепта.
recipeYield (Текст) количество порций, получаемых с помощью рецепта.
totalTime (Duration) время приготовления. Указывается в формате ISO 8601. Например, «PT30M» (30 минут).
recipeIngredient Обязательное поле. (Текст) ингредиент рецепта и его объем, количество (может быть несколько).
recipeInstructions (Текст) Инструкция по приготовлению
image (URL) URL изображение процесса приготовления, может быть несколько. Рекомендуем указать данное поле для формирования расширенного сниппета.
recipeCategory (Текст) тип блюда. Например, горячее блюдо, десерт.
nutrition (NutritionInformation) энергетическая или пищевая ценность блюда, то есть содержание калорий, белков, жиров, углеводов, витаминов и т. д.
calories Калорийность.
fatContent Жиры.
carbohydrateContent Углеводы.
sugarContent Сахар.
fiberContent Клетчатка.
proteinContent Белки.
cholesterolContent Холестерин.
servingSize (Текст) порция, объем или вес для которого указывается информация о энергетической и пищевой ценности.

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

Изображение без микроразметки:

<div>
       <h1>название_изображенияh1>
       <img src="ссылка_на_изображение" />
       <a href="ссылка_на_автора">фио_автораa>
       <span>Портретspan>
       <span>описание_изображенияspan>
div>

Изображение с микроразметкой:

<div itemscope itemtype="http://schema.org/Painting" />
       <h1 itemprop="name">название_изображенияh1>
       <img src="ссылка_на_изображение" />
       <a href="ссылка_на_автора" itemprop="author">фио_автораa>
       <span itemprop="genre">Портретspan>
       <span itemprop="description">описание_изображенияspan>
div>

Как правильно разметить картинку (ImageObject)

Картинка без микроразметки:

<div>
       <div>Компьютерdiv>
       <img src="computer.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>

Как правильно разметить видео (VideoObject)

Видео без микроразметки:

 <div>
	 <link href="ссылка_на_видео">
	 <meta content="название_видео" />
	 <p>описание_видеоp>
	 <p>Дата загрузки: 2013-06-05T00:00:00p>
div>

Видео с микроразметкой:

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

Как правильно разметить событие (Event)

Событие без микроразметки:

<div itemscope itemtype="http://schema.org/Event" />
        <img src="изображение_или_постер_события.jpg" />
	<div>название_событияdiv>
	<div>описание_событияdiv>
	<div>
	       Концерт состоится 8 мая, в 19:30
	       Окончание концерта 8 мая, в 20:30
	div>
	<div>
	       Место проведения: страна_или_город, полный_адрес
	div>
	<div>фио_исполнителя_или_название_группыdiv>
div>

Событие c микроразметкой:

<div itemscope itemtype="http://schema.org/Event" />
	<img itemprop="image" src="изображение_или_постер_события.jpg" />
	<div itemprop="name">название_событияdiv>
	<div itemprop="description">описание_событияdiv>
	<div>
                Концерт состоится
	       <time itemprop="startDate" datetime="2019-05-08T19:30">8 мая, в 19:30time>
	       Окончание концерта
	       <time itemprop="endDate" datetime="2019-05-08T20:30">8 мая, в 20:30time>
	div>
	<div itemprop="location" itemscope itemtype="http://schema.org/Place" />
	       Место проведения: <span itemprop="name">страна_или_городspan>,
	       <span itemprop="address">полный_адресspan>
	div>
	<div itemprop="performer" itemscope itemtype="http://schema.org/Person" />
	        <span itemprop="name">фио_исполнителя_или_название_группыspan>
	 div>
div>

Как правильно разметить Вопрос-ответ (Question)

Является дочерним объектом типа FAQPage и QAPage.

Вопрос-ответ без микроразметки:

<div>
       <div>Как продвинуть сайт в Москве?div>
       <div>Сколько не пытаюсь, не получается.div>
       <div>Ответ №1: <span>Для начала прочитайте статью на тему, как продвинуть сайт в регионах: https://d-element.ru/about/blog/kak-prodvinut-sayt-v-regionakh/span>div>
       <div>Ответ №2: <span>Кто бы умел...span>div>
div>

Вопрос-ответ c микроразметкой (FAQ Page) (один вопрос — один ответ):

<div itemscope itemtype="https://schema.org/FAQPage">
       <div itemprop="mainEntity" itemscope itemtype="https://schema.org/Question">
              <div itemprop="name">Как продвинуть сайт в Москве?div>
              <div itemprop="text">Сколько не пытаюсь, не получается.div>
              <span itemprop="answerCount">1span> ответdiv>
              <div itemprop="upvoteCount">196div> //Всего голосов за вопрос
              <div itemprop="acceptedAnswer" itemscope="" itemtype="http://schema.org/Answer"> 
                     <div itemprop="upvoteCount"/>3div> //Всего голосов за ответ
                     Ответ: <span itemprop="text">Для начала прочитайте статью на тему, как продвинуть сайт в регионах: https://d-element.ru/about/blog/kak-prodvinut-sayt-v-regionakh/span>
              div>
       div>
div>

Пример подробной микроразметки Вопрос-ответ (с возможностью ответа на вопросы, один вопрос — несколько ответов) для типа QAPage:

<div itemscope itemtype="https://schema.org/QAPage">
       <div itemscope itemtype="http://schema.org/Question">
              <h1 itemprop="name">Как продвинуть сайт в Москве?h1>
              <div itemprop="upvoteCount">196div>
              <div itemprop="text">Как добиться результата? С чего лучше начать?div>
              <span itemprop="answerCount">2span> ответаdiv>
              <div><time itemprop="dateCreated" datetime="2019-11-11T20:07Z">11 ноября, 20:03time>div>
     
              <div itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Имя_пользователя_кто_задал_вопросspan>div>
              <div>Всего задал <span itemprop="answerCount">4span> вопросаdiv>
              <div itemprop="suggestedAnswer acceptedAnswer" itemscope itemtype="http://schema.org/Answer">
                     <div itemprop="upvoteCount">всего_голосов_за_этот_ответdiv>
                     <div itemprop="text">текст_ответаdiv>
                     <div>Ответ оставлен <time itemprop="dateCreated" datetime="2019-12-01T22:06Z">1 декабря, 22:06time>div>
                     <div itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Имя_пользователя_кто_оставил_ответspan>div>
              div>

              <div itemprop="suggestedAnswer" itemscope itemtype="http://schema.org/Answer">
                     <div itemprop="upvoteCount">всего_голосов_за_этот_ответdiv>
                     <div itemprop="text">текст_ответаdiv>
                     <div>Ответ оставлен <time itemprop="dateCreated" datetime="2019-12-01T22:10Z">1 декабря, 22:10time>div>
                     <div itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Имя_пользователя_кто_оставил_ответspan>div>
              div>
       div>
div>

Как правильно разметить отзывы (Review)

В данный момент Яндекс принимает отзывы только про автомобили или организации, Google же принимает отзывы на организации, книгу (Book), курс (Course), мероприятие (Event), инструкцию (HowTo), фильм (Movie), товар (Product), рецепт (Recipe), приложение (Game).

Ниже приведен пример на основе отзыва об организации (Organization).

Отзывы без микроразметки:

<div>
       <span>Отличная организация!span> от <span>Николай Правдинspan>, 
       <span>Очень хорошая организация! Пользовался их услугами, все ок!span>
div>

Отзывы c микроразметкой shema.org:

<div itemscope itemtype="http://schema.org/Review">
       <a href="ссылка_на_отзыв" itemprop="url">№134a>
       <span itemprop="name">Отличная организация!span> от <span itemprop="author">Николай Правдинspan>,
       <time itemprop="datePublished" datetime="2005-08-09">09 августа 2005time>
    
       <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">
              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:+79999999999">+7 (999) 999-99-99a>div>
              <div>Почта: <a itemprop="email" href="mailto:[email protected]">[email protected]a>div>
              <div>Факс: <a itemprop="faxNumber" href="tel:+79999999999">+7 (999) 999-99-99a>div>
       div>
       <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
              <meta itemprop="worstRating" content="0">
              <span itemprop="ratingValue">9span>
              <span itemprop="bestRating">10span>
       div>
       <span itemprop="reviewBody">Очень хорошая организация! Пользовался их услугами, все ок!span>
div>

Используемые свойства

Свойство или объект Описание свойства
http://schema.org/Review Указывается для начала разметки отзыва
name Заголовок (название) отзыва
author Автор отзыва (ФИО)
datePublished Дата публикации отзыва в формате ISO 8601
itemReviewed Объект отзыва (то, о чем отзыв). Может принимать значения:

  • Action
  • CreativeWork
  • Event
  • Intangible
  • MedicalEntity
  • Organization
  • Person
  • Place
  • Product
reviewRating Рейтинг отзыва (объект)
worstRating Самая низкая оценка
bestRating Самая высокая оценка
ratingValue Рейтинг отзыва (цифра)
reviewBody Текст отзыва

На сайте можно разметить любое количество поисков. Объект SearchAction является дочерним объектом WebSite.

Поиск сайта без микроразметки:

<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>>

Поле query хранит GET запрос поиска из поля q.

Как правильно разметить пошаговую инструкцию (HowTo)

Разметку HowTo рекомендуется использовать для всех статей/обзоров/решений, которые включают в себя поэтапное выполнение (исключая приготовление блюд, для этого есть свойство Recipe). Также HowTo можно использовать для разметки условий использования или установки на страницах товара или категории товаров. Но Google требует, чтобы HowTo не использовали в рекламных целях.

На одной странице можно использовать только один объект HowTo. Контент HowTo должен быть виден пользователям.

Разметку HowTo поддерживает только Google.

HowTo без микроразметки:

<div>
	<div>Название инструкцииdiv>
	<div>Краткое описаниеdiv>
	<div>Потребуется 2 минутыdiv>

	<-- видео-инструкция -->
	<div>
		<video>...video>
	div>

	<p>Материалы, необходимые для выполнения инструкций:p>
	<div>
		<a href="ссылка_на_материал"><span>материал №1span>a>
		<img alt="изображение_материала_№1" src="ссылка_на_изображение"/>
	div>
	<div>
		<a href="ссылка_на_материал"><span>материал №2span>a>
		<img alt="изображение_материала_№2" src="ссылка_на_изображение"/>
	div>

	<p>Все работы мы будем выполнять при помощи:p>
	<div>
		<a href="ссылка_на_инструмент"><span>bucketspan>a>
		<img alt="изображение_инструмента" src="ссылка_на_изображение"/>
	div>

	<-- этапы выполнения -->
	<-- этап №1 -->
	<div>
		<div>Заголовок этапа №1div>
		<img src="ссылка_на_изображение_этапа"/>
		<div>Описание этапаdiv>
	div>

	<-- этап №2 -->
	<div>
		<div>Заголовок этапа №2div>
		<img src="ссылка_на_изображение_этапа"/>
		<div>Описание этапаdiv>
	div>
	...
div>


HowTo с подробной микроразметкой:

<div itemscope itemtype="http://schema.org/HowTo">
	<div itemprop="name">Название инструкцииdiv>
	<div itemprop="description">Краткое описаниеdiv>
	<div>Потребуется: <span itemprop="totalTime" content="PT2M">2 минутыspan>div>

	<-- видео-инструкция -->
	<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
		<meta itemprop="name" content="Название видео" />
		<meta itemprop="description" content="Краткое описание видео" />
		<link itemprop="thumbnailUrl" content="ссылка_на_пост_видео" />
		<link itemprop="contentUrl" content="ссылка_на_видео" />
		<link itemprop="embedUrl" content="ссылка_на_вставку_видео" />
		<meta itemprop="duration" content="продолжительность_например_P1MT10S" />
		<meta itemprop="uploadDate" content="дата_загрузки_например_2021-01-05T08:00:00+08:00" />
		<video>...video>
	div>

	<p>Материалы, необходимые для выполнения инструкций:p>
	<div itemprop="supply" itemscope itemtype="http://schema.org/HowToSupply">
		<a itemprop="url" href="ссылка_на_материал">
			<span itemprop="name">материал №1span>
		a>
		<img alt="изображение_материала_№1" itemprop="image" src="ссылка_на_изображение"/>
	div>
	<div itemprop="supply" itemscope itemtype="http://schema.org/HowToSupply">
		<a itemprop="url" href="ссылка_на_материал">
			<span itemprop="name">материал №2span>
		a>
		<img alt="изображение_материала_№2" itemprop="image" src="ссылка_на_изображение"/>
	div>

	<p>Все работы мы будем выполнять при помощи:p>
	<div itemprop="tool" itemscope itemtype="http://schema.org/HowToTool">
		<a itemprop="url" href="ссылка_на_инструмент">
			<span itemprop="name">bucketspan>
		a>
		<img alt="изображение_инструмента" itemprop="image" src="ссылка_на_изображение"/>
	div>

	<-- этапы выполнения -->
	<-- этап №1 -->
	<div itemprop="step" itemscope itemtype="http://schema.org/HowToSection">
		<link itemprop="url" href="ссылка_якорь_на_этап" />
		<meta itemprop="position" content="1"/>
		<div itemprop="name">Заголовок этапа №1div>
		<img itemprop="image" src="ссылка_на_изображение_этапа"/>
		<link itemprop="video" href="ссылка_на_видео_этапа" />

		<-- берем сразу одно описание -->
		<div itemprop="text">Описание этапаdiv>

		<-- или делим описание на подэтапы -->
		<div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">
			<meta itemprop="position" content="1"/>
			<div itemprop="text">Сначала делай раз.div>
    		div>
		<div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">
			<meta itemprop="position" content="2"/>
			<div itemprop="text">Потом делай два.div>
    		div>

		<-- добавляем HowToTip, если используем пояснение к HowToDirection -->
		<div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToTip">
			<meta itemprop="position" content="3"/>
			<div itemprop="text">Во втором пункте будьте осторожней, мало ли.div>
    		div>
	div>

	<-- этап №2 -->
	<div itemprop="step" itemscope itemtype="http://schema.org/HowToSection">
		<link itemprop="url" href="ссылка_якорь_на_этап" />
		<meta itemprop="position" content="2"/>
		<div itemprop="name">Заголовок этапа №2div>
		<img itemprop="image" src="ссылка_на_изображение_этапа"/>
		<link itemprop="video" href="ссылка_на_видео_этапа" />

		<-- берем сразу одно описание -->
		<div itemprop="text">Описание этапаdiv>

		<-- или делим описание на подэтапы  -->
		<div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">
			<meta itemprop="position" content="1"/>
			<div itemprop="text">Сначала делай раз.div>
    		div>
		<div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">
			<meta itemprop="position" content="2"/>
			<div itemprop="text">Потом делай два.div>
    		div>

		<-- добавляем HowToTip, если используем пояснение к HowToDirection -->
		<div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToTip">
			<meta itemprop="position" content="3"/>
			<div itemprop="text">Во втором пункте будьте осторожней, мало ли.div>
    		div>
	div>
	...

Важно учесть, что валидатор Google выдает ошибку на корректную разметку в месте разметки HowToDirectionHowToTip при использовании объекта itemListElement. Видимо, валидатор Google сам не поддерживает то, что описал у себя в справке по HowTo.

Футер без микроразметки:

<footer>
	 <div>© 2019 Все права защищены.div>
footer>

Футер с микроразметкой schema.org:

<footer itemscope itemtype="http://schema.org/WPFooter">
       <meta itemprop="copyrightYear" content="2019">
       <meta itemprop="copyrightHolder" content="Держатель_копирайта">
       <div>© 2019 Все права защищены.div>
footer>

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

 

Источник

Источник

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
UnInfo - инфопортал

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

Принять