Руководство по языку микроразметки schema.org

Schema.org – это набор образцов (стандартов) семантической разметки информации в сети интернет, распознаваемой крупнейшими поисковиками Яндекс, Google, Bing, Yahoo! Образцы представлены в форме тегов HTML кода. С их помощью поисковые роботы автоматически распознают содержимое веб-страниц.

О чём поговорим на этот раз? Зачем нужно внедрять Schema.org, какие у неё плюсы, как пользоваться микроразметкой, что и куда вносить.

Общая информация

Коллекции стандартов микроразметки опубликованы на одноимённом сайте schema.org (https://schema.org) и постоянно обновляются. Цель проекта – достичь оптимальной структуры веб-страниц, тем самым обеспечить их корректное отображение в поисковой выдаче, и максимально упростить для пользователя процесс поиска интересующих его страниц.

По сути, Schema.org – доступный для общего пользования словарь, в котором можно подобрать наиболее эффективную микроразметку, а точнее её схему. Он используется совместно с микроданными.

Зачем вам нужен Schema.org?

Как правило, веб-сайты формируются из структурированных сведений, хранящихся в Базе данных. Но после перевода данных в стандартизированный язык HTML становится крайне сложно воссоздать их первоначальный вид. Именно разметка веб-страниц даёт поисковикам детальное разъяснение по информации, указанной на вашем интернет-ресурсе.

Возьмём наглядный пример: вы заходите на страницу, где описываются Пираты Карибского моря. Познакомившись с заголовком и началом статьи, вы догадались, о чём именно идёт речь – допустим, о фильме. С машинным оборудованием всё гораздо сложнее: требуется микроразметка, с помощью которой робот способен различить суть контента – фильм, компьютерная игра или книга «Пираты Карибского моря».

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

Плюсы наличия микроразметки для поисковых систем понятны. А что это даёт владельцам сайтов? Уверен, вы знаете сами, но всё же кратко я их обозначу.

Преимущества Schema.org для сайта

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

Инструкция: разметка содержимого сайта за счёт микроданных

Как я уже отметил, разметку Schema.org официально поддерживают самые популярные поисковики. Возьмём пример микроразметки по киноленте «Аватар», размещённый в Яндекс.Вебмастер.

На скриншоте я выделил 3 атрибута, применяемые в любой микроразметке Schema.org:

  1. Атрибут itemscope – даёт понять поисковому боту, в каком фрагменте страницы сообщается о некоей сущности (объекте).
  2. Атрибут itemtype – поясняет роботу, о какой именно сущности говорится на странице. В нашем случае Movie. Этот атрибут всегда проставляется после itemscope.

Полный перечень объектов (иерархия типов) находится на официальном сайте разработчика.

  1. Атрибут itemprop – сообщает роботу о свойствах сущности (объекта). В этом примере указаны название ленты (itemprop=»name»), режиссёр (itemprop=»director»), жанр (itemprop=»genre»), трейлер (itemprop=»trailer»). Полный перечень свойств по объекту Movie.

Разъяснение по тегам

Теги <div> … </div> указывают на начало и конец описания сущности. Теги <span> … </span> вмещают свойства сущности, разъясняемые с помощью текста.

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

Тег <time> с атрибутом datetime – позволяет задать дату в виде YYYY-MM-DD.

<time datetime=»2019-03-12″>03/12/19</time>

– задаёт дату 12 марта 2019 года.

<time datetime=»2019-03-12T18:40″>12 марта, 18:40</time>

– дополнительно к дате указывает время, в данном случае 18:40

Тег <link> с атрибутом href – используется для перечисления, а также для проставления ссылок на канонические веб-страницы. Указанные таким образом ссылки не видны интернет-пользователям.

Теги <a> … </a> – предназначены для ввода ссылок, видимых пользователями.

Тег <meta> с атрибутом content – даёт возможность указать информацию, которую не получается прописать с помощью разметки. Данный метод рекомендуется использовать для отдельных случаев – только тогда, когда сведения невозможно отобразить другими способами. К примеру, рейтинг товара указывается на картинке (5 из 5 звёзд).

<div itemscope itemtype=»http://site.ru/x»>

<span itemprop=»name»>Dress black</span>

<img src=»five-stars.jpg» /> 17 оценок

</div>

Thing: самый универсальный тип сущности

Суммарное число типов сущностей и их подтипов постоянно растёт. Найти нужный для вас вариант довольно сложно. Давайте пройдёмся по наиболее популярному типу Thing и выделим несколько подтипов.

Action – разъясняет прошедшее или запланированное действие (событие), совершаемое человеком либо компанией (организацией). В нём можно указать место, объект и средства, с использованием которых реализовалось данное действие. Микроразметка помогает дать обзор целому перечню свойств: actionStatus (обзор действия на данный момент); agent (указание субъекта, совершавшего действие); startTime (применим к запланированным действиям и указывает их начало); endTime (указание даты/времени, в которое завершилось данное действие); result (результат) и так далее.

Product – подходит для товаров и услуг, которые можно купить или продать. В свойствах сущности можно указать: brand (название компании); logo (логотип бренда – URL изображения); reviews (отзывы или обзоры товаров/услуг); manufacturer (производитель товара) и так далее.

Person – описывает любого человека. Для этого типа можно указать массу свойств, например, affiliation (организации, с которыми он связан); alumniOf (учебные заведения, которые он окончил); award (полученные им награды, премии, медали, дипломы); birthDate (день рождения); contactPoint (контактные данные), другие личные сведения.

Event – даёт описание к мероприятию. Как правило, здесь указывается organizer (организатор мероприятия); attendees (участники); performer (гости, выступление которых планируется); doorTime (время начала мероприятия); subEvent (сопутствующие данному мероприятию события) и так далее.

CreativeWork – позволяет разъяснить отличительные черты творческих работ. Данный тип применяется для описания диет, кулинарных рецептов, видео и фото контента. Для этих работ можно указать следующие свойства: creator (создатель); comment (комментарии); provider (лицо, которое занимается продажей этой работы); genre (жанр); audience (аудиторию, для которой она создана); about (описание работы) и многое другое.

Закрепляем теорию на практике

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

<div itemscope itemtype=»http://schema.org/Recipe»>

<span itemprop=»name»>Вкусные блинчики для худеющих</span>

<span itemprop=»recipeInstructions»>

В подготовленную ёмкость разбейте яйца, добавьте соль и сахар. Хорошо перемешайте венчиком (можно вилкой) до получения однородной смеси (взбивать не требуется).

</span>

<span itemprop=»author»>Ирина Ирина</span>

<meta itemprop=»datePublished» content=»2019-02-12″>February 12, 2019

<img itemprop=»image» src=»Картинка_блины.jpg» />

<span itemprop=»description»>Описание рецепта</span>

<meta itemprop=»prepTime» content=»PT10M»>10 minutes

<meta itemprop=»cookTime» content=»PT25M»>25 minutes

<span itemprop=»recipeIngredient»>3 яйца</span>

<span itemprop=»recipeIngredient»>2 столовые ложки сахара</span>

<span itemprop=»recipeIngredient «>0,5 л молока</span>

<span itemprop=»recipeIngredient «>2 столовые ложки растительного масла</span>

<span itemprop=»recipeIngredient «>1 чайная ложка соли</span>

</div>

Сервисы-помощники

  1. «Валидатор микроразметки» от Яндекс. Осуществляет проверку микроразметки, введённой на веб-сайте – тестирует, смогут ли поисковые роботы распознать структурированные данные.

  1. Rich Snippets Testing Toolо от Google. Аналогично предыдущей программе.

  1. Ruschema.org – неформальный проект перевода официального сайта schema.org. Возможно, ознакомление с ним поможет вам освоить нюансы работы.

  1. Инструменты для добавления микроразметки на сайт. С подробностями и ссылками на полезные веб-ресурсы вы ознакомитесь в «переведённой» версии Schema.org в разделе «Инструменты».

Вывод

Итак, микроданные одинаково несут пользу для поисковых систем и владельцев сайтов. Технически процесс создания и внедрения микроразметки несложный – достаточно вникнуть в суть дела и опробовать знания на практике. К сожалению, применение языка Schema.org не даёт гарантий поднятия позиций вашего ресурса в поисковой выдаче и прирост трафика. Но, дав подробные пояснения роботам, вы получаете красивое отображение веб-страниц в поиске, тем самым привлекаете внимание потенциальных клиентов благодаря структурированным сниппетам. В любом случае, качественный сайт – основная составляющая успешного интернет продвижения.

Понравилась статья?
Подпишитесь на рассылку, и на еженедельной основе получайте подборку интересных новостей, статей и исследований из мира интернета и маркетинга
Согласие с Политикой обработки персональных данных
Поделиться
  • 1
  •  
  •  
  •  
  •  
  •  
    1
    Поделиться