Что такое микроразметка? Для чего используется?
Микроразметка (или семантическая разметка) – это небольшая доработка 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>