Краткая информация о разметке структурированных данных

 

 

Термин «структурированные данные» обозначает информацию, которая отформатирована общепринятым способом. Крупные поисковые системы, такие как Google и Bing, используют структурированные данные (которые реализованы на страницах сайта) для отбора результатов в поиске и улучшения показа этих результатов. Все это призвано облегчить пользователям поиск нужной информации.

 

 

Зачем нужны структурированные данные?

Страницы сайта содержат определенную информацию, которая понятна пользователям, когда они ее читают. С другой стороны, поисковые системы имеют несколько ограниченное понимание контента веб-страницы. Допустим, например, что у вас на сайте есть страница о мустанге. Поисковая система могла просканировать страницу, но не обязательно поняла точное значение слова «мустанг». Мустанг – это может быть и животное (одичавшая домашняя лошадь), или же это может быть марка автомобиля.

Такое недопонимание затрудняет процесс отображения релевантных результатов поиска пользователю для поисковых систем. Люди могут понимать значение слова из контекста страницы, но поисковые системы испытывают трудности с этим (хотя с каждым годом они становятся все умнее и умнее).

С использованием структурированных данных вы можете помочь поисковым системам понять ваш контент и отобразить его полезным, соответствующим образом.

 

 

Как используются структурированные данные?

Структурированные данные имеют одно важное преимущество: описательность. Информация, которая хранится в структурированных данных, может использоваться поисковыми системами для генерации расширенных фрагментов (rich snippets). Расширенные фрагменты предоставляют пользователю более подробную информацию, которая соотносится с их поисковыми запросами.

Вероятно, вы сталкивались с примерами расширенных фрагментов. Когда вы ищете что-то в Интернете, поисковая система может показывать особые карточки с информацией о фильмах, событиях, новостях, кулинарных рецептах и т.д. Эти карточки были созданы благодаря микроданным. Микроразметка страницы может использоваться для предоставления поисковым системам дополнительной информации о веб-странице.

Эти расширенные фрагменты в результатах поиска выглядят немного отлично от остальных результатов, что часто приводит к повышению CTR (иногда до 30%). Звучит неплохо, да?

 

 

Типы структурированных данных

Существует четыре типа разметки структурированных данных:

• JSON-LD
• Microdata
• Microformats
• RFDa

 

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

 

 

JSON-LD

Это наиболее современный вариант. Данные, которые относятся к этому формату, встраиваются в тег <script> в заголовке (head) или теле (body) страницы. Разметка размещается отдельно от текста, который видим для пользователя. Поисковые системы могут считывать данные в формате JSON-LD, которые добавлены на страницу динамично, например через код JavaScript или виджеты в CMS (системе управления контентом). Этот формат рекомендован поисковиком Google.

Пример кода микроразметки данных в формате JSON-LD:

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "Organization",
 "url": "https://sebweo.com",
 "name": "SebWeo Corp.",
 "contactPoint": {
  "@type": "ContactPoint",
  "telephone": "012-345-6789",
  "contactType": "Customer support"
 }
}
</script>

 

 

Microdata (микроданные)

Микроданные – это, вероятно, самый популярный тип структурированных данных, в основном благодаря сайту Schema.org, который был создан по инициативе крупнейших поисковых систем (Google, Bing и Yahoo).

Разметка микроданных состоит из трех элементов: itemscope, itemtype и itemprops. Атрибут itemscope содержит информацию об элементе. Добавляя itemscope в код HTML, вы указываете, что контент в выбранном вами элементе соотносится с определенной позицией.

<div itemscope>
  Концерт «Океан Эльзы»
</div>

 

Добавьте элемент itemtype для определения типа содержимого. Используйте этот атрибут сразу после itemscope.

<div itemscope itemtype="http://schema.org/Event">
  Концерт «Океан Эльзы»
</div>

 

В этом примере itemscope сообщает поисковым системам, что элемент, содержащийся в теге div, фактически является событием (тип Event). Itemtype всегда добавляются в качестве URL-адреса. На сайте Schema.org вы найдете полный список всех типов содержимого.

Теперь, когда поисковые системы знают, что ваша страница посвящена событию, вы можете предоставить им дополнительную информацию об этом конкретном событии. Для этого используется атрибут itemprop.

Если мы хотим определить местоположение концерта «Океан Эльзы», мы просто добавляем itemprop="location" к элементу, который содержит название местоположения.

<div itemscope itemtype="http://schema.org/Event">
  <span itemprop="name">Концерт «Океан Эльзы»</span>.
  Концерт состоится на стадионе <span itemprop="location">Олимпийский</span>.
</div>

 

Иногда может потребоваться добавить дополнительные элементы, чтобы указать детали itemprop. Для этого мы используем теги <span>, потому что они меньше всего влияют на то, как инлайновый текст интерпретируется браузером.

 

 

Дата и время

Дата и время могут трудно определяться. Например, дата 10/11/18, означает ли она 11 октября 2018 года? Или 10 ноября 2018 года? Непонятно, не так ли? У поисковых систем такая же проблема.

Чтобы предоставить поисковым роботам правильное время и дату, нам нужно добавить атрибут 'datetime'. Этот атрибут определяет дату с использованием формата YYYY-MM-DD (год-месяц-дата).

<time datetime="2019-11-10">10/11/19</time>

Вышеуказанный код обозначает 10 ноября 2019 года.

 

Атрибут datetime также может использоваться для указания времени. Для времени используется префикс с буквой T.

<time datetime="2019-05-25T21:30">25 мая, 21:30</time>

 

В приведенном выше коде отображается следующая дата и время: 25 мая 2019 года, 21.30. Если мы соединим все вместе, мы получим что-то вроде этого:

<div itemscope itemtype="http://schema.org/Event">
  <span itemprop="name">Концерт «Океан Эльзы»</span>.
  Концерт состоится на стадионе <span itemprop="location">Олимпийский</span>
  <time datetime="2019-05-25T21:30">25 мая, в 21:30</time>.
</div>

 

С помощью этих простых тегов мы можем сказать поисковым системам, что 25 мая 2019 года в 21:30 на стадионе Олимпийский состоится концерт Океан Эльзы. Мы можем использовать и другие атрибуты для разметки веб-страниц о книгах, фильмах, организациях, кулинарных рецептах и ​​т.д.

 

 

Неявная информация

Информация не всегда видна пользователям и поисковым системам. Некоторая информация может быть встроена в медиа-объект или не может быть явно указана на странице. В этом случае вы можете использовать метатеги meta для указания этой информации.

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

<meta itemprop="Duration" content="T5M25S" />

Приведенный выше код говорит поисковым системам, что видео имеет продолжительность 5 минут и 25 секунд (для дат и времени используется формат ISO8601). После этого данная информация будет отображаться в виде расширенного фрагмента в результатах поиска.

 

 

Microformats (микроформаты)

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

Наиболее популярными типами микроформатов являются hCard, hCalendar и hReview. hCard используется для людей, компаний и организаций. hCalendar может использоваться для добавления информации о событиях. А с hReview вы можете добавить отзыв о ресторанах, книгах, фильмах и т.д.

Предположим, у нас есть страница о футбольном матче. Прежде всего, нам нужно сообщить поисковым системам, что эта веб-страница посвящена событию, ссылаясь на hCalendar в <head>. ВНИМАНИЕ! В новой спецификации используется значение h-event.

<head profile="http://microformats.org/profile/hcalendar">

 

Затем нам нужно сообщить поисковым системам, что часть нашей веб-страницы посвящена событию. Для этого мы используем класс vevent.

<div class="vevent">

 

Все, что содержится в нашем теге <div>, дает поисковой системе больше информации о событии (но при необходимости вы также можете использовать другие теги, такие как <span> или <p>). Если мы хотим добавить заголовок для нашего события, мы используем свойство summary. Оно является обязательным для события!

<div class="vevent">
  <span class="summary">Динамо – Шахтер</span>
</div>

 

Используя свойство location, мы можем указать, где будет проходить футбольный матч.

<div class="vevent">
  <span class="summary">Динамо – Шахтер</span>
  на <span class="location">стадион Олимпийский</span>
</div>

 

С помощью этого кода мы сообщим поисковым системам, что матч между «Динамо» и «Шахтер» состоится на стадионе Олимпийский. Другим требуемым свойством для hCaldendar является dtstart. Это свойство описывает дату и время события.

<div class="vevent">
  <span class="summary">Динамо – Шахтер</span>
  на <span class="location">стадион Олимпийский</span>
  <time class="dtstart" title="2019-05-25T21:30">25 мая 2019 года в 21:30</time>
</div>

 

Эти теги дают поисковым системам больше информации о футбольном матче между «Динамо» и «Шахтером», — например, о месте проведения турнира и дате/времени.

Рекомендуем вам ознакомиться с вики-информацией о микроформатах на сайте Microformats.org.

 

 

RFDa

RFDa использует ряд свойств для идентификации объектов (например, человека или события). Он использует теги HTML, такие как <div> и <span>, для описания объектов. Более сложные функции RFDa могут быть трудными для веб-мастеров, которые не являются экспертами в структурированных данных.

RFDa имеет четыре основных атрибута: voctype, typeof, property и resource.

 

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

<p vocab="http://schema.org">
  Привет, меня зовут Иван Иванович!
</p>

 

С помощью этого кода мы указали, что словарь для наших тегов RFDa можно найти на schema.org (например). Существует несколько других словарей, таких как LOV и Dublin Core. Теперь нам нужно указать тип данных. Это информация о человеке, событии, ресторане…? Для этого мы используем атрибут typeof.

<p vocab="http://schema.org" typeof="Person">
  Привет, меня зовут Иван Иванович!
</p>

 

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

<p vocab="http://schema.org" typeof="Person">
  Привет, меня зовут <span property="name">Иван Иванович</span>!
</p>

 

Вышеприведенный код говорит нам, что на этой веб-странице находится человек по имени Иван Иванович. Мы можем добавить уникальный идентификатор к этим структурированным данным, чтобы идентифицировать этого человека, добавив атрибут ресурса (resource).

<p vocab="http://schema.org" resource="#ivan" typeof="Person">
  Привет, меня зовут <span property="name">Иван Иванович</span>!
</p>

 

Этот уникальный идентификатор полезен, если мы хотим поговорить об Иване Ивановиче на другом сайте. Добавив идентификатор в конец URL этой веб-страницы (например, https://site.com/peoples#ivan), у нас будет ссылка на всю информацию об Иване Ивановиче.

Для получения дополнительной информации о реализации RFDa ознакомьтесь с документацией RDFa на w3.org.

 

 

Тестирование разметки структурированных данных

Вы потратили много часов, чтобы добавить структурированные данные на свой сайт. Но откуда вы будете знать, что сделали это правильно? В этом вам поможет Google Structured Data Testing Tool. Этот онлайн-инструмент проверяет страницу по URL-адресу или фрагменту HTML кода на соответствие требованиям разметки структурированных данных. Это позволит дать вам представление о том, как страница будет отображаться в результатах поиска.

 

 

 

Краткий итог

Постоянно появляются новые виды разметки структурированных данных. Это позволяет поисковым системам более эффективно интерпретировать контент и создавать расширенные фрагменты.

Используя структурированные данные на своем сайте, вы повышаете свои шансы в результатах поиска. Страницы сайта, на которых реализованы структурированные данные, имеют более высокий CTR.

Обязательно поделитесь своими мыслями о статье в комментариях ниже.