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

Что такое микроразметка? Для чего используется?

Микроразметка (или семантическая разметка) – это небольшая доработка HTML-кода страницы (добавление специальных тегов и атрибутов в тегах), которая помогает роботам более точно определить то, о чем говориться на странице.

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

Ключевая роль микроразметки в продвижения сайта заключается в улучшении сниппета (описания сайта) в поисковой выдаче.

Кроме того, семантическая разметка позволяет в общем роботам понять содержимое страницы. При взаимодействие с
какими-то приложениями это может ускорить работу. Например, с помощью микроразметки страницы можно сформировать описание для репоста в социальные сети.

Как микроразметка улучшает вид сайта в выдаче?

Ниже приведены примеры сниппетов сайтов в поисковой выдаче, которые внедрили микрораземтку. Данный инструмент значительно улучшил внешний вид и привлекательность страниц в выдаче.

Микроразметка 'хлебных крошек' - вид в поисковой выдаче

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

Микроразметка рецептов - вид в выдаче

Какие словари использовать?

Наибольший популярны сейчас два стандарта: Schema.org и Open Graph.

Schema.org – словарь, которые появился по инициативе поисковых систем. На данный момент активно развивается и является самым крупным по количеству классов, которые могут использоваться в работе. Поддерживается поисковыми системами Yandex, Google, Bing и Yahoo! Используется для разметки разнообразных видов данных: для “хлебных крошек”, контактов, рецептов, событий, личностей и т.д.

Open Graph – словарь, разработанный Facebook. Используется для оформления ссылок, которые отправляется в социальные сети и различные приложения. Применяя данный тип микроразметки, можно определить изображение-превью, описание, заголовок, автора и другие параметры для определенной страницы. OG распознают Вконтакте, Google+, Twitter, LinkedIn, Pinterest и другие социальные сети.

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

Как проверить правильность внедрения?

Используйте валидаторы микроразметки:

Пример №1 – Разметка контактов микроразметкой Schema.org

“До” внедения микроразметки

<div class="contact__box">
	<div>Кузница сайтов "SeoForge"</div>
	<div> 
		<br>Деревня Гадюкино,
		<br>ул. Лелюшенко, д. 112 кв.25, индекс: 344000
	</div>
	<div>
		<br>Телефон: +7 900 700–00–00,
		<br>Электронная почта: hello@seoforge.ru
		<br>Рабочее время: Понедельник - Суббота: с 09:00 до 18:00
		<br><img src="https://seoforge.ru/img/logo-contacts.png">
	</div>
</div>

“После” внедения микроразметки

<div class="contact__box" itemscope itemtype="http://schema.org/LocalBusiness">
	<div itemprop="name">Кузница сайтов "SeoForge"</div>
	<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
		<br><span itemprop="addressLocality">Деревня Гадюкино</span>,
		<br><span itemprop="streetAddress">ул. Лелюшенко, д. 112 кв.25</span>,
		индекс: <span itemprop="postalCode">344000</span>
	</div>
	<div>
		<br>Телефон:<span itemprop="telephone">+7 900 700–00–00</span>,
		<br>Электронная почта: <span itemprop="email">hello@seoforge.ru</span>
		<br>Рабочее время: <time itemprop="openingHours" datetime="Mo-Sa, 09:00−18:00">
		Понедельник - Суббота: с 09:00 до 18:00</time>
		<span class="url">
		<span class="value-title" title="https://seoforge.ru/"></span>
		</span>
		<br><img itemprop="image" src="https://seoforge.ru/img/logo-contacts.png">
	</div>
</div>

Пример №2 – Разметка “Хлебных крошек” микроразметкой Schema.org

“До” внедения микроразметки

<ul class="breadcrumb" >
	<li class="breadcrumb-item">
		<a href="http://site.ru/">
		Главная
		</a>
	</li>
	<li class="breadcrumb-item">
		<a href="http://site.ru/elektromontazh/">
		Электромонтажные работы
		</a>
	</li>
	<li class="breadcrumb-item active">
	Установка розеток
	</li>
</ul>

“После” внедения микроразметки

<ul class="breadcrumb" itemscope itemtype="http://schema.org/ItemList">
	<li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
		<a itemprop="url" href="http://site.ru/">
		Главная
		</a>
		<meta itemprop="position" content="1" />
	</li>
	<li class="breadcrumb-item"
	itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
		<a itemprop="url" href="http://site.ru/elektromontazh/">
		Электромонтажные работы
		</a>
		<meta itemprop="position" content="2" />
	</li>
	<li class="breadcrumb-item active"
	itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
		Установка розеток
		<meta itemprop="url" content="http://site.ru/elektromontazh/ustanovka-rozetok.html" />
		<meta itemprop="position" content="3" />
	</li>
</ul>

Максим Остропольский
Интернет-маркетолог, основатель блога SeoForge.ru
Оцените автора
( Пока оценок нет )
Добавить комментарий