Что такое микроразметка

Категории
Оглавление
  1. Польза от микроразметки
  2. Как микроразметку внедрить?
  3. Что такое Schema.org?
  4. Как сделать микроразметку хлебных крошек?

Микроразметка – стандарт семантической оптимизации сайтов. Он был представлен компаниями  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. Яндекс.Справочник. Добавьте информацию о своей организации и в результатах поиска “Яндекс” будет показываться адрес, телефон и график работы

 

Вывод:

Микроразметка может помочь роботу сформировать более привлекательный сниппет.

Микроразметка может повлиять на вывод текста, который передается в сниппет.

Микроразметка может показать насколько новым и актуальным есть контент вашего сайта.

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

Комментарии 1
Игорь
19.06.2018, 16:56
Будет 100% полезно в дополнение про микроразметку https://impulse-design.com.ua/chto-takoe-mikrorazmetka-sajta.html
Написать комментарий
Войдите в личный кабинет
Скачать OkayCMS
version 4.4.0
Подписаться на рассылку
Вы будете получать подборку полезных статей по работе с сайтом на OkayCMS, скидки на модули и шаблоны