Что такое микроразметка сайта и как её внедрить

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

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

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

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

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

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

Как сделать микроразметку Schema

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

Пример 1. Указание контактов на микроразметке Schema

Приведём пример, как правильно оформить блок с контактами на сайте с применением микроразметки 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 html-код будет следующим:

<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 куда удобнее.

Читайте также:
• Микроразметка хлебных корочек
• Что такое seo-текст
• Крауд-маркетинг
• Абсолютный и относительный адрес URL
• Все про контент-маркетинг
• Что такое ЧПУ
• Что такое траст сайта

← Перейти в каталог html уроков и советов