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

Содержание

Введение

1. Schema.org

1.1 Разметка Schema.org для хлебных крошек

1.2 Разметка Schema.org для картинок

1.3 Разметка Schema.org для видео материалов

1.4 Разметка Schema.org для вопросов и ответов

1.5 Разметка Schema.org для отзывов

1.6 Разметка Schema.org для контактов и информации о компании

1.7 Разметка Schema.org для новостей и статей

1.8 Разметка Schema.org для товаров

2. Open Graph

3. JSON-LD

Заключение




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

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

1. Schema.org

Этот стандарт микроразметки появился в 2011 году и используется как в поисковой системе Яндекс, так и в поисковой системе Google. Её отличием является то, что она настраивается для конкретных элементов страницы сайта (то есть прямо в имеющемся контенте страниц), а не для всей страницы целиком, кроме того – ее настройка влияет именно на представление сайта в результатах поиска – можно добавить новую информацию в сниппеты, улучшить представление уже имеющихся блоков.

Важные моменты по настройке микроразметки schema.org:

- Микроразметка начинается с указания нужного формата в отдельном теге, например:

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

- Ссылки на форматы нужно указывать обязательно с протоколом, например, должна быть полная ссылка вида «https://schema.org/Offer», так как Яндекс может не пропустить ссылки вида «//schema.org/Offer»;

- Обычно разметка «текстовых элементов» добавляется с помощью отдельных тегов <span>, например:

<span itemprop="streetAddress">Советская, д. 1</span>

Но можно добавлять параметры и к уже существующим тегам, если их значение точно описывает параметр разметки (например, можно добавить параметры прямо к заголовку H1, так как не рекомендуется добавление внутренних тегов в теги <h1></h1>).

Отдельно отметим формат data-vocabulary.org – это уже несколько устаревший формат, который разрабатывался Google еще до schema.org, его разработка остановлена, поэтому в статье мы не будем его касаться.

Что же можно разметить, используя schema.org? На «типичном сайте» в основном размечают следующие элементы:

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

- Отзывы (в настоящий момент, не поддерживается Яндексом, но поддерживается Google);

- Видео контент;

- Изображения;

- Товары;

- Контакты и информация о компании;

- Новости и статьи;

- Вопросы и ответы.

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


1.1 Разметка Schema.org для хлебных крошек

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

schema.org breadcrumbs хлебные крошки микроразметка

Для разметки хлебных крошек используется специальный формат https://schema.org/BreadcrumbList.

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

<ul itemscope itemtype="https://schema.org/BreadcrumbList">

<li itemprop="itemListElement" itemscope itemtype=https://schema.org/ListItem>

<a itemscope itemtype="https://schema.org/Thing" itemprop="item" href="/" itemid="https://site.ru/">

<span itemprop="name">Главная</span>

</a>

<meta itemprop="position" content="1" />

</li>

<li itemprop="itemListElement" itemscope itemtype=https://schema.org/ListItem>

<a itemscope itemtype="https://schema.org/Thing" itemprop="item" href="second_page"

itemid="second_page">

<span itemprop="name">Вторая страница</span>

</a><meta itemprop="position" content="2" />

</li>

<li itemprop="itemListElement" itemscope itemtype=https://schema.org/ListItem>

<meta itemscope itemtype="https://schema.org/Thing" itemprop="item" itemid="third_page">

<span itemprop="name">Третья страница</span>

<meta itemprop="position" content="3" />

</li>

</ul>


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

Таким образом, для прохождения валидации и в Яндекс и в Google, необходимо указание в разметке хлебных крошек параметров:

- itemListElement – указание разметки https://schema.org/ListItem;

- item – указание разметки https://schema.org/Thing и конкретных ссылок на страницы;

- name – конкретный анкор ссылки;

- position – позиция ссылки в хлебных крошках.

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


1.2 Разметка Schema.org для картинок

Для разметки изображений используется специальный формат https://schema.org/ImageObject.

Эта микроразметка позволит улучшить представление сайта в сервисе Яндекс Картинки или Google Картинки.

Пример микроразметки изображений по данному формату, который проходит валидацию и в Яндекс и в Google:

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

<img src="image.jpg" itemprop="contentUrl" />

<span itemprop="description">Описание картинки</span>

</div>


Таким образом, в разметке изображений указывается путь к Вашему фото и описание этой картинки, причем описание (параметр «description») не является обязательным для прохождения валидации как в Яндекс, так и в Google, то есть валидацию пройдет и разметка вообще без описания:

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

<img src="image.jpg" itemprop="contentUrl" />

</div>


Но нужно отметить, описание поможет немного улучшить представление картинки.


1.3 Разметка Schema.org для видео материалов

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

Пример сниппета с размеченным видео:

schema.org микроразметка видео контента

Для разметки видео контента используется схема https://schema.org/VideoObject.

Пример микроразметки видео ролика, который проходит валидацию и в Яндекс и в Google:

<div>

<iframe src="https://www.youtube.com/embed/W4XrivKvhHI" width="560" height="315" allowfullscreen name="su-youtube">

</iframe>

</div>

<div itemscope="itemscope" itemtype="https://schema.org/VideoObject" style="display: none;">

<a itemprop="url" href="https://www.youtube.com/watch?v=W4XrivKvhHI&feature=youtu.be">

<span itemprop="name">Название ролика</span>

</a>

<p itemprop="description">Описание о чем ролик</p>

<p itemprop="duration" content="T4M12S"> </p>

<p itemprop="isFamilyFriendly" content="true"> </p>

<p>Дата загрузки:<span itemprop="uploadDate">2017-11-13T00:00:00</span></p>

<span itemprop="thumbnail" itemscope="itemscope" itemtype="https://schema.org/ImageObject">

<img itemprop="contentUrl" src="https://i.ytimg.com/vi/5jMQRCopN4I/hqdefault.jpg" />

</span>

<link itemprop="thumbnailUrl" href="https://i.ytimg.com/vi/5jMQRCopN4I/hqdefault.jpg" />

</div>


Используемые параметры:

- iframe src - ссылка на видео;

- name – название ролика;

- description – описание ролика;

- duration – длительность ролика, именно в формате типа «T4M12S» - TминутыМсекундыS;

- isFamilyFriendly – указание, можно ли смотреть, по сути, детям – либо true (можно), либо false (только для взрослых);

- uploadDate – дата и время загрузки в формате 2017-11-13T00:00:00;

- contentUrl и thumbnail – указание схемы разметки https://schema.org/ImageObject для превью видео;

- thumbnailUrl – это ссылка на картинку-превью видео, для youtube ее можно получить, используя ссылку типа https://i.ytimg.com/vi/5jMQRCopN4I/hqdefault.jpg, в которой вместо выделенного красным фрагмента нужно поставить идентификатор Вашего видео, как правило, это последний фрагмент в URL видео на youtube.


1.4 Разметка Schema.org для вопросов и ответов

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

Пример:

schema.org микроразметка вопросов и ответов

Для настройки разметки используются схемы https://schema.org/Question, https://schema.org/Answer.

Пример разметки вопроса и ответа на него, который проходит валидацию и в Яндекс и в Google:

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

<p><span itemprop="name">Вопрос</span></p>

<div itemprop="acceptedAnswer" itemscope="itemscope" itemtype="https://schema.org/Answer">

<div itemprop="text">

<p>Ответ.</p>

</div>

</div>

</div>


Для этого вида разметки нет большого количества параметров, вопрос оформляется в параметр «name», ответ - в «text».


1.5 Разметка Schema.org для отзывов

Стоит отметить, что в настоящий момент Яндекс в полной мере не поддерживает разметку отзывов (https://yandex.ru/support/webmaster/supported-schemas/review-organization.html):

schema.org предпрупреждение о разметке отзывов

Но Google продолжает поддерживать этот тип разметки.

Обнаружив микроразметку отзывов и оценок, поисковая система может показывать в сниппете текст отзыва и оценку-рейтинг.

Для разметки отзывов используется схема https://schema.org/Review.

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

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

<p itemprop="name"><a href="/url" itemprop="url">Имя Фамилия</a></p>

<div>

<div itemprop="author" itemscope="itemscope" itemtype="https://schema.org/Person">

<span itemprop="name">Имя Фамилия</span>

</div>

<span itemprop="datePublished" content="2019-05-06">06.05.2019</span>

</div>

<div itemprop="reviewRating" itemscope="itemscope" itemtype="https://schema.org/Rating">

<p><span itemprop="ratingValue">5</span><span itemprop="bestRating"></span>.</p>

</div>

<div itemprop="reviewBody">

<p>Текст отзыва.</p>

</div>

<div style="display: none;" itemprop="itemReviewed" itemscope="itemscope" itemtype=" https://schema.org/Organization">

<span itemprop="name">Название компании</span>

<div itemscope="itemscope" itemtype="https://schema.org/PostalAddress" itemprop="address">

<span itemprop="streetAddress">Адрес компании</span>

<span itemprop="postalCode">Индекс</span>

<span itemprop="addressLocality">Регион компании-город</span>

</div>

<span itemprop="telephone">Телефон</span> <span itemprop="email">email@mail.ru</span></div>

</div>


Используемые параметры:

- первый параметр name содержит ссылку на страницу, где размещен отзыв и название данного отзыва;

- author содержит объявление разметки https://schema.org/Person и указывает того, кто оставил отзыв – ФИО или название компании;

- datePublished – дата публикации отзыва;

- reviewRating – описание рейтинга-оценки данного отзыва;

- ratingValue – конкретная оценка;

- reviewBody – блок текста отзыва;

- Блок описания компании, о которой оставлен отзыв – здесь указываются схемы: https://schema.org/Organization (с параметром name для названия компании), https://schema.org/PostalAddress (с параметрами streetAddress – улица, номер дома, квартира-офис, postalCode - можно указать индекс, addressLocality – город-регион, telephone – номер телефона, email – электронный адрес).


1.6 Разметка Schema.org для контактов и информации о компании

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

Используются схемы https://schema.org/Organization и https://schema.org/PostalAddress.

Пример сниппета с разметкой «О компании»:

schema.org пример разметки о компании в сниппете schema.org пример микроразметкиразметки о компании в сниппете

Пример разметки с информацией о компании, который проходит валидацию и в Яндекс и в Google:

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

<span itemprop="name">Название компании</span>

<div itemprop="address" itemscope="itemscope" itemtype="https://schema.org/PostalAddress">

<span itemprop="streetAddress">Улица, дом, квартира-офис</span>

<span itemprop="addressLocality">Регион-город</span>

</div>

<span itemprop="telephone">Телефон</span>

<span itemprop="email">Электронный адрес</span>

</div>


Здесь используются следующие параметры:

- name – для указания названия компании;

- streetAddress – указание адреса, улица, дом;

- addressLocality – местоположение организации, регион;

- telephone – номер телефона;

- email – электронный адрес;

Дополнительно можно указывать индекс так:

<span itemprop="postalCode">Индекс</span>

1.7 Разметка Schema.org для новостей и статей

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

В данном случае используется схема https://schema.org/NewsArticle. В целом, этот тип микроразметки относится к подвиду разметки творческих работ CreativeWork, но подходит для страниц статей и новостей, блога.

Пример разметки статьи, который проходит валидацию и в Яндекс и в Google:

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

<meta itemprop="genre" content="Жанр статьи">

<h1 itemprop="headline">Заголовок-название статьи</h1>

<div itemprop="author" itemscope itemtype="https://schema.org/Person">

<span itemprop="name">Автор (например, название сайта-компании)</span>

</div>

<meta itemprop="datePublished" content="2015-02-05T08:00:00+08:00"/>

<meta itemprop="image" content="https://www.site.ru/images/image.jpg">

<div itemprop="description">

<p>Описание статьи.</p>

</div>

<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">

<meta itemprop="name" content="Название компании">

<meta itemprop="telephone" content="+71111111111">

<meta itemprop="address" content="City">

<span itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">

<img class="itemprops" itemprop="url image" src="https://www.site.ru/images/image.jpg" />

</span>

</div>

</div>


Некоторые пояснения:

В параметре itemprop="genre" указывается жанр статьи (если трудно выделить жанр, то можно указать, хотя бы «Статья» или «Новость о компании»/«Новость отрасли»).

В параметре itemprop="author" указывается информация о том, кто является автором статьи или новости (если автора нет, то указывать название компании).

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

В параметре itemprop="datePublished" рекомендуется указывать дату публикации именно в формате типа «2015-02-05T08:00:00+08:00», так как он поддерживается и Яндекс и Google.

В параметре itemprop="image" указывается картинка для данной статьи (если на сайте проблема с картинками и у статей их нет, то хотя бы логотип добавить можно).

В блоке с параметром itemprop="publisher" указывается разметка с информацией о компании по схеме https://schema.org/Organization, логотип размечен по схеме https://schema.org/ImageObject.


1.8 Разметка Schema.org для товаров

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

Пример отображения разметки товара в сниппете:

schema.org микроразметка товаров пример

Для настройки используются схемы https://schema.org/Product, https://schema.org/Offer.

Пример разметки товара, который проходит валидацию и в Яндекс и в Google:

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

<img itemprop="image" src="/images/image.png" />

<meta itemprop="brand" content="Название бренда"/>

<span itemprop = "name">Название товара</span>

<meta itemprop="description" content="Описание товара"/>

<div itemprop = "offers" itemscope itemtype = "https://schema.org/Offer">

<link itemprop="url" href="https://www.site.ru/catalog/tovar" />

<div itemprop = "price">

<meta itemprop="priceCurrency" content="RUB"/>1000.00

</div>

<span>руб.</span>

<span>В наличии</span>

<link itemprop="availability" href="https://schema.org/InStock">

</div>

</div>


Нужно отметить, что цена в сниппете не показывается, если в Offer в свойстве availability указано, что товара нет в наличии.

Используемые параметры:

- itemprop="image" – указывается фото товара;

- itemprop="brand" – указывается название бренда;

- itemprop = "name" – указывается название товара;

- itemprop="description" – указывается описание товара;

- itemprop="url" – указывается URL страниц товара;

- itemprop = "price" – здесь указывается цена товара, причем важно, чтобы в блоке данного параметра была указано только цифра;

- itemprop="availability" – указывается наличие товара (если не в наличии, то нужно указать https://schema.org/OutOfStock).

Отметим, что для товаров в валидаторе Google есть возможность предварительного просмотра отображения разметки:

schema.org предварительный просмотр разметки товаров

schema.org предварительный просмотр микроразметки товаров

2. Open Graph

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

В настоящий момент, Open Graph будет работать в социальных сетях: Facebook, Вконтакте, Google+, Twitter, LinkedIn, Pinterest, а также - в сервисе Яндекс.Видео.

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

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

- website – услуги, коммерческие страницы;

- article – информационные страницы;

- video.movie/video.tv_show/video.other – видео фильм, шоу, прочее видео и т.д.

Эти значения проставляются в параметр og:type.

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

- og:title – название страницы, которое будет отображаться в представлении сайта;

- og:description – описание страницы, которое будет отображаться в представлении сайта;

- og:image – URL картинки, которая будет отображаться;

- og:url – URL самой страницы;

- og:site_name – название сайта/компании;

- og:site – домен типа;

- og:type:article:section – можно использовать для указания категории конкретной статьи.

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

- og:video – URL видео на сервере;

- video:duration – длительность видео в секундах;

- ya:ovs:upload_date – дата загрузки в формате «2017-11-13»;

- ya:ovs:adult – только для взрослых или нет (true/false);

- og:video:type – тип самого видео, например, «application/x-shockwave-flash».

Можно настраивать индивидуальные разметки для разных сетей, подставляя вместо «og», название социальной сети, например, «twitter», «vk», например:

<meta property="twitter:url" content="https://site.ru/page">

<meta property="twitter:title" content="Название">

<meta property="twitter:description" content="Описание">

<meta property="twitter:image" content="https://site.ru/image.png">

<meta property="twitter:site" content="site.ru">


Пример настройки разметки для информационных страниц, который проходит валидацию и в Яндекс и в Google:

<meta property="og:title" content="Название страницы"/>

<meta property="og:description" content="Текст превью" />

<meta property="og:image" content="https://www.site.ru/images/image.jpg"/>

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

<meta property="og:type:article:section" content="Название раздела, в котором находится страницы"/>

<meta property="og:url" content= "https://www.site.ru/page.php"/>


Для значения типа «article» обязательными параметрами являются og:image, og:url, og:title, og:type.

Пример настройки разметки для страницы товара, который проходит валидацию и в Яндекс и в Google:

<meta property="og:type" content="website">

<meta property="og:description" content="Купить товар за 1000 рублей."/>

<meta property="og:site_name" content="Интернет-магазин «Название»">

<meta property="og:title" content="Товар N">

<meta property="og:url" content="https://www.site.ru/page.php">

<meta property="og:image" content="https://www.site.ru/images/image.jpg"/>


Для значение типа «website» обязательными параметрами являются og:image, og:url, og:title, og:type.

Пример настройки разметки для страницы с видео, который проходит валидацию и в Яндекс и в Google:

<meta property="og:title" content="Название видео/страниц с видео "/>

<meta property="og:url" href="https://www.site.ru/page.php"/>

<meta property="og:video" href="https://youtu.be/W4XrivKvhHI"/>

<meta property="og:description" content="Описание видео/страниц с видео."/>

<meta property="video:duration" content="256"/>

<meta property="og:image" href="https://img.youtube.com/vi/W4XrivKvhHI/hqdefault.jpg"/>

<meta property="ya:ovs:upload_date" content="2017-11-13"/>

<meta property="ya:ovs:adult" content="false"/>

<meta property="og:type" content="video.other"/>

<meta property="og:video:type" content="flash"/>


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

Важный момент заключается в том, что чтобы пройти валидацию разметке видео, необходимо добавление в тег <html> специального префикса, например:

<html prefix="og: http://ogp.me/ns#

video: http://ogp.me/ns/video#>


Пример отображения в facebook размеченной страницы:

open graph пример микроразметки

В приведенном примере размечены: заголовок, описание, картинка и не отображаемые внешне параметры - URL страниц, тип разметки и категория статьи «og:type:article:section».

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


3. JSON-LD

Такой тип разметки использует все те же форматы разметки schema.org, часть которых уже была описана выше. Разница заключается в том, что JSON описывается разово в блоке <head></head> страницы сайта и, таким образом, описывает страницу целиком, а не конкретные блоки контента/элементы страницы, как это делает просто разметка schema.org.

Есть важный момент по использованию этого вида разметки в Яндекс: «данные, размеченные с помощью JSON-LD, используются Яндекс.Почтой, но пока не отображаются в результатах поиска Яндекса» (https://yandex.ru/support/webmaster/json-ld/about.html). Однако это не значит, что теперь можно не обращать внимание на прохождение валидации этой разметки в Яндекс, лучше сразу позаботиться об успешной валидации JSON разметки в обеих поисковых системах.

Разметка настраивается в отдельных тегах:

<script type="application/ld+json">

{

CODE

}

</script>


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

- LocalBusiness – для описания контактов, страницы о компании;

- Article – для описания информационных страниц/страниц с обычным контентом, где нельзя настроить товарное предложение;

- Organization – для описания информации о компании;

- ImageObject – для описания изображения;

- Person – для указания авторства;

- Product – для описания товарных страниц;

- Offer – для описания товарных страниц;

- InStock – для указания наличия товара.

Пример разметки информации о компании и контактов, который проходит валидацию и в Яндекс и в Google:

<script type="application/ld+json">

{

"@context": "https://schema.org",

"@type": "LocalBusiness",

"image": "https://www.site.ru/images/image.png",

"address": {

"@type": "PostalAddress",

"addressLocality": "Город",

"addressRegion": "Регион",

"postalCode":"111111",

"streetAddress": "ул. Улица, д. 1"

},

"description": "Текстовое описание сайта/компании",

"name": "Название сайта/компании",

"telephone": "+7 (111) 111-11-11",

"openingHours": "пн.-вс., 9:00-18:00",

"geo": {

"@type": "GeoCoordinates",

"latitude": "55.97430159995695",

"longitude": "37.66872078180313"

},

"sameAs" : [ "https://vk.com/group",

"https://www.facebook.com/group/",

"https://www.instagram.com group/",

"https://www.youtube.com/channel/UCCyAzvgrTT8uTBGA-dqUg7Q"]

}

</script>


Несколько пояснений по параметрам:

- В блоке «GeoCoordinates» указываются координаты долготы и широты местоположения;

- В блоке «sameAs» указываются другие представительства компании в Интернет, например, группы в социальных сетях;

- postalCode – это почтовый индекс;

- openingHours – это информация о режиме работы.

Предварительный просмотр можно использовать в валидаторе разметки Google:

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

Пример разметки товарной страницы, который проходит валидацию и в Яндекс и в Google:

<script type="application/ld+json" >

{

"@context": "https://schema.org",

"@type": "Product",

"url": "https://www.site.ru/catalog/product",

"category": "Категория товара",

"image": "https://www.site.ru/images/photo-tovara.jpg",

"manufacturer": "Производитель",

"model": "Модель/тип товара",

"description": "Описание товара.",

"name": "Название товара",

"offers": {

"@type": "Offer",

"availability": "https://schema.org/InStock",

"price": "5000",

"priceCurrency": "RUB"

}

}

</script>


Несколько пояснений по параметрам:

- url – это URL конкретной страницы;

- availability – наличие (выше для schema.org указывалось, какую схему нужно проставить в случае, если товар не в наличии);

- price – цены, обязательно должна быть только цифра;

- priceCurrency – валюта цены.

Пример отображения в Google страницы с настроенной разметкой:

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

Пример разметки страницы статьи, который проходит валидацию и в Яндекс и в Google:

<script type="application/ld+json">

{

"@context" : "https://schema.org",

"@type" : "Article",

"mainEntityOfPage":{

"@type":"WebPage",

"@id":"https://www.site.ru/article.php"

},

"url" : "https://www.site.ru/article.php",

"datePublished": "2019-01-01",

"dateModified":"2019-01-01",

"headline": "Название статьи",

"image": {

"@type" : "ImageObject" ,

"url": "https://www.site.ru/images/image.jpg",

"height" : 800,

"width" : 1200

},

"articleBody": "Текст описания",

"author": {

"@type": "Person",

"name": "Автор или название компании",

"url": "https://vk.com/group"

},

"publisher": {

"@type": "Organization ",

"name": "Название компании",

"logo" : {

"@type": "ImageObject",

"url": "https://www.site.ru/images/logo/image.jpg"

}

}

}

</script>


Несколько пояснений по параметрам:

- datePublished/dateModified – дата публикации/последней модификации статьи;

- height/width – можно указать размеры картинки статьи.

Пример отображения в Google, где в сниппет вместе с текстом описания попала дата публиrации статьи, хотя она на самой странице не выводится:

json пример разметки страницы статьи в сниппете

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

<script type = "application/ld+json">

{

"@context" : "https://schema.org",

"@type" : "Article",

"name": "Название страницы",

"datePublished": "2019-01-01",

"headline": "Название статьи",

"image": {

"@type" : "ImageObject" ,

"url": "https://www.site.ru/images/image.jpg"

},

"author": {

"@type": "Person",

"name": "Название сайта/компании"

},

"articleSection":"Категория, например, Услуги",

"articleBody":"Текст описания, например, предлагаем заказать услуг за 1000 рублей!",

"publisher": {

"@type": "Organization ",

"name": "Название компании",

"logo" : {

"@type": "ImageObject",

"url": "https://www.site.ru/images/logo/image.jpg"

}

}

}

}

</script>

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


Заключение

Итак, выше были рассмотрены три основных формата микроразметок (Schema.org, Open Graph, JSON LD), которые позволяют улучшить представление сайта в поисковых системах и социальных сетях и, тем самым, косвенно повлиять на улучшение поведенческих факторов ранжирования.

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

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

Расскажите нам о вашем проекте