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

26 Апреля 2019

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

Schema представляет собой HTML теги. Они необходимы для структурирования данных в интернете, а также, чтобы упростить процедуру обработки информации поисковыми системами.

Например, как поисковая система сможет отличить телефон от факса? Или как отличить кулинарный рецепт от статьи на тему приготовления пищи?

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

Schema имеет более 100 разновидностей микроразметки, с её помощью можно выделить такие объекты как:

  • Медиа
  • Фотографии
  • Люди
  • Организации
  • Комментарии
  • Продукты и услуги

Это лишь меньшая их часть, полный список можно посмотреть здесь - http://schema.org/docs/schemas.html.

Как сделать микроразметку на сайте

Для внедрения микроразметки нужно найти участок кода, в котором осуществляется вывод контента.

Для понимания рассмотрим пример разметки контактной информации для организации.

Микроразметка контактов

Изначально контактная информация представлена в таком виде:

<div> <span>ООО Престиж</span> Адрес: 141151, г. Москва, ул. Гоголя, д. 1 Телефон: +7(495)123-4567 Факс: +7(495)765-4321 Почта: pres@pres.ru </div>

После разметки с помощью schema.org исходный код будет выглядеть так:

<div itemscope itemtype="http://schema.org/Organization"> <span itemprop="name">ООО Престиж</span> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> Адрес: <span itemprop="postalCode">141151</span>, г. <span itemprop="addressLocality">Москва</span>, ул. <span itemprop="streetAddress">Гоголя, д. 1</span> </div> Телефон:<span itemprop="telephone">+7(495)123-4567</span> Факс:<span itemprop="faxNumber">+7(495)765-4321</span> Почта: <span itemprop="email">pres@pres.ru</span> </div>

Разберем пример подробнее.

С помощью атрибутов itemscope, itemtype и itemprop мы указали: название организации, индекс, город, улицу и дом, телефон, факс, электронную почту.

Атрибут itemscope написанный в теге <div> указывает на то, что мы описываем сущность. Тип сущности указывается атрибутом itemtype:

<div itemscope itemtype="http://schema.org/Organization"> ... Описание ... </div>

Вместо Organization мы могли выбрать любой другой тип (например: товар, статью, рецепт).

Атрибут itemprop указывается в теге и имеет свои значения, при разметке контактной информации это:

  • "name" - атрибут, в котором указывается название организации
  • "postalCode" - индекс
  • "addressLocality" - город
  • "streetAddress" - адрес
  • "telephone" - номер телефона
  • "faxNumber" - факс
  • "email" - электронная почта

Микроразметка Schema.org для статьи

Для начала рассмотрим исходный HTML код:

<section> <h1>Микроразметка для статьи</h1> <time>26 апреля 2019</time> <img src="/images/article/microrazmetka-schema-org.png" alt="Микроразметка статьи"> <article> <h2>Подзаголовок</h2> <p>Текст статьи</p> </article> <div>Автор: Игнат Кукушкин</div> </section>

Всю статью необходимо поместить в контейнер:

<section itemscope itemtype="http://schema.org/Article">Здесь вся статья</section>

Внутрь этого контейнера добавляем заголовок:

<h1 itemprop="headline">Микроразметка для статьи</h1>

Указываем время публикации:

<time itemprop="datePublished" datetime="2019-04-26T20:10:00+00:00">26 апреля 2019</time>

Для разметки изображения статьи используем:

<div itemscope itemprop="image" itemtype="http://schema.org/ImageObject"> <img itemprop="image" src="/images/article/1556011480370.jpg" alt="Альтернативное название"> </div>

Далее указываем подзаголовок статьи:

<h2 itemprop="alternativeHeadline">Подзаголовок</h2>

Краткое описание статьи:

<p itemprop="description">Текст описания</p>

Полный текст:

<p itemprop="articleBody">Текст статьи</p>

В итоге мы получаем размеченную с помощью schema.org статью:

<section itemscope itemtype="http://schema.org/Article"> <h1 itemprop="headline">Микроразметка для статьи</h1> <time itemprop="datePublished" datetime="2019-04-26T20:10:00+00:00">26 апреля 2019</time> <div itemscope itemprop="image" itemtype="http://schema.org/ImageObject"> <img itemprop="url contentUrl" src="/images/article/microrazmetka-schema-org.png" alt="Микроразметка статьи"> </div> <h2 itemprop="alternativeHeadline">Подзаголовок</h2> <article itemprop="articleBody"> <p>Текст статьи</p> </article> <div>Автор: <span itemprop="author">Игнат Кукушкин</span></div> <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization"> <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"> <img itemprop="url image" src="/local/templates/.default/img/logo.svg" /> </div> <meta itemprop="name" content="Игнат Кукушкин"> <meta itemprop="telephone" content="+7 800 555 44 33"> <meta itemprop="address" content="г. Москва, ул. Гоголя, д. 1"> </div> <meta itemprop="dateModified" content="2019-04-26T23:30:40+00:00" /> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="Ссылка на статью" /> </section>

Основные атрибуты, которые используются при разметке статьи:

  • headline - название статьи;
  • datePublished - дата публикации документа;
  • image - изображение;
  • articleBody - тело статьи;
  • author - автор;
  • publisher - название сайта, который публикует статью.

Также желательно указывать дополнительные параметры:

  • dateModified - дата изменения статьи;
  • mainEntityOfPage – ссылка на статью.

В publisher можно использовать такие параметры:

  • logo — логотип;
  • name — название организации;
  • telephone – номер телефона;
  • address — адрес.

Микроразметка для коммерческого сайта

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

Микроразметка для услуг и товаров

Product — один из типов Schema, он применяется для разметки продуктов, которые можно продать/купить. Также этот тип включает услуги. Например, продажа билетов, аренда и т.п..

На первом этапе разметки необходимо поместить продукт в контейнер:

<div itemscope itemtype="http://schema.org/Product">Здесь будет информация о товаре</div>

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

<span itemprop="price">Цена</span> <span itemprop="description">Описание товара</span>

Внутри главного блока могут находиться вложенные, которые соответствуют определенной сущности. Например, http://schema.org/Offer или предложение товара, в котором будет указана цена, валюта или продавец.

<div itemscope itemtype="http://schema.org/Product"> <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> </div> </div>

Микроразметка карточки товара

Рассмотрим на примере конкретного товара:

<div itemscope itemtype="http://schema.org/Product"> <h1 itemprop="name">Футболка с топорами</h1> <img src="/images/article/1556011480370.jpg" itemprop="image"> <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <div>700 руб.</div> <meta itemprop="price" content="700.00"> <meta itemprop="priceCurrency" content="RUB"> </div> <div>Производитель: <span itemprop="brand">Макс-Экстрим</span></div> <div>Модель: <span itemprop="model">3774438</span></div> <div itemprop="description">Дизайнерская футболка, перевод надписи - <br> "Нечего делать с ножом там, где нужен топор". Футболка с классным <br> дизайном, изготовлена из качественных материалов и стойкой краски.</div> </div>

Микроразметка категории товаров

<div itemscope itemtype="http://schema.org/Product"> <p itemprop="name">Мужские футболки</p> <div itemtype="http://schema.org/AggregateOffer" itemscope="" itemprop="offers"> <div>40 товаров</div> <meta content="40" itemprop="offerCount"> <div>от 500 руб.</div> <meta content="500" itemprop="lowPrice"> <div>до 1000 руб.</div> <meta content="1000" itemprop="highPrice"> <meta content="RUB" itemprop="priceCurrency"> </div> </div>
  • offerCount – общее количество продуктов в разделе;
  • lowPrice – самая низкая стоимость в разделе;
  • highPrice – самая высокая цена в разделе;

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

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

Возьмем такую последовательность:

Главная – Каталог – Мужские футболки

На сайте futbolka.ru код хлебных крошек будет представлен в таком виде:

<ol id="breadcrumbs"> <li> <a href="https://futbolka.ru/">Главная</a> </li> <li> <a href="https://futbolka.ru/catalog/">Каталог</a> </li> <li> <a href="https://futbolka.ru/catalog/muzhskie-futbolki/">Мужские футболки</a> </li> </ol>

С применением правил Schema.org получим:

<div itemscope="" itemtype="http://schema.org/BreadcrumbList" id="breadcrumbs"> <span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem"> <a rel="nofollow" itemprop="item" title="Главная" href="//futbolka.ru"> <span itemprop="name">Главная</span> <meta itemprop="position" content="1"> </a> </span> <span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem"> <a itemprop="item" title="Каталог" href="//futbolka.ru/catalog/"> <span itemprop="name">Каталог</span> <meta itemprop="position" content="2"> </a> </span> <span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem"> <a itemprop="item" title="Мужские футболки" href="//futbolka.ru/catalog/muzhskie-futbolki/"> <span itemprop="name">Мужские футболки</span> <meta itemprop="position" content="3"> </a> </span> </div>

В первой строке указывается, что мы используем Schema.org. Здесь:

  • Itemscope – атрибут, указывающий, что в блоке задается элемент;
  • Itemtype – это тип элемента, в данном случае навигационный;
  • BreadcrumbList – это разделы в хлебных крошках.
  • Параметр itemprop со значением “itemListElement” обозначает пункт списка элементов.

Микроразметка отзывов

Review используется для разметки отзывов и комментариев. Нужно указать какой тип микроразметки мы будем использовать:

<div itemprop="review" itemscope itemtype="http://schema.org/Review">

В блоке Review можно указать такие параметры:

  • name — заголовок;
  • author — автор;
  • datePublished — дата публикации;
  • reviewBody — текст комментария;
  • reviewRating – оценка.

Пример микроразметки

Посмотрим, как выглядит отзыв на примере:

<div itemprop="review" itemscope itemtype="http://schema.org/Review"> <span itemprop="name">Превосходная статья!</span> <span itemprop="author">Иван Алексеевич</span> <meta itemprop="datePublished" content="2019-26-04"> <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> <meta itemprop="worstRating" content = "0"> <span itemprop="ratingValue">10</span> <span itemprop="bestRating">10</span> </div> <span itemprop="reviewBody">Очень познавательная и информативная статья! Узнал много нового.</span> </div> </div>

Здесь внутри применен блок Rating со следующими видами оценок:

  • worstRating – минимальная оценка;
  • ratingValue – оценка, которую поставил автор;
  • bestRating – максимальная оценка.

Как проверить микроразметку на сайте

В этом разделе рассмотрим сервисы для проверки правильности размещения микроразметки Schema.org.

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

Рассмотрим 2 онлайн сервиса от Яндекс и Google:

Structured Data Testing Tool - проверка микроразметки в Google

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

В левой части отображается исходный код страницы/фрагмента. В правой части отображается то, как это видит поисковая система, а также ошибки и причину их появления.

Ниже представлен пример того, как инструмент указывает на ошибки в разметке:

Валидатор микроразметки в Яндекс

Как и в прошлом сервисе здесь есть 2 варианта: проверить всю страницу или фрагмент исходного кода.
После Проверки парсер выдает результаты:

Если будут обнаружены ошибки или предупреждения, то Вы увидите их причину, например, отсутствие какого-либо обязательного поля:

Инструменты для разметки данных

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

Генераторы микроразметки Schema.org

Микроразметка Schema.org для WordPress

Если вы используете WordPress, то для разметки контента можно использовать плагины:

Это одни из популярных плагинов для WordPress. Они просты в установке и использовании. С ними Вам не нужно копаться в коде и изучать программирование для внедрения разметки в шаблон сайта.

Микроразметка Schema.org для Bitrix (Битрикс)

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

Один из бесплатных плагинов – Микроразметка Schema.org. В настоящий момент плагин содержит большинство необходимых типов разметки. Здесь представлена вся документация, детальная инструкция по установке и внедрению Schema.org на сайт.

Микроразметка Schema.org для Joomla

В этой CMS разметить данные можно двумя способами:

  1. Вручную внедрять разметку в html код;
  2. Использовать Маркер Гугла.

Ручная разметка

Для разметки вручную, необходимо знать html и уметь работать с шаблонами Joomla. Кроме этого нужно изучить документацию Schema.org. У новичков этот метод может вызвать затруднения.

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

Разметка через Маркер Гугла

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

У этого способа есть значительный недостаток, эти данные передаются только в Google.

Вот краткое пособие по работе с этим инструментом:

  1. Зайти в сервис и выбрать свой сайт.
  2. Указать URL документа, который будем размечать и выбрать тип микроразметки.
  3. Разметка осуществляется путем выделения мышкой элемента: наименование, картинка, стоимость и т.д.
  4. Посмотреть подобные документы, которые предложит Google.
  5. Опубликовать данные в Google и дождаться индексации.

Заключение

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

Очень важно, чтобы в разметке не было ошибок, поэтому не забывайте проверять её через специальные инструменты.


Другие статьи
16  Ноября  2017
Продвижение и раскрутка сайта своими руками
Продвижение сайта, как полагают многие, позволит получить прибыль без каких-либо вложений. В статье даются советы с чего начать при раскрутке сайта под Яндекс своими руками и объясняется что такое оптимизация.
26  Апреля  2019
Микроразметка Schema.org
Schema.org — это стандарт семантической разметки данных в интернете, который используют большинство поисковых систем.
26  Апреля  2019
Настройка ROBOTS.txt
ROBOTS.TXT - Стандарт исключений для роботов - файл в текстовом формате.txt для ограничения доступа роботам к содержимому сайта. Файл должен находиться в корне сайта (по адресу /robots.txt).
22  Ноября  2017
Договор на оказание услуг по продвижению сайта

Сегодня поговорим о том, как «надувают» в СЕО бизнесе.

26  Апреля  2019
Как правильно составить семантическое ядро?
Вы решили самостоятельно заняться продвижением своего сайта? Тогда начинать всегда нужно со сбора семантического ядра.
Получить предложение
Укажите сайт и контактные данные, наш бизнес-консультант подготовит для Вас стратегию продвижения
Нажимая на кнопку "Отправить заявку", вы соглашаетесь с Политикой конфиденциальности
Заказать книгу
Укажите контактные данные
Нажимая на кнопку "Отправить заявку", вы соглашаетесь с Политикой конфиденциальности
Вход на сайт
Стать партнёром
Укажите свои имя и телефон
Нажимая на кнопку "Отправить заявку", вы соглашаетесь с Политикой конфиденциальности
Рассчитать стоимость продвижения сайта!
Нажимая на кнопку "Отправить заявку", вы соглашаетесь с Политикой конфиденциальности