Что такое микроразметка
Микроразметка – стандарт семантической оптимизации сайтов. Он был представлен компаниями Google, Bing и Yahoo летом в 2011 году. Осенью того же года стало известно о поддержке стандарта поисковой системой Яндекс. Микроразметка позволяет роботам точнее определять и структурировать информацию на страницах сайтов.
Микроразметка выполняется добавлением в HTML-код специальных тегов или атрибутов, в которых размещается различная полезная информация.
Различают такие виды микроразметки:
- микроформаты;
- микроданные;
- RDFа.
Польза от микроразметки
В первую очередь присутствие микроформата или микроданных на странице отражается на сниппете (описании), который сопровождает ссылку на сайт в поисковой выдаче. Сниппет содержит более полное описание страницы, основные разделы сайта, ценовой диапазон товаров, фотографии адреса, номера телефонов и так далее. Кроме того она указывает поисковым роботам информацию, которую следует обрабатывать. Это позволяет добиться улучшенной релевантности страницы для поисковых роботов и пользователей.
Как микроразметку внедрить?
По опыту наших сайтов из портфолио чаще всего используется микроразметка по формату Schema.org или JSON+LD
В этой статье мы подробно посмотрим на микроразметку Schema
Что такое Schema.org?
Schema.org — это сайт, на котором публикуются схемы микроразметки, распознаваемые крупнейшими поисковыми системами мира, включая «Яндекс» и Google. Схемы представляют собой теги и атрибуты HTML-кода. С их помощью поисковые системы распознают значение и структуру информации, опубликованной на сайте. Это повышает качество поиска и улучшает результаты выдачи.
Что нужно прописывать при микроразметке?
Существует 3 основных атрибута, каждый из который обязательно участвует при описании какого либо элемента:
itemscope нужен только для того, чтобы показать поисковому боту, что на странице описывается определенный объект.
itemtype всегда идет рядом с itemscope и нужен для того, чтобы показать поисковому боту тип объекта
itemprop – описывает свойства выбранного объекта.
Основные принципы разметки
- Оборачивание описания типа в контейнер с дальнейшим указанием схемы разметки.
- Разметка отдельных свойств с указанием на каждое конкретное свойство схемы.
Разберем микроразметку Schema.org на примере кода, который использовался в OkayCMS
<div itemscope="" itemtype="http://schema.org/Product">
<span itemprop="name">Название товара</span>
<span itemprop="sku">Артикул</span>
<img itemprop="image" src="картинка_товара.jpg">
<!-- Первый вариант вывода цены -->
<div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<span itemprop="price" content="55.00">$55.00</span>
<meta itemprop="priceCurrency" content="USD">
<link itemprop="availability" href="http://schema.org/InStock">В наличии
</div>
<!-- Второй вариант вывода цены -->
<div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<span itemprop="price" content="55.00">55.00</span>
<span itemprop="priceCurrency" content="RUB">руб.</span>
<link itemprop="availability" href="http://schema.org/InStock">В наличии
</div>
<span itemprop="description">Описание товара</span>
</div>
Это базовый код, которого достаточно для того, что бы выполнить микроразметку товара вашего магазина.
Как видите, всегда существует контейнер, который включает в себя несколько разных типов сущностей.
В нашем случае самый главный контейнер, это <div itemscope="" itemtype="http://schema.org/Product"> внутри него будет содержаться вся наша микроразметка.
Далее мы сталкивается еще с одним контейнером:
<div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
Он показывает роботу что внутри него будут идти данные для конкретной разметки товарного предложения.
Важно! Следует помнить, что некоторые элементы микроразметки являются обязательными, поэтому если вы не заполняете информацию о товаре полностью, это может привести к ошибкам микроразметки.
Наиболее частой проблемой есть отсутствие описания товара, в результате чего валидатор будет выдавать ошибку в микроразметке.
Пример сниппетов с микроразметкой товара можно созерцать ниже:
Как сделать микроразметку хлебных крошек?
Если при поиске сайта вы видите вот такие ссылки (на русском языке а не реальный url)
Значит хлебные крошки сайта размечены верно, и это позволяет роботу сформировать более красивый сниппет.
Пример кода микроразметки хлебных крошек на реальном товаре:
<li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"> <a itemprop="url" href="/" data-language="252"> <span itemprop="title">Главная</span> </a> </li> <li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"> <a itemprop="url" href="catalog/templates"> <span itemprop="title">Шаблоны</span> </a> </li> <li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"> <a itemprop="url" href="catalog/drugoe"> <span itemprop="title">Другое</span> </a> </li> <li>Шаблон для OkayCMS Carol</li>
Вот так выглядит микроразметка у нас, на примере реального товара. Важно! Последний пункт хлебных крошек не должен быть ссылкой сам на себя, это плохо влияет на SEO и создает циклические ссылки страницы.
И последнее, что мы сегодня разберем, это микроразметка контаков по schema.org
Код микроразметки контактов может выглядеть примерно вот так
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
Адрес:
<span itemprop="streetAddress">улица енотовича, 33</span>
<span itemprop="postalCode"> 100500</span>
<span itemprop="addressLocality">Днепр</span>,
</div>
Телефон:<span itemprop="telephone">+8 066 99 99 999</span>,
Факс:<span itemprop="faxNumber">+8 097 99 99 999 </span>,
Электронная почта: <span itemprop="email"> [email protected] </span>
<!-- Первый вариант -->
<time itemprop="openingHours" datetime="Tu-Th 16:00-20:00">По вторникам и четвергам с 4 до 8 вечера</time>
<!-- Второй вариант -->
<meta itemprop="openingHours" content="Mo-Sa 10:00-20:00">Пн-Сб с 10:00 до 20:00.
</div>
А теперь то , что обязательно будет нужно вам при проведении работ по внедрению микроразметки - сервисы.
Сервисы для работы с микроразметкой
- 1. Structured Data Testing Tool. Особенность сервиса состоит в том, что можно на примерах увидеть, как выполняется микроразметка.
- 2. Разделы “Структурированные данные” и “Маркер” в Search Console от Google, которые позволят настроить микроразметку
- 3. Валидатор микроразметки от “Яндекс”
- 4. Яндекс.Справочник. Добавьте информацию о своей организации и в результатах поиска “Яндекс” будет показываться адрес, телефон и график работы
Вывод:
Микроразметка может помочь роботу сформировать более привлекательный сниппет.
Микроразметка может повлиять на вывод текста, который передается в сниппет.
Микроразметка может показать насколько новым и актуальным есть контент вашего сайта.
Внедряйте микроразметку на сайт, при ее наличии вы будете иметь больше шансов сформировать красивый вывод информации с вашего сайта в поисковой системе.