В 2005 году начал набирать популярности способ семантической разметки Микроформаты (microformats).
А 2011 году крупнейшие поисковые системы Google, Yahoo! и Microsoft инициировали разработку единой схемы для семантической разметки в HTML5 — Schema.org. Чуть позже присоединился и Яндекс.
Сейчас поисковые системы уже сами могут определить некоторые типы данных на странице, даже если на сайте и не была внедрена микроразметка. К тому же, как и большинство подобных «фич», наличие микроразметки на сайте еще не гарантия того, что поисковые системы ее будут использовать для формирования вашего сниппета. Вы лишь помогаете поисковикам разобраться быстрее и лучше, а они уже сами решают, что и в каком виде показывать в выдаче.
Словари и синтаксисы микроразметки
Микроразметка состоит из словаря и синтаксиса. В словаре описаны классы и свойства данных. А в синтаксисе – набор правил, которые с помощью тегов и атрибутов помогают реализовать этот словарь.
Со времен зарождения идеи семантической разметки данных использовались разные словари и синтаксисы. В статье мы рассмотрим только самые популярные из них.
Словари
На практике вам чаще всего доведеться сталкиваться со словарями Schema.org, который влияет на поисковую выдачу и Open Graph, который влияет на вид репоста в социальной сети Facebook.
Schema.org
Данную микроразметку понимают все поисковые системы. Еще 2011 году Google, Yahoo! и Microsoft, а чуть позже и Яндекс, инициировали разработку Schema.org — единой схемы для семантической разметки в HTML5.
Еще один плюс, словарь постоянно дополняется. Так например в 2019 году появились новые типы микроразметки: FAQ (часто задаваемые вопросы), Q&A (вопрос-ответ, как на форумах, например), HowTo (для инструкций).
Полная документация находиться на сайте schema.org. Но неокрепший ум новичка может там просто затеряться и потерять всякий энтузиазм.
Поэтому в первую очередь рекомендуем посмотреть:
-
Центр Google Поиска — тут довольно много справочной информации с инструкциями, примерами оформления кода в различном синтаксисе и скриншотами, как разные типы данных выглядят в поисковой выдаче.
-
Яндекс.Вебмастер — аналогичная справочная библиотека, только только от Яндекс.
Open Graph
А этот словарь стал актуальным в эпоху шеринга страниц сайтов в Facebook, но так же поддерживается и в Telegram, Viber, Slack, ВКонтакте, LinkedIn, Skype и многих других. Решает проблемы с отображением ссылки, картинки, названия и описания страницы сайта для того чтобы, пост выглядел более привлекательно.
Стандартный набор тегов:
- og:locale — указывает языковую версию страницы.
- og:type — тип страницы (например, статья, новость или видео).
- og:title — заголовок статьи.
- og:description — краткое описание страницы.
- og:url — ссылка на страницу сайта.
- og:image — ссылка на картинку, которая будет отображаться в посте.
- og:site_name — название сайта.
Пример:
<meta property="og:title" content="Как составить контент-план для социальных сетей"/>
<span id="selection-marker-1" class="redactor-selection-marker"></span>
<meta property="og:description" content="Контент-план для социальных сетей: что это такое, как составлять,
примеры ведения и темы для постов Instagram, Facebook и Telegram.">
<meta property="og:type" content="article">
<meta itemprop="image" content="https://cdn.tripmydream.com/travelhub/blog/blog/46/18/block_4618.jpg">
<meta property="article:publisher" content="https://www.facebook.com/TRIPMYDREAMcom">
<meta property="og:site_name" content="tripmydream">
Микроформаты
А вот особенность микроформатов заключается в том, что тут объединен и словарь и синтаксис. При использовании микроформатов к уже существующей html разметке добавляются параметры тегов.
Но ее же минус в том, что этот синтаксис не универсальный. Яндекс понимает только несколько микроформатов, а гугл чуть больше. Так что по нашему индивидуальному мнению, проще использовать Schema.org.
Официальный сайт: microformats.org.
Одни из самых известных микроформатов:
- hCard — организации и люди;
- hCalendar — события;
- hAtom — ленты новостей (как аналог RSS и Atom) в обычном HTML или XHTML;
- XFN — социальные взаимоотношения;
- xFolk — помеченные ссылки;
- adr — почтовые адреса;
- geo — географические координаты;
- hReview — отзывы;
- hProduct — товары;
- hRecipe — кулинарные рецепты.
Синтаксисы
Для того, чтобы внедрить микроразметку на сайт понадобиться выбрать синтаксис, с помощью которого и нужно будет реализовывать словарь.
JSON-LD
Самый свежий формат, появился в 2010 году и уже с 2013-2014 года именно его и рекомендуют использовать Schema.org и Google. Так что скорее всего именно с ним вам и придется иметь дело.
Основное отличие JSON-LD от остальных, это то, что он внедряется не в HTML-код страницы (это мы рассмотрим чуть ниже), а в тег <script>. Данный синтаксис представляет из себя набор пар “ключ”: “значение”, которые даже человеку можно легко понять, не то что поисковому боту.
Например разметка FAQ Page:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "Текст вопроса 1",
"acceptedAnswer": {
"@type": "Answer",
"text": "Текст ответа 1"
}
},{
"@type": "Question",
"name": "Текст вопроса 2",
"acceptedAnswer": {<span id="selection-marker-1" class="redactor-selection-marker"></span>
"@type": "Answer",
"text": "Текст ответа 2"
}
}]
}
</script>
В данном случае видно, что, например, "@context", "@type", "name", "text" — это ключи, а после двоеточия уже идут значения — "https://schema.org", "FAQPage", "Текст вопроса 1" и "Текст ответа 1".
Microdata
Синтаксис начал использоваться в HTML-5. Благодаря ему поисковики начали лучше понимать контент и стали появляться те самые приятные глазу расширенные данные в поисковой выдаче. В соответствии с этим синтаксисом разметка происходит в HTML-коде страницы. Причем внедряется она в видимую часть страницы.
Используется несколько основоположных атрибутов: itemscope, itemtype и itemprop, через которые указываются и описываются сущности в HTML-коде.
- Itemscope указывает, что в коде расположена сущность;
- Itemtype описывает ее тип. Itemscope и Itemtype всегда идут в паре;
- Itemprop же описывает свойства этой сущности.
Например, микроразметка «breadcrumbs»:
<html>
<head>
<title>Award Winners</title>
</head>
<body>
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemprop="item" href="https://tripmydream.academy/blog">
<span itemprop="name">Главная</span></a>
<meta itemprop="position" content="1" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemscope itemtype="https://schema.org/WebPage"
itemprop="item" itemid="https://tripmydream.academy/blog"
href="https://tripmydream.academy/blog">
<span itemprop="name">Академия.Блог</span></a>
<meta itemprop="position" content="2" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<span itemprop="name">SEO</span>
<meta itemprop="position" content="3" />
</li>
</ol>
</body>
</html>
RDFa
Разметка также происходит в HTML-коде. Реализация сложнее, чем в предыдущих вариантах. Синтаксис RDFa чаще всего используют со словарем Open Graph для формирования красивого сниппета в социальных сетях. Пример такого кода мы уже давали в описании к Open Graph.
Основные виды структурированных данных
Вот именно в этом разделе статьи будет та, информация, которую лучше запомнить!
Самые главные типы микроразметки для расширенных результатов поиска:
- Товар;
- Строка навигации, она же хлебные крошки или breadcrumbs;
- Статья, она же запись в блоге или новость;
- Отзыв;
- Рейтинг;
- Логотип;
- Местная компания;
- FAQ – Часто задаваемые вопросы;
- Вопросы и ответы;
- Инструкции с пошаговым выполнением;
- Рецепт;
- Фильм;
- Видео;
- Подкаст;
- Книга;
- Строка поиска по сайту;
- Приложение;
- Учебные курсы;
- Отзывы критиков;
- Событие;
- Проверка фактов;
- Домашние занятия;
- Лицензия на изображение;
- Вакансия работодателя;
- Программа обучения;
- Ориентировочная зарплата;
- Speakable – новостной контент, который может быть озвучен Google Ассистентом;
- Платный контент и подписка;
- Карусель – результаты с одного сайта, которые выводятся в виде списка или галереи, используется в сочетании с разметкой для Рецептов, Курсов, Ресторанов или Фильмов;
- Крупные наборы данных / Dataset (сюда очень много всего входит, почитайте лучше тут).
Подробное описание со скринами и примерами кода в разном синтаксисе можно посмотреть в Центре Google Поиска и Яндекс.Вебмастере.
Есть гораздо больше данных, которые можно разметить, но далеко не все из них могут быть использованы в расширенных результатах поисковой выдачи. Чтобы узнать больше, изучите schema.org, там очень много всего интересного.