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

[Topkin87]

Микроразметка сайтов стала активно развиваться в начале 2011 года, благодаря Google, который первый заявил о ее использовании летом того же года. Bing и Yahoo также заявили о использовании микроразметок. Яндекс впервые заявил об этом спустя три месяца.

Микроразметка сайта - стандарт семантической разметки сайта
Микроразметка позволяет точно указать поисковому роботу точную информацию о сайте, продукте и т.п. В этом плане она чем-то похожа на теги <title> и <h1>, поскольку они также четко отвечают за заголовок страницы и ни за что более. Делая микроразметку мы оптимизируем семантику контента сайта, тем самым улучшая в целом внутреннюю оптимизацию сайта. Например, с помощью специальных атрибутов (о них чуть ниже) можно точно указать в html-коде где располагается:

• Информация о товаре: цвет, цена, название, производитель, фото товара, отзывы, описание, рейтинг и т.п.
• Информация о фильме: год выхода, название, актеры, описание, рейтинг
• Адрес компании и ее телефон
• и т.д.

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

Как сделать микроразметку Schema
Сделать микроразметку сайта легко, с этим справится любой средний веб-мастер. Для этого существуют специальные атрибуты. Мы рассмотрим лишь самые основные в качестве примера. Полную документацию можно найти на официальном сайте schema.org (см также на русском аналоге ruschema.org).

Пример 1. Контакты с микроразметкой Schema
Приведем пример, как правильно оформить блок с контактами на сайте с применением микроразметки. Исходный html-код без разметки:

<div class="info">
<div class="name">Название организации - "Слоник"</div>
<div class="adres">Адрес - Москва, ул.Пушкина, 1</div>
<div class="tel">Телефоны: +7(495)111-2222</div>
<div class="faks">Факс: +7(495)212-1221</div>
</div>
С разметкой согласно Schema код будет следующим:

<div itemscope itemtype="http://schema.org/Organization" class="info">
<div class="name">Название организации - "<span itemprop="name">Слоник</span>"</div>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress" class="adres">Адрес -
<span itemprop="addressLocality">Москва</span>,
<span itemprop="streetAddress">ул.Пушкина, 1</span>
</div>
<div class="tel">Телефоны: <span itemprop="telephone">+7(495)111-2222/span</div>
<div class="faks">Факс: <span itemprop="faxNumber">+7(495)212-1221/span</div>
</div>

Пояснение к примеру
С помощью внедрения специальных атрибутов itemscope, itemtype и itemprop мы четко разметили: название организации, город, улицу и дом, телефон и факс.

Атрибут itemscope написанный в теге <div> означает, что мы описываем некую сущность. Тип сущности указывается с помощью атрибута itemtype:

<div itemscope itemtype="http://schema.org/Organization" class="info">
...
Описание сущности
...
</div>
Вместо Organization мы могли описывать и другие сущности. Например, продукт, товар, фильм, рецепт.

Атрибут itemprop="" пишем в тегах <span>. У него есть множество подклассов. В нашем примере:

• itemprop="name" - название организации
• itemprop="addressLocality" - город
• itemprop="telephone" - телефон
• itemprop="faxNumber" - факс

Пример 2. Микроразметка с оформлением единицы товара
Эта информация будет полезна для интернет-магазинов. Разберем в примере, как грамотно оформить карточку товара учитывая микроразметку. Исходный html-код без разметки:

<div class="tovar">
<div class="nazvanie">Наименование товара</div>
<div class="foto"><img src="tovar_slonik_1.jpg" /></div>

<div class="tovar_info">
<div class="proizvoditel">Производитель</div>
<div class="price">Стоимость: 5000 руб</div>
<div class="desc">Описание товара</div>
</div>
</div>
С микроразметкой согласно Schema код будет следующим:

<div itemscope itemtype="http://schema.org/Product" class="tovar">
<div itemprop="name" class="nazvanie">Наименование товара</div>
<div class="foto"><img itemprop="image" src="tovar_slonik_1.jpg" /></div>

<div itemprop="offers" itemscope itemtype="http://schema.org/Offers" class="tovar_info">

<div itemprop="brand" class="proizvoditel">Производитель</div>

<div class="price">Стоимость: <span itemprop="price">5000</span> <span itemprop="priceCurrency">руб</span></div>

<div itemprop="description" class="desc">Описание товара</div>


<!-- Можно также указать рейтинг товара: -->
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">

<div itemprop="ratingValue">Средняя оценка</div>

<div itemprop="bestRating">Максимальная оценка</div>

<div itemprop="worstRating">Минимальное оценка</div>

<div itemprop="ratingCount">Количество голосов</div>

</div>
</div>
</div>
Пояснение к примеру
Как и в первом примере, с помощью сущностей itemscope, itemtype и itemprop мы задаем важнейшие параметры товара: название, цена, фото, описание и т.п.

Пояснения к атрибуту itemprop:

• itemprop="name" - название товара
• itemprop="image" - изображение товара
• itemprop="offers" - указание, что будет описывать сущность (товар, предложение)
• itemprop="brand" - производитель товара
• itemprop="price" - стоимость товара
• itemprop="priceCurrency" - валюта, в которой указана стоимость
• itemprop="description" - описание товара

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

<div itemscope itemtype="http://schema.org/Product" class="tovar">
<div class="nazvanie">Наименование товара</div>
<meta itemprop="name" content="Наименование товара">
<div class="foto"><img src="tovar_slonik_1.jpg" /></div>

<div itemprop="offers" itemscope itemtype="http://schema.org/Offers" class="tovar_info">
<div class="proizvoditel">Производитель</div>
<div class="price">Стоимость: 5000 руб</div>
<div class="desc">Описание товара</div>

<meta itemprop="brand" content="Производитель">
<meta itemprop="price" content="Стоимость">
<meta itemprop="priceCurrency" content="Валюта">
<meta itemprop="description" content="Описание товара">
<link itemprop="availability" href="http://schema.org/InStock">

</div>
</div>
Пояснение к примеру
С помощью тегов meta мы задали четко всю информацию о товаре: Производителя, стоимость, валюту, описание. В последней строке с помощью link мы также указали, что товар есть в наличии.

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

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

Виды микроразметок
Есть несколько вариантов микроразметок: Schema и RDFa. Естественно адекватно и использовать Schema, т.к. она наиболее удобна и распространненая.

Существует так называемые микроформаты hCard, hRecipe, hReview, hProduct. Они используются реже, поскольку Schema куда удобнее.