Бывает так, что продвижение сайта работает не совсем корректно. Технические проблемы все устранены, страницы наполнены уникальным контентом, а поисковые роботы в упор не видят Ваш полезный ресурс. В таком случае им нужно помочь и для этой цели используют микроразметку. Разберем в этой статье, что это такое и зачем нужно.
Что такое «микроразметка»
Микроразметка – это стандарт для оптимизации страниц в сети, который помогает поисковым ботам быстрее определять суть находящейся на сайте информации. Благодаря использованию этого механизма улучшается отображение ресурса в поисковой системе.
Пользователь может увидеть элементы микроразметки в сниппете того или иного сайта. Сниппет – это небольшой блок информации о странице, который отображается в результатах поиска.
Пример сниппета без микроразметки
Приведем несколько существенных причин, зачем нужно использовать микроразметку:
1. Она позволяет поисковым системам быстрее и легче определять содержание страницы, а значит и находить ее по релевантным запросам;
2. Сниппет становится более привлекательным для посетителя, так как содержит больше полезной информации;
3. Разметка данных помогает продвижению сайта в ТОП поисковой выдачи;
4. Расширенное описание ресурса в интернете увеличивает трафик посещения и улучшает поведенческие показатели сайта.
Сниппет с микроразметкой более привлекателен, как для пользователя (потому что содержит больше полезной информации), так и для поисковых роботов
Микроразметка включает в себя две основные части:
· Словарь – это набор классов и свойств, которые описывают тип содержимого страниц и передают ключевую информацию;
· Синтаксис – это способ указания сущностей и свойств словаря в 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>
Шапка с микроразметкой:
</header><header itemscope itemtype="http://schema.org/WPHeader"><meta itemprop="name"content="Название"><meta itemprop="description"content="Описание"><meta itemprop="keywords" content="Ключевое слово 1, Ключевое слово 2, Ключевое слово 3"><h1 itemprop="headline">Заголовок</h1><p itemprop="creator">Автор<p><img itemprop="image" src=">Ссылка на изображение">
Разметка меню
Меню без микрооразметки:
<nav><a href="http://example1.com/"><span>Ссылка 1</span></a><a href="http://example2.com/"><span>Ссылка 2</span></a><a href="http://example3.com/"><span>Ссылка 3</span></a></nav>
Меню с микроразметкой:
<nav itemscope itemtype="http://schema.org/SiteNavigationElement"><a itemprop="url" href="http://example1.com/"><span itemprop="name">Ссылка 1</span></a><a itemprop="url" href="http://example2.com/"><span itemprop="name">Ссылка 2</span></a><a itemprop="url" href="http://example3.com/"><span itemprop="name">Ссылка 3</span></a></nav>
Варианты расширенных сниппетов с использованием микроразметки меню
Разметка хлебных крошек
Хлебные крошки без микрооразметки:
<ul><li><a href="http://example1.com/"><span>Ссылка 1</span></a></li><li><a href="http://example2.com/"><span>Ссылка 2</span></a></li><li><a href="http://example3.com/"><span>Ссылка 3</span></a></li></ul>
Хлебные крошки с микроразметкой:
<ul itemscope itemtype="http://schema.org/BreadcrumbList"><li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="http://example1.com/"><span itemprop="name">Ссылка 1</span></a><meta itemprop="position" content="1" /></li><li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="http://example2.com/"><span itemprop="name">Ссылка 2</span></a><meta itemprop="position" content="2" /></li><li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="http://example3.com/"><span itemprop="name">Ссылка 3</span></a><meta itemprop="position" content="3" /></li></ul>
Вариант расширенного сниппета с использованием микроразметки хлебных крошек
Разметка организации
Организация без микрооразметки:
<div><div>Название компании</div><div><img src="Cсылка на логотип" /></div><div>Почтовый индекс, Страна, Область, Город, улица, номер дома</div><div>Телефон: <a href="tel:+79999999999">+7 (999) 999-99-99</a></div><div>Почта: <a href="mailto:email@email.ru">email@email.ru</a></div><div>Факс: <a href="tel:+79999999999">+7 (999) 999-99-99</a></div></div>
Организация с микроразметкой:
<div itemscope itemtype="http://schema.org/Organization"><div itemprop="name">Название компании</div><link itemprop="url" href="Ссылка на сайт"><div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress"><span itemprop="postalCode">Почтовый индекс</span>,<span itemprop="addressCountry">Страна</span>,<span itemprop="addressRegion">Область</span>,<span itemprop="addressLocality">Город</span>,<span itemprop="streetAddress">улица, номер дома</span></div><div>Телефон: <a itemprop="telephone" href="tel:+79999999999">+7 (999) 999-99-99</a></div><div>Почта: <a itemprop="email" href="mailto:email@email.ru">email@email.ru</a></div><div>Факс: <a itemprop="faxNumber" href="tel:+79999999999">+7 (999) 999-99-99</a></div></div>
Вариант расширенного сниппета с использованием микроразметки организации
Разметка товара
Товар без микрооразметки:
<div><a href="http://example1.com/"><img src="Ссылка на изображение"><h3>Название продукта 1</h3><div><span>47280</span><span>руб.</span></div><div>Бренд</div><div>Модель</div></a></div>
Товар с микроразметкой:
<div><a href="http://example1.com/"><img itemprop="image" src="Ссылка на изображение"><h3 itemprop="name">Название продукта 1</h3><div itemprop="offers" itemscope itemtype="http://schema.org/Offer"><span itemprop="price">47280</span><span itemprop="priceCurrency">руб.</span></div><div itemprop="brand">Бренд</div><div itemprop="model">Модель</div></a></div>
Вариант расширенного сниппета с использованием микроразметки товара
Разметка списка товаров
Список товаров без микрооразметки:
<ul><li><a href="http://example1.com/"><img src="image.jpg"><h3>Название продукта 1</h3><div><span>47280</span><span>руб.</span></div><div>Бренд</div><div>Модель</div></a></li><li><a href="http://example2.com/"><img src="image.jpg"><h3>Название продукта 2</h3><div><span>25250</span><span>руб.</span></div><div>Бренд</div><div>Модель</div></a></li></ul>
Список товаров с микроразметкой:
<ul itemscope itemtype="http://schema.org/ItemList"><li itemscope itemprop="itemListElement" itemtype="http://schema.org/Product"><a href="http://example1.com/"><img itemprop="image" src="image.jpg"><h3 itemprop="name">Название продукта 1</h3><div itemprop="offers" itemscope itemtype="http://schema.org/Offer"><span itemprop="price">47280</span><span itemprop="priceCurrency">руб.</span></div><div itemprop="brand">Бренд</div><div itemprop="model">Модель</div></a></li><li itemscope itemprop="itemListElement" itemtype="http://schema.org/Product"><a href="http://example1.com/"><img itemprop="image" src="image.jpg"><h3 itemprop="name">Название продукта 1</h3><div itemprop="offers" itemscope itemtype="http://schema.org/Offer"><span itemprop="price">47280</span><span itemprop="priceCurrency">руб.</span></div><div itemprop="brand">Бренд</div><div itemprop="model">Модель</div></a></li></ul>
Вариант расширенного сниппета с использованием микроразметки списка товаров
Разметка статьи
Статья без микрооразметки:
<article><p>Автор: Автор статьи</p><span>Дата: <time>2020-08-14T11:48:26+00:00</time></span><h1>Название статьи</h1><img src="Ссылка на изображение" /><div>Текст статьи</div></article>
Статья с микроразметкой:
<article itemscope itemtype="http://schema.org/Article"><p>Автор: <span itemprop="author">Автор статьи</span></p><span>Дата: <time itemprop="datePublished" datetime="2020-08-14</">14 августа 2020</time></span><h1 itemprop="headline">Название статьи</h1><img itemprop="image src="Ссылка на изображение" /><div itemprop="articleBody">Текст статьи</div></article>
Вариант расширенного сниппета с использованием микроразметки статьи
Разметка списка статей блога
Список статей блога без микрооразметки:
<div><article><p>Автор: Автор статьи</p><span>Дата: <time>2020-08-14T11:48:26+00:00</time></span><h1>Название статьи</h1><img src="Ссылка на изображение" /><div>Текст статьи</div></article><article><p>Автор: Автор статьи</p><span>Дата: <time>2020-08-14T11:48:26+00:00</time></span><h1>Название статьи</h1><img src="Ссылка на изображение" /><div>Текст статьи</div></article></div>
Список статей блога с микроразметкой:
<div itemscope itemtype="http://schema.org/Blog"><div itemprop="description">Описание для списка статей</div><article itemscope itemtype="http://schema.org/BlogPosting"><p>Автор: <span itemprop="author">Автор статьи</span></p><span>Дата: <time itemprop="datePublished" datetime="2020-08-14</">14 августа 2020</time></span><h1 itemprop="headline">Название статьи</h1><img itemprop="image src="Ссылка на изображение" /><div itemprop="articleBody">Текст статьи</div></article><article itemscope itemtype="http://schema.org/BlogPosting"><p>Автор: <span itemprop="author">Автор статьи</span></p><span>Дата: <time itemprop="datePublished" datetime="2020-08-14</">14 августа 2020</time></span><h1 itemprop="headline">Название статьи</h1><img itemprop="image src="Ссылка на изображение" /><div itemprop="articleBody">Текст статьи</div></article></div>
Вариант расширенного сниппета с использованием микроразметки списка статей блога
Разметка фильма
Фильм без микрооразметки:
<div><h1>Название фильма</h1><a href="Ссылка на фильм"><img src="Ссылка на изображение превьюшку фильма" /></a><p><a href="Ссылка на режиссера">ФИО режиссера</a>,<a href="Ссылка на режиссера">ФИО режиссера</a>.</p><p><a href="Ссылка на продюсера">ФИО продюсера</a>,<a href="Ссылка на продюсера">ФИО продюсера</a>,<a href="Ссылка на всех продюсеров">и другие</a>.</p><p><a href="Ссылка на композитора">ФИО композитора</a>,<a href="Ссылка на композитора">ФИО композитора</a>.</p><p><a href="Ссылка на категорию жанра">Название жанра</a>,<a href="Ссылка на категорию жанра">Название жанра</a>,<a href="Ссылка на категорию жанров">и другие</a>.</p><p>В главных ролях:</p><div><a href="Ссылка на актёра">ФИО актёра</a><a href="Ссылка на актёра">ФИО актёра</a><a href="Ссылка на актёра">ФИО актёра</a></div></div>
Фильм с микроразметкой:
<div itemscope itemtype="http://schema.org/Movie"/><h1 itemprop="name">Название фильма</h1><span itemprop="alternativeHeadline">Альтернативное название на латинице</span><a itemprop="url" href="Ссылка на фильм"><img src="Ссылка на изображение превьюшку фильма" itemprop="image" /></a><p><a itemprop="director" href="Ссылка на режиссера">ФИО режиссера</a>,<a itemprop="director" href="Ссылка на режиссера">ФИО режиссера</a>.</p><p><a itemprop="producer" href="Ссылка на продюсера">ФИО продюсера</a>,<a itemprop="producer" href="Ссылка на продюсера">ФИО продюсера</a>,<a href="Ссылка на всех продюсеров">и другие</a>.</p><p><a itemprop="musicBy" href="Ссылка на композитора">ФИО композитора</a>,<a itemprop="musicBy" href="Ссылка на композитора">ФИО композитора</a>.</p><p><a itemprop="genre" href="Ссылка на категорию жанра">Название жанра</a>,<a itemprop="genre" href="Ссылка на категорию жанра">Название жанра</a>,<a href="Ссылка на категорию жанров">и другие</a>.</p><p>В главных ролях:</p><div><a itemprop="actor" href="Ссылка на актёра">ФИО актёра</a><a itemprop="actor" href="Ссылка на актёра">ФИО актёра</a><a itemprop="actor" href="Ссылка на актёра">ФИО актёра</a></div><div itemprop="video" itemscope itemtype="http://schema.org/VideoObject"/><!-- Описание видеоролика, общее для всех видео --><link itemprop="url" href="Ссылка на фильм" /><span itemprop="description">Описание фильма</span><meta itemprop="contentRating" content="Официальный рейтинг фильма возрастной категории"/><meta itemprop="duration" content="PT1H30M" /><meta itemprop="uploadDate" content="2019-04-23T09:12:32+00:00" /><meta itemprop="inLanguage" content="ru" /><meta itemprop="isFamilyFriendly" content="true" /><meta itemprop="productionCompany" content="ФИО компании выпустившая фильм" /><div><h1 itemprop="name">Название фильма</h1><span itemprop="alternativeHeadline">Альтернативное название на латинице</span><img src="Ссылка на изображение превьюшку фильма" itemprop="thumbnailUrl thumbnail" /></div></div><meta itemprop="dateCreated" content="2019-04-23T09:12:32+00:00" /></div>
Вариант расширенного сниппета с использованием микроразметки фильма
Разметка рецепта
Рецепт без микрооразметки:
<div><h1>Название рецепта</h1><div>Описание рецепта</div><img src="Ссылка на изображение" /><ul><li>Автор рецепта: Автор</li><li>После приготовления вы получите 4 порции</li><li>Время приготовления: 45 минут</li></ul><h2>Ингредиенты:</h2><ul><li>1 курица</li><li>5 л пива</li><li>соль</li><li>перец</li><li>специи по вкусу</li></ul><h2>Способ приготовления</h2><ul><li><img src="Ссылка на изображение ингредиента" />Курицу нарезать на кусочки, выложить в форму для запекания,посолить, поперчить, добавить специи по вкусу.</li><li><img src="Ссылка на изображение ингредиента" />Курицу залить пивом, поставить в духовку.</li><li><img src="Ссылка на изображение ингредиента" />Жарить при температуре 180 градусов в течение 40—45 минут.</li></ul><span>Блюда из курицы</span><div>Пищевая ценность:<ul><li>Калории: 120 ккал.</li><li>Жиры: 7 г.</li><li>Углеводы: 1 г.</li></ul></div>Приятного аппетита!</div>
Рецепт с микроразметкой:
<div itemscope itemtype="http://schema.org/Recipe"/><h1 itemprop="name">Название рецепта</h1><div itemprop="description">Описание рецепта</div><div>Теги: <span itemprop="keywords">ключевые, слова, для, рецепта</span></div><img itemprop="image" src="Ссылка на изображение" /><ul><li>Автор рецепта: <span itemprop="author">Автор</span></li><li>После приготовления вы получите <span itemprop="recipeYield">4 порции</span></li><li>Время приготовления: <meta itemprop="totalTime" content="PT45M" />45 минут</li></ul><h2>ингредиенты</h2><ul><li itemprop="recipeIngredient">1 курица</li><li itemprop="recipeIngredient">5 л пива</li><li itemprop="recipeIngredient">соль</li><li itemprop="recipeIngredient">перец</li><li itemprop="recipeIngredient">специи по вкусу</li></ul><h2>способ_приготовления</h2><ul itemprop="recipeInstructions" itemtype="https://schema.org/ItemList" itemscope><li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"/><img itemprop="image" src="Ссылка на изображение ингредиента" />Курицу нарезать на кусочки, выложить в форму для запекания, посолить, поперчить, добавить специи по вкусу.</li><li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"/>;<img itemprop="image" src="Ссылка на изображение ингредиента" />Курицу залить пивом, поставить в духовку.</li><li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"/><img itemprop="image" src="Ссылка на изображение ингредиента" />Жарить при температуре 180 градусов в течение 40—45 минут.</li></ul><span itemprop="recipeCategory">Блюда из курицы</span><div itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation"/>Пищевая ценность:<ul><li>Калории: <span itemprop="calories">120 ккал.</span>,</li><li>Жиры: <span itemprop="fatContent">7 г.</span></li><li>Углеводы: <span itemprop="carbohydrateContent">1 г.</span></li></ul></div>Приятного аппетита!</div>
Вариант расширенного сниппета с использованием микроразметки рецепта
Разметка картинки
Картинка без микрооразметки:
<div><div>Название картинки</div><img src="Ссылка на картинку" /><span>Описание картинки</span></div>
Картинка с микроразметкой:
<div itemscope itemtype="http://schema.org/ImageObject"><div itemprop="name">Название картинки</div><img src="Ссылка на картинку" itemprop="contentUrl" /><span itemprop="description">Описание картинки</span></div>
Разметка видео
Видео без микрооразметки:
<div><link href="Ссылка на видео"><meta content="Название видео" /><p>Описание видео</p><p>Дата загрузки: 2013-06-05T00:00:00</p></div>
Видео с микроразметкой:
<div itemscope itemtype="http://schema.org/VideoObject"><link itemprop="url" href="Ссылка на видео"><meta itemprop="name" content="Название видео"><p itemprop="description">Описание видео</p><meta itemprop="duration" content="PT6M58S" /><meta itemprop="isFamilyFriendly" content="true"><link itemprop="thumbnailUrl" href="Превьюшка изображение"/><p>Дата загрузки: <span itemprop="uploadDate">2013-06-05T00:00:00</span></p><div itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject"><img itemprop="contentUrl" src="Превьюшка изображение"><meta itemprop="width" content="250"><meta itemprop="height" content="120"></div></div>
Разметка события
Событие без микрооразметки:
<div><img src="Изображение или постер события" /><div>Название события</div><div>Описание события</div><div>Концерт состоится 8 мая, в 19:30Окончание концерта 8 мая, в 20:30</div><div>Место проведения: Страна или город,Полный адрес</div><div>ФИО исполнителя или название группы</div></div>
Событие с микроразметкой:
<div itemscope itemtype="http://schema.org/Event" /><img itemprop="image" src="Изображение или постер события.jpg" /><div itemprop="name">Название события</div><div itemprop="description">Описание события</div><div>Концерт состоится<time itemprop="startDate" datetime="2019-05-08T19:30">8 мая, в 19:30</time>Окончание концерта<time itemprop="endDate" datetime="2019-05-08T20:30">8 мая, в 20:30</time></div><div itemprop="location" itemscope itemtype="http://schema.org/Place" />Место проведения: <span itemprop="name">Страна или город</span>,<span itemprop="address">Полный адрес</span></div><div itemprop="performer" itemscope itemtype="http://schema.org/Person" /><span itemprop="name">ФИО исполнителя или название группы</span></div></div>
Вариант расширенного сниппета с использованием микроразметки события
Разметка вопрос-ответ
Вопрос-ответ без микрооразметки:
<div><div>Как продвинуть сайт в Москве?</div><div>Сколько не пытаюсь, не получается.</div><div>Ответ: <span>Для начала прочитайте статью на тему, как продвинуть сайт в регионах:
https://d-element.ru/about/blog/kak-prodvinut-sayt-v-regionakh/</span></div><div>Ответ:<span>Кто бы умел...</span></div></div>
Вопрос-ответ с микроразметкой:
<div itemscope itemtype="https://schema.org/FAQPage"><div itemprop="mainEntity" itemscope itemtype="https://schema.org/Question"><div itemprop="name">Вопрос</div><div itemprop="text">Текст вопроса</div><span itemprop="answerCount">Кол-во ответов</span><div itemprop="upvoteCount">Всего голосов за вопрос</div></div><div itemprop="acceptedAnswer" itemscope="" itemtype="http://schema.org/Answer"><div itemprop="upvoteCount"/>Всего голосов за ответ</div>Ответ: <span itemprop="text">Ответ</span></div></div>
Вариант расширенного сниппета с использованием микроразметки вопрос-ответ
Разметка отзыва
Отзыв без микрооразметки:
<div><span>Заголовок отзыва</span>от <span>Автор</span> <time>09 августа 2005</time>,<span>Отзыв</span></div>
Отзыв с микроразметкой:
<div itemscope itemtype="http://schema.org/Review"><a href="Ссылка на отзыв" itemprop="url">№134</a><span itemprop="name">Заголовок отзыва</span> от <span itemprop="author">Автор</span>,<time itemprop="datePublished" datetime="2005-08-09">09 августа 2005</time><div itemprop="itemReviewed" itemscope itemtype="https://schema.org/Organization"><div itemprop="name">Название компании</div><div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"><img itemprop="contentUrl" src="Ссылка на логотип" alt="Logo"></div><link itemprop="url" href="Ссылка на сайт"><div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress"><span itemprop="postalCode">Почтовый индекс</span>,<span itemprop="addressCountry">Россия</span>,<span itemprop="addressRegion">Область</span>,<span itemprop="addressLocality">Город</span>,<span itemprop="streetAddress">улица, номер дома</span></div><div>Телефон: <a itemprop="telephone" href="tel:+79999999999">+7 (999) 999-99-99</a></div><div>Почта: <a itemprop="email" href="mailto:email@email.ru">email@email.ru</a></div><div>Факс: <a itemprop="faxNumber" href="tel:+79999999999">+7 (999) 999-99-99</a></div></div><div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"><meta itemprop="worstRating" content="0"><span itemprop="ratingValue">9</span><span itemprop="bestRating">10</span></div><span itemprop="reviewBody">Отзыв</span></div>
Вариант расширенного сниппета с использованием микроразметки отзыва
Разметка футера
Футер без микрооразметки:
<footer><div>© 2020 Все права защищены.</div></footer>
Футер с микроразметкой:
<footer itemscope itemtype="http://schema.org/WPFooter"><meta itemprop="copyrightYear" content="2020"><meta itemprop="copyrightHolder" content="Держатель_копирайта"><div>© 2020 Все права защищены.</div></footer>
Микроформаты
Это разметка страницы при помощи добавления свойства разметки в значение атрибута 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 указывает на словарь, который будет использоваться для разметки.
Пример использования словаря, соответствующего стандарту Scheme.org
<body vocab="http://schema.org/">...</body>
Typeof выделяет HTML-элемент в сущность и задает его тип (в примере Article – один из классов стандарта).
<body vocab="http://schema.org/"><div typeof="Article">....</div></body>
Property – устанавливает параметр сущности (в примере свойство name задает заголовок объекту Article).
<body vocab="http://schema.org/"><div typeof="Article"><div property="name">An introduction to RDF</div>More information regarding this article, or even thecontent itself</div></body>
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).
<div prefix="fben: http://rdf.freebase.com/ns/">This article's texts is suitable for a wide audience, with a Fog index of<span property="fben:gunning_fog_index">10.2</span></div>
JSON-LD
Разметка страницы при помощи JavaScript на базе текстового формата JSON.
Пример использования данной схемы разметки
<html><head><title>Award Winners</title><script type="application/ld+json">{"@context": "https://schema.org",
"@type":
"BreadcrumbList",
"itemListElement": [{"@type": "ListItem","position": 1,
"name": "Books",
"item": "https://example.com/books"},{"@type":"ListItem", "position": 2,
"name": "Science Fiction","item": "https://example.com/books/sciencefiction"},{"@type":"ListItem", "position": 3,"name": "Award Winners"}]}</script></head><body></body></html>
Компания Google рекомендует использовать в работе JSON-LD, он более простой и компактный, но Яндекс на данный момент его не поддерживает. Поэтому для продвижения в Рунете больше подходят микроданные или RDFa.
Микроразметка Open Graph
Это вариант микроразметки, который разработан компанией Facebook для привлекательного вида контента, которым каждый делится в соцсетях. На сегодняшний день этот стандарт поддерживается популярными соцсетями.
Для внедрения Open Graph в открывающем теге <html> добавьте префикс, который укажет на пространство имен Open Graph:
<html xmlns:og="http://ogp.me/ns#"/>
Чтобы передать информацию сервисам, необходимо в <meta> теги в <head> добавить следующие обязательные свойства:
og:title — название материала.
og:type — тип материала.
Например:
music.song – песня
music.album – альбом
music.playlist – плейлист
music.radio_station – радиостанция
video.movie – видео
video.episode – эпизод из видео
video.tv_show – ТВ-шоу
video.other – другая категория видеоматериала
article – статья, публикация
product – товар, услуга
profile – профайл
book – книга
website – обычная HTML страница
Популярные значения:
website – обычная HTML страница
article – статья, публикация
product – товар, услуга
og:image — используется как постер к публикации в соц. сетях.
og:image:width – задает кол-во пикселей в ширину
Пример:
<meta property="og:image:width" content="1280">
og:image:height – задает кол-во пикселей в высоту
Пример:
<meta property="og:image:height" content="1024">
og:url — ссылка на саму веб-страницу.
og:site_name — название сайта.
Пример использования микроразметки
<html prefix="og: http://ogp.me/ns#video: http://ogp.me/ns/video#"><head><meta property="og:title" content="Криминальное чтиво"/><meta property="og:url" href="https://www.kinopoisk.ru/film/342/"/><meta property="og:video" href="https://widgets.kinopoisk.ru/discovery/film/342/trailer/71731?noAd=0&embedId=&hidden=&muted=&loop=0&autoplay=1&from="/><meta property="og:description"
content="Преступники занимаются повседневными бандитскими делами, а в
перерывах ведут философские беседы и рассказывают друг другу забавные случаи из
жизни."/><meta property="og:image" href="https://avatars.mds.yandex.net/get-kinopoisk-image/1900788/87b5659d-a159-4224-9bff-d5a5d109a53b/300x450"/><meta property="og:type" content="video.movie"/></head></html>
Сервисы валидации микроразметки
Прежде чем вставлять микроразметку на свой сайт, ее необходимо проверить на валидность, т.е. оценить корректность написанного кода. Для этих задач можно использовать валидатор Яндекса или Google.
Внешний вид валидатора от Google, который более удобен за счет большего окна для кода и подсказок по исправлению ошибок
Внешний вид валидатора от Яндекса
Заключение
Микроразметка – это мощный инструмент для продвижения сайта в ТОП поисковой выдачи. Благодаря внедрению разметки данных в код сайта, поисковые боты быстрее определяют его основную тему, что в разы ускоряет процесс индексирования.