Расширенные сниппеты в SEO

Обычный сниппет в выдаче - это заголовок, ссылка и описание. Но иногда под ссылкой появляются звезды рейтинга, цена товара, блок вопросов или цепочка хлебных крошек. Такой сниппет называется расширенным.

Поисковик не угадывает эти данные. Он берет их из микроразметки, которую разработчик добавил в HTML. Микроразметка - это специальные атрибуты, которые объясняют роботу, что перед ним: рейтинг, цена, вопрос или крошки.

Самый популярный формат микроразметки - schema.org. Разметка ставится прямо в теги через атрибуты itemscope, itemtype и itemprop. Давайте посмотрим, как это выглядит.

Звезды рейтинга

Чтобы получить звезды, нужно разметить рейтинг и количество отзывов. Тип разметки - Product, а внутри - aggregateRating.

<div itemscope itemtype="https://schema.org/Product">
	<span itemprop="name">Товар</span>
	<div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
		<span itemprop="ratingValue">4.8</span>
		<span itemprop="reviewCount">120</span>
	</div>
</div>

Робот увидит рейтинг 4.8 и 120 отзывов. В выдаче под ссылкой появятся звезды и число оценок.

Цена товара

Цену размечают через тип Offer внутри Product. Важно указать валюту и саму цену.

<div itemscope itemtype="https://schema.org/Product">
	<span itemprop="name">Товар</span>
	<div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
		<span itemprop="price">1990</span>
		<span itemprop="priceCurrency">RUB</span>
	</div>
</div>

В сниппете рядом с ссылкой появится цена - 1990 рублей. Это помогает пользователю сразу понять стоимость.

FAQ

Блок вопросов и ответов размечают типом FAQPage. Каждый вопрос - это Question, а ответ - Answer.

<div itemscope itemtype="https://schema.org/FAQPage">
	<div itemprop="mainEntity" itemscope itemtype="https://schema.org/Question">
		<h3 itemprop="name">Как оформить заказ?</h3>
		<div itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">
			<div itemprop="text">Нажмите кнопку «Купить».</div>
		</div>
	</div>
</div>

В выдаче под ссылкой появится раскрывающийся блок с вопросами. Пользователь может прочитать ответ прямо в поиске.

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

Крошки размечают типом BreadcrumbList. Каждый уровень - это ListItem с позицией и ссылкой.

<div itemscope itemtype="https://schema.org/BreadcrumbList">
	<div itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<a itemprop="item" href="/">
			<span itemprop="name">Главная</span>
		</a>
		<meta itemprop="position" content="1" />
	</div>
	<div itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<a itemprop="item" href="/catalog/">
			<span itemprop="name">Каталог</span>
		</a>
		<meta itemprop="position" content="2" />
	</div>
</div>

Вместо обычного URL в выдаче появится цепочка: Главная → Каталог. Это удобно для навигации и понимания структуры сайта.

Микроразметку можно проверить в валидаторе Яндекса или Google. Если есть ошибки, расширенный сниппет не покажется.

Практические задачи

Расскажите, что такое расширенный сниппет и чем он отличается от обычного.

Дана верстка:

<div>
	<span>Товар</span>
	<span>4.5</span>
	<span>80</span>
</div>

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

Дана верстка:

<div>
	<h3>Как оформить заказ?</h3>
	<p>Нажмите кнопку «Купить».</p>
</div>

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

Дана верстка:

<div>
	<a href="/">Главная</a>
	<a href="/catalog/">Каталог</a>
	<a href="/catalog/phone/">Телефоны</a>
</div>

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

Расскажите, зачем нужна микроразметка и что произойдет, если в ней будет ошибка.