☎ 8 343 219 55 25

пожалуйста, поставьте Вашу оценку
рейтинг: 1 Star2 Stars3 Stars4 Stars5 Stars (63 оценок, в среднем: 4,40 из 5)

Правильная семантическая микроразметка при помощи микроформатов

Ниже приведен урок семантической микроразметки при помощи микроформатов.
Разберем это подробно на примере страницы товара http://colaweb.ru/gifts/for-men/credit-card-knife

Наша цель — получить в выдаче Google сниппет с таким внешним видом

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

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

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

используем для микроразметки типы микроданных http://schema.org/Product

Находим в коде HTML тег где написан заголовок и добавляем атрибут itemprop=»name»

<h1 itempropname»>Нож визитка CardSharp 2</h1>

Дополнительная навигация или хлебные крошки

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

для этого будем использовать микроданные http://www.data-vocabulary.org/Breadcrumb/

в тег каждой ссылки нужно добавить itemprop=»url»

<a href=»http://colaweb.ru/gifts/» itemprop=»url»>

а в тег где размещен текст ссылки itemprop=»title»

<span itemprop=»title»>Главная</span>

и так далее для каждой хлебной крошки

<a href=»http://colaweb.ru/gifts/for-men/» itemprop=»url»>

<span itemprop=»title»>для Мужчин</span>

</a>

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

микроразметка рейтинг отзывы

В этой части будем использовать для микроразметки микроданные из типов http://schema.org/AggregateRating

В HTML блок, где размещен вывод рейтинга добавляем класс и атрибуты
class=»review» itemprop=»aggregateRating» itemscope=»»

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

<meta itemprop=»reviewCount» content=»Отзывов: 1″> — количество отзывов

<meta itemprop=»ratingValue» content=»5″> — количество звезд в рейтинге

После внесения изменений в HTML, код блока должен выглядеть так:

<div class=»review» itemprop=»aggregateRating» itemscope=»» itemtype=»http://schema.org/AggregateRating»>

<meta itemprop=»reviewCount» content=»Отзывов: 1″>

<meta itemprop=»ratingValue» content=»5″>

<div>

Непосредственно в самом коде HTML, значения атрибутов content в мета тегах добавляются через переменные. В HTML тег <meta> не имеет закрывающего тега.

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

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

В этой части урока, при добавлении микроразметки, мы будем использовать два типа микроданных http://schema.org/Offer и http://schema.org/ItemAvailability

По аналогии с предыдущем абзацем добавляем атрибуты для тегов meta

<meta itemprop=»price» content=»420 р.»>

<meta itemprop=»priceCurrency» content=»RUB»>

<link itemprop=»availability» href=»http://schema.org/InStock»>

Цена: 420 р.

<br>

Описание товара или description

Микроразметка цена и наличие description

Здесь все просто. В блок HTML кода, где размещено описание товара добавляем атрибут itemprop=»description»

После добавления, у вас должно получиться примерно следующее:

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

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

Яндекс.Вебмастер — Валидатор микроразметки

или

Инструмент проверки структурированных данных Google

 

? Если у Вас нет возможности выполнить эту работу самостоятельно,

Вы можете заказать данную услугу в нашей студии.

 

Видео от Яндекс с рассказом о пользе Семантической микроразметки


в наглядной форме показаны преимущества нового формата микроразметки для вашего сайта.