Что такое «микроразметка» и зачем она нужна?

Бывает так, что продвижение сайта работает не совсем корректно. Технические проблемы все устранены, страницы наполнены уникальным контентом, а поисковые роботы в упор не видят Ваш полезный ресурс. В таком случае им нужно помочь и для этой цели используют микроразметку. Разберем в этой статье, что это такое и зачем нужно.

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

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

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

Приведем несколько существенных причин, зачем нужно использовать микроразметку:

Микроразметка включает в себя две основные части:

· Словарь – это набор классов и свойств, которые описывают тип содержимого страниц и передают ключевую информацию;

· Синтаксис – это способ указания сущностей и свойств словаря в HTML-коде.

На сегодняшний день самым популярным из словарей является Schema.org. Рассмотрим основные аспекты работы с ним.

Микроразметка Schema.org

Schema.org – это стандарт семантической разметки данных, который помогает поисковикам лучше понимать данные, представленные на сайте.

Словарь этой микроразметки состоит из сущностей и их параметров.

Schema.org поддерживает несколько вариантов синтаксиса:

Микроданные

Это разметка страницы при помощи добавления в ее HTML-код специальных атрибутов:

1. itemscope выделяет HTML-элементы в сущности;

2. itemtype определяет тип сущности и используется вместе с предыдущим атрибутом;

3. itemprop устанавливает параметр сущности.

К основным сущностям, которые используются в этом стандарте, относят:

· WPHeader — сущность, используемая для разметки шапки сайта;

· SiteNavigationElement — сущность, используемая для разметки меню;

· BreadcrumbList — сущность, используемая для разметки хлебных крошек;

· Organization – сущность, которая используется для описания крупных организаций (частью этой разметки является объект LocalBusiness);

· Product — сущность, используемая для разметки товара;

· Products list — сущность, используемая для разметки списка товаров:

· Blog — сущность, используемая для разметки статей блога;

· Movie — сущность, используемая для разметки фильма;

· Recipe — сущность, используемая для разметки рецепта;

· ImageObject — сущность, используемая для разметки картинки;

· VideoObject — сущность, используемая для разметки видео;

· Event — сущность, используемая для разметки события;

· Question — сущность, используемая для разметки блока вопрос-ответ;

· Review — сущность, используемая для разметки отзыва;

· WPFooter — сущность, используемая для разметки футера сайта;

· Для разметки статей используется несколько вариантов сущностей, которые имеют практически одинаковые свойства: BlogPosting (разметка статей в блоге и публикации на сайте), NewsArticle (разметка новостей), Article (схема, которая подходит для всех типов текстовых материалов).

Примеры микроразметки через микроданные

Рассмотрим конкретные примеры использования микроданных для разметки основных элементов сайта.

Разметка шапки сайта

Шапка без микрооразметки:

<header><h1>Заголовок</h1><p>Автор<p><img src="Ссылка на изображение"></header>

Шапка с микроразметкой:

&lt;/header&gt;&lt;header itemscope itemtype="http://schema.org/WPHeader"&gt;&lt;meta itemprop="name"content="Название"&gt;&lt;meta itemprop="description"content="Описание"&gt;&lt;meta itemprop="keywords" content="Ключевое слово 1, Ключевое слово 2, Ключевое слово 3"&gt;&lt;h1 itemprop="headline"&gt;Заголовок&lt;/h1&gt;&lt;p itemprop="creator"&gt;Автор&lt;p&gt;&lt;img itemprop="image" src="&gt;Ссылка на изображение"&gt;

Разметка меню

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

&lt;nav itemscope itemtype="http://schema.org/SiteNavigationElement"&gt;&lt;a itemprop="url" href="http://example1.com/"&gt;&lt;span itemprop="name"&gt;Ссылка 1&lt;/span&gt;&lt;/a&gt;&lt;a itemprop="url" href="http://example2.com/"&gt;&lt;span itemprop="name"&gt;Ссылка 2&lt;/span&gt;&lt;/a&gt;&lt;a itemprop="url" href="http://example3.com/"&gt;&lt;span itemprop="name"&gt;Ссылка 3&lt;/span&gt;&lt;/a&gt;&lt;/nav&gt;

Разметка хлебных крошек

Хлебные крошки с микроразметкой:

&lt;ul itemscope itemtype="http://schema.org/BreadcrumbList"&gt;&lt;li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"&gt;&lt;a itemprop="item" href="http://example1.com/"&gt;&lt;span itemprop="name"&gt;Ссылка 1&lt;/span&gt;&lt;/a&gt;&lt;meta itemprop="position" content="1" /&gt;&lt;/li&gt;&lt;li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"&gt;&lt;a itemprop="item" href="http://example2.com/"&gt;&lt;span itemprop="name"&gt;Ссылка 2&lt;/span&gt;&lt;/a&gt;&lt;meta itemprop="position" content="2" /&gt;&lt;/li&gt;&lt;li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"&gt;&lt;a itemprop="item" href="http://example3.com/"&gt;&lt;span itemprop="name"&gt;Ссылка 3&lt;/span&gt;&lt;/a&gt;&lt;meta itemprop="position" content="3" /&gt;&lt;/li&gt;&lt;/ul&gt;

Разметка организации

Организация с микроразметкой:

&lt;div itemscope itemtype="http://schema.org/Organization"&gt;&lt;div itemprop="name"&gt;Название компании&lt;/div&gt;&lt;link itemprop="url" href="Ссылка на сайт"&gt;&lt;div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress"&gt;&lt;span itemprop="postalCode"&gt;Почтовый индекс&lt;/span&gt;,&lt;span itemprop="addressCountry"&gt;Страна&lt;/span&gt;,&lt;span itemprop="addressRegion"&gt;Область&lt;/span&gt;,&lt;span itemprop="addressLocality"&gt;Город&lt;/span&gt;,&lt;span itemprop="streetAddress"&gt;улица, номер дома&lt;/span&gt;&lt;/div&gt;&lt;div&gt;Телефон: &lt;a itemprop="telephone" href="tel:+79999999999"&gt;+7 (999) 999-99-99&lt;/a&gt;&lt;/div&gt;&lt;div&gt;Почта: &lt;a itemprop="email" href="mailto:email@email.ru"&gt;email@email.ru&lt;/a&gt;&lt;/div&gt;&lt;div&gt;Факс: &lt;a itemprop="faxNumber" href="tel:+79999999999"&gt;+7 (999) 999-99-99&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;

Разметка товара

Товар с микроразметкой:

&lt;div&gt;&lt;a href="http://example1.com/"&gt;&lt;img itemprop="image" src="Ссылка на изображение"&gt;&lt;h3 itemprop="name"&gt;Название продукта 1&lt;/h3&gt;&lt;div itemprop="offers" itemscope itemtype="http://schema.org/Offer"&gt;&lt;span itemprop="price"&gt;47280&lt;/span&gt;&lt;span itemprop="priceCurrency"&gt;руб.&lt;/span&gt;&lt;/div&gt;&lt;div itemprop="brand"&gt;Бренд&lt;/div&gt;&lt;div itemprop="model"&gt;Модель&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;

Разметка статьи

Статья с микроразметкой:

&lt;article itemscope itemtype="http://schema.org/Article"&gt;&lt;p&gt;Автор: &lt;span itemprop="author"&gt;Автор статьи&lt;/span&gt;&lt;/p&gt;&lt;span&gt;Дата: &lt;time itemprop="datePublished" datetime="2020-08-14&lt;/"&gt;14 августа 2020&lt;/time&gt;&lt;/span&gt;&lt;h1 itemprop="headline"&gt;Название статьи&lt;/h1&gt;&lt;img itemprop="image src="Ссылка на изображение" /&gt;&lt;div itemprop="articleBody"&gt;Текст статьи&lt;/div&gt;&lt;/article&gt;

Разметка картинки

Картинка с микроразметкой:

&lt;div itemscope itemtype="http://schema.org/ImageObject"&gt;&lt;div itemprop="name"&gt;Название картинки&lt;/div&gt;&lt;img src=
"Ссылка на картинку" itemprop="contentUrl" /><span itemprop="description">Описание картинки</span></div>

Разметка вопрос-ответ

Вопрос-ответ с микроразметкой:

&lt;div itemscope itemtype="https://schema.org/FAQPage"&gt;&lt;div itemprop="mainEntity" itemscope itemtype="https://schema.org/Question"&gt;&lt;div itemprop="name"&gt;Вопрос&lt;/div&gt;&lt;div itemprop="text"&gt;Текст вопроса&lt;/div&gt;&lt;span itemprop="answerCount"&gt;Кол-во ответов&lt;/span&gt;&lt;div itemprop="upvoteCount"&gt;Всего голосов за вопрос&lt;/div&gt;&lt;/div&gt;&lt;div itemprop="acceptedAnswer" itemscope="" itemtype="http://schema.org/Answer"&gt;&lt;div itemprop="upvoteCount"/&gt;Всего голосов за ответ&lt;/div&gt;Ответ: &lt;span itemprop="text"&gt;Ответ&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;

Микроформаты

Это разметка страницы при помощи добавления свойства разметки в значение атрибута class.

Рассмотрим несколько ключевых форматов разметки:

hCard — формат разметки контактной информации (адресов, телефонов и т. д.);

Свойства:

НазваниеЗначениеfnПолное названиеnНазваниеnicknameНикнэймorgКомпания/ОрганизацияphotoФотоurlСсылкаemailЭлектронная почтаtelНомер телефонаadrАдресbdayДень рождения. Формат: yyyy-mm-ddcategoryКатегорияnoteЗаметки

hRecipe — формат для описания кулинарных рецептов;

Свойства:

НазваниеЗначениеfnНазвание рецептаingredientОдин или несколько ингредиентовyieldКоличество порцийinstructionsИнструкция по приготовлениюdurationВремя, необходимое для приготовления блюдаphotoФотоsummaryКраткое введение или сопроводительное заявление о рецептеauthorАвторpublishedДата публикации рецептаnutritionПищевая информация, такая как калории, жиры, пищевые волокна и т. д.tagКлючевое слово, указывающее на тему или важный аспект рецепта

hProduct— формат для описания товаров;

Свойства:

НазваниеЗначениеbrandБрендcategoryКатегорияpriceЦенаdescriptionОписаниеfnНазваниеphotoФотоurlСсылкаreviewОтзывlistingСписок товаров

<div class="vcard"><img class="photo" src="face.jpg" alt="Face"><p>Привет, это я - <span class="title" style="display:none">веб-разработчик и программист</span><b class="fn">Иван Иванов</b>.Мои друзья <b class="nickname">Big M</b>.</p><p>Вы можете связаться со мной в офисе<span class="org">The Magic Semantic Company</span> (телефон:<span class="tel">641-545-0234</span>).</p><p>Или зайти в гости:<br><span class="street-address" style="display:none">Leninskiy prospekt 68</span>Ленинскийпроспект 68<br><span class="locality" style="display:none">Moscow</span>Москва,<span class="postal-code">119296</span><br><span class="country-name" style="display:none">RUS</span>Россия<br></p></div>

Нужно отметить, что данных способ микроразметки уже устарел.

RDFa

Разметка страницы при помощи добавления пяти атрибутов: vocab, typeof, property, resource, prefix:

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

&lt;body vocab="http://schema.org/"&gt;…&lt;/body&gt;

Typeof выделяет HTML-элемент в сущность и задает его тип (в примере Article – один из классов стандарта).

&lt;body vocab="http://schema.org/"&gt;&lt;div typeof="Article"&gt;….&lt;/div&gt;&lt;/body&gt;

Property – устанавливает параметр сущности (в примере свойство name задает заголовок объекту Article).

&lt;body vocab="http://schema.org/"&gt;&lt;div typeof="Article"&gt;&lt;div property="name"&gt;An introduction to RDF&lt;/div&gt;More information regarding this article, or even thecontent itself&lt;/div&gt;&lt;/body&gt;

Resource – предоставляет сущности идентификатор.

<p property="author" resource="#uche.ogbuji" typeof="Person"><span property="name">Uche Ogbuji</span>,<span property="jobTitle">Partner</span>,<span property="worksFor">Zepheira</span>. 01 Dec 2000.</p>

Атрибут resource предоставляет объекту идентификатор, который идентифицирует соответствующий фрагмент по отношению к URL-адресу страницы.

Prefix – используется для объединения нескольких словарей в одном описании (в примере задан префикс для ссылки на свойство согласно спецификациям Freebase).

&lt;div prefix="fben: http://rdf.freebase.com/ns/"&gt;This article's texts is suitable for a wide audience, with a Fog index of&lt;span property="fben:gunning_fog_index"&gt;10.2&lt;/span&gt;&lt;/div&gt;

JSON-LD

Разметка страницы при помощи JavaScript на базе текстового формата JSON.

Компания Google рекомендует использовать в работе JSON-LD, он более простой и компактный, но Яндекс на данный момент его не поддерживает. Поэтому для продвижения в Рунете больше подходят микроданные или RDFa.

Микроразметка Open Graph

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

Для внедрения Open Graph в открывающем теге <html> добавьте префикс, который укажет на пространство имен Open Graph:

&lt;html xmlns:og="http://ogp.me/ns#"/&gt;

Чтобы передать информацию сервисам, необходимо в <meta> теги в <head> добавить следующие обязательные свойства:

og:title — название материала.

og:type — тип материала.

Например:

music.song – песня

music.album – альбом

music.playlist – плейлист

music.radio_station – радиостанция

Сервисы валидации микроразметки

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

Заключение

Микроразметка – это мощный инструмент для продвижения сайта в ТОП поисковой выдачи. Благодаря внедрению разметки данных в код сайта, поисковые боты быстрее определяют его основную тему, что в разы ускоряет процесс индексирования.