Семантическая разметка сайта Shema.org

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

Микроразметка состоит из определенных атрибутов, которые добавляются в код страницы сайта. Для разных элементов контента используются соответствующие атрибуты микроразметки.

В данной статье рассмотрим, как добавить разметку сайта.

• Синтаксис микроразметки Sсhema.org
• Добавление микроразметки на сайт
• Проверка валидности разметки

Синтаксис микроразметки Sсhema.org

Синтаксис микроразметки Sсhema.org  состоит из сущностей (например, Продукт, Организация) и свойств, которые описывают параметры сущности (SKU, цена, наличие и т.д.).

Весь список сущностей и документация — на официальном сайте schema.org.

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

• указывается адрес словаря микроразметки, который задействован в разметке соответствующего элемента. Ссылка будет вести на соответствующую папку на домене schema.org.

В разметке данных в html-коде используются следующие теги:

<div> – тег контейнеров для структурирования разделов документа и упорядочивания данных в коде;

<span> — строчный контейнер;

<link> – элемент для указания ссылки;

<time> – тег для разметки даты и времени;

<a> – тег для обозначения ссылок;

<meta> — для хранения дополнительной информации;

Схемы атрибуты и свойства описаны и представлены на сайте schema.org
 

Добавление микроразметки на сайт

В качестве примера возьмем страницу "контакты" для добавления микроразметки. Страница контактов выглядит примерно так (рис.1).

 

Рисунок 1.

На данной странице можно добавить микроразметку и описать данные организации. Для этого переходим в режим редактирования страницы (это можно сделать через панель администрировани раздел Дизайн, далее "Страницы и блоки", выбрать статическую страницу "Контакты" или через in-place редактирование), в режим "Источник" (рис.2).


Рисунок 2.

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

Любое описание микроразметки начинается с задания объекта описания. В словаре на сайте schema.org выбираем атрибут организации, ниже приведены примеры описания. Выбираем тип "Микродата" и копируем объект описания   itemscope=" itemtype="http://schema.org/Organization" (рис.3).


Рисунок 3.

Прописываем данный объект в код. Далее определяем, какие свойства будут описываться у данного объекта. На странице есть название, телефон, адрес сайта. Берем атрибуты, описывающие данные свойства: 
 
название организации   <span itemprop="name">Google.org (GOOG)</span>
телефон <span itemprop="telephone"> +7 (495) 000-00-00</span>
ссылка на сайт  <a href="https://www.advantshop.net" itemprop="url">advantshop.net </a>

Для адреса также необходимо обозначить, что это объект описания таким образом:

itemprop="address" itemscope itemtype="https://schema.org/PostalAddress"

Далее описываем свойства данного объекта:

город <span itemprop="streetAddress">пр-т Мира д.1</span>

улица  <span itemprop="addressLocality">Москва</span>

Отдельным тегом описывается время работы организации:

<time datetime="Mo-Su 09:00-20:00" itemprop="openingHours"> Ежедневно c 09:00 до 20:00</time>

Внесем эти данные в свой код в уже имеющие классы и теги. Получаем такой результат (рис.4).


Рисунок 4.

Сохраняем результат.
 

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

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

У Яндекса проверка микроразметки доступна в Вебмастере https://webmaster.yandex.ru/tools/microtest/. Авторизуемся в сервисе и проходим по ссылке "Инструменты" далее Валидатор микроразметки. Проверять микрозметку можно по URLу страницы или фрагменту HTML-кода. Напримере, указываем адрес нашей страницы и смотрим результат (рис.5).


Рисунок 5.

Элементы схемы должны отобразиться в разметки. Если данные внесены неверно, валидатор указывает на ошибки и несоответствия (рис.6).


Рисунок 6.

Вносим исправления, и проверяем снова. Также, проверить микроразметку сайта можно на сайте shema.org, раздел "Validate" (рис.7).

Рисунок 7.

Указываем ссылку страницу и запускаем проверку (рис.8).

Рисунок 8.

Слева будет виден код, справа какая микроразметка присутствует (рис.9).

Рисунок 9.

В данном валидаторе также будут видны ошибки и несоответсвия. 

Готово.