Всем привет, сегодня мы определим минимальный набор и примеры внедрения микроразметки хлебных крошек, статей и товаров для коммерческих и информационных сайтов. Сама технология уже не нова, но разнообразие её атрибутов может ввести в ступор, а потому в данной статье я постараюсь выделить несколько типичных и проверенных решений, которые можно сразу смело внедрять.
Всю тему микроформатов в одной статье не обхватить, а потому, по мере её рассмотрения в других материалах, я буду ссылаться на них. Кроме того, всегда можно и самостоятельно покопаться в конструкторе микроразметки Google.
Микроразметка хлебных крошек
Ну, это классика жанра, которая в обязательном порядке должна присутствовать на каждом сайте. Например, для страницы https://pingoblog.ru/21-tipy-poiskovyh-zaprosov.html она имеет следующий вид:
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> //1 уровень: главная страница
<a href="https://pingoblog.ru/" itemprop="url">
<span itemprop="title">SEO блог Пинго</span>
</a>
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> //2 уровень: категория
<a href="https://pingoblog.ru/novichkam/" itemprop="url">
<span itemprop="title">Новичкам</span>
</a>
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> //3 уровень: конечный материал
<span itemprop="title">Типы поисковых запросов</span>
</span>
Итак, что мы тут видим? Во-первых, каждый уровень хлебных крошек является обособленным элементом, уровнем, а роль тут играет лишь их порядок. Во-вторых, каждый элемент (за исключением последнего) имеет тройную вложенность:
- Объявление элемента: itemscope itemtype="http://data-vocabulary.org/Breadcrumb"
- Определение значения атрибута ссылки: itemprop="url"
- Определение значения атрибута имени: itemprop="title"
У последнего элемента также может быть атрибут url, но на мой взгляд он не нужен — зачем странице указывать на саму себя в навигационной цепочке?
Атрибуты могут использоваться в связке с любыми тегами — важен лишь порядок и уровень вложенности. Например:
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="https://pingoblog.ru/novichkam/" itemprop="url">
<b itemprop="title">Новичкам</b>
</a>
</div>
Внедрение на сайт микроразметких хлебных крошек помогает поисковым системам в выводе «читабельных» навигационных цепочек в сниппете (что неплохо поднимает CTR), а также просто лучше понять структуру сайта.
Микроразметка статьи
Данный тип микроразметки предназначен для статей и любых других информационных материалов, как на коммерческих, так и на обычных сайтах. Например, для страницы, которую вы читаете, справедлива следующая структура:
<div itemscope itemtype="http://schema.org/Article" class="base fullstory">
//Объявляем название элемента
<meta itemprop="datePublished" content="2013-08-18T19:07">
//Определение атрибута «Дата публикации»
<h1 itemprop="headline">Конкурентность поисковых запросов</h1>
//Определение атрибута «Имя публикации»
<p>Категория: <span itemprop="articleSection"> //Определение атрибута «Категория публикации»
<a href="https://pingoblog.ru/novichkam/">Новичкам</a>
</span></p>
<span itemprop="description">Содержимое статьи.</span> //Определение атрибута «Содержимое статьи»
<span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">Средняя арифметическая оценка</span>
<span itemprop="bestRating">Максимальное значение оценки</span>
<span itemprop="worstRating">Минимальное значение оценки</span>
<span itemprop="ratingCount">Количество оценок</span>
</span>
</div>
Тут всё тоже самое, что и для хлебных крошек, кроме следующего:
- Атрибут «Дата публикации» должен быть указан в формате ISO-8601 вида YYYY-MM-DDTHH:MM, где T — просто символ, YYYY — год, MM — месяц, DD — дата, HH — час, а MM — минута.
- При определении атрибута «Категория публикации» и «Имя публикации» совершенно не страшно, что в область значения попадает также и ссылка — робот вытянет лишь соответствующие ожидаемому для атрибута значения данные.
Внедрение микроразметки статей помогает поисковому роботу лучше понять и классифицировать содержимое информационного материала. Кроме того, если информация уникальна, то она будет со временем может быть добавлена в базу данных Google.
Микроразмета товара (продукта или услуги)
Данный тип микроформата незаменим для страниц с описанием товаров и услуг:
<span itemscope itemtype="http://schema.org/Product"> //Объявляем элемент
<h1 itemprop="name">Розовый слон</h1> //Определяем наименование товара или услуги
<span itemprop="description">Хороший слон.</span> //Определяем описание товара или услуги
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
//Объявляем подтип «Предложение»
<meta itemprop="price" content="5"> //Определяем стоимость товара или услуги
<meta itemprop="priceCurrency" content="RUB"> //Указываем валюту цены товара или услуги</span>
<span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">Средняя арифметическая оценка</span>
<span itemprop="bestRating">Максимальное значение оценки</span>
<span itemprop="worstRating">Минимальное значение оценки</span>
<span itemprop="ratingCount">Количество оценок</span>
</span>
</span>
Тоже самое — поисковый робот сразу видит, что и где располагается на странице и для чего она вообще нужна. Визуальным результатом может стать рост привлекательности сниппета в SERP:
Проверить внедренную микроразметку в режиме онлайн можно через валидатор Яндекса или Google.
Материал обновлен: 10 января 2016