SEO

Микроразметка: джентльменский набор

Аватар
Автор IxMaster

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

Всю тему микроформатов в одной статье не обхватить, а потому, по мере её рассмотрения в других материалах, я буду ссылаться на них. Кроме того, всегда можно и самостоятельно покопаться в конструкторе микроразметки 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>

 

Итак, что мы тут видим? Во-первых, каждый уровень хлебных крошек является обособленным элементом, уровнем, а роль тут играет лишь их порядок. Во-вторых, каждый элемент (за исключением последнего) имеет тройную вложенность:

  1. Объявление элемента: itemscope itemtype=»http://data-vocabulary.org/Breadcrumb»
  2. Определение значения атрибута ссылки: itemprop=»url»
  3. Определение значения атрибута имени: 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), а также просто лучше понять структуру сайта.

Навигационная цепочка Google

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

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

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

Об авторе

Аватар

IxMaster

Добро пожаловать на мой ресурс. Рекомендую к прочтению категорию "отсебятина". Авторские статьи, которые помогут Вам 'управлять интернетом'. Пишу на самые разные темы для начинающих, а так же профессионалов в области вебмастеринга. Остальное ознакомительно качественный контент. Открыт для обсуждений.

Leave a Comment