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

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

Микроразметка — простой инструмент, и создаётся с помощью дополнительных атрибутов HTML тегов.

Существует множество видов микроразметки, наиболее распространённым из которых является Schema.org с широким выбором «словарей» для описания данных на странице. Словарь — это небольшой набор правил, по которым можно описать блоки на странице. Сеансы фильмов в кинотеатре, данные отдела продаж, цены на товары, отзывы о статье — всё это представлено в небольших словарях.

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

  • Выбор словаря. Узнать о поддержке тех или иных словарей поисковой системой можно с помощью документации. Для поисковой системы яндекс все доступные словари указаны здесь.
  • Определение блока, который необходимо разметить. Иногда это может быть целая страница на вашем сайте. Для разметки контактов зачастую просто берут одноимённую страницу.
  • Выделение основной информации. На примере разметки контактной информации это: название организации, телефон, email, адрес.
  • Проставление определённых атрибутов, в зависимости от типа информации.

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

Для примера возьмём контактные данные вымышленной компании «Прауд» и разметим её контакты используя Schema.org. Изначально блок с контактами выглядит следующим образом:

<section>
    <h1>Компания «Прауд»</h1>
    <p>Адрес: г.Мотино, улица Строителей, дом 6</p>
    <p>Телефон: 8 (8765) 333-00-00</p>
    <p>Email: [email protected]</p>
</section>

Первое, что нам надо сделать — выбрать словарь. Поисковая система Яндекс для этого предлагают несколько вариантов. Возьмём словарь Organization. Полное описание этого словаря можно найти на сайте https://schema.org/. В данном уроке не ставится цель научить вас полностью размечать данные. Здесь мы лишь покажем пример того, как это выглядит.

Для того, чтобы подсказать поисковой системе, что данные размечены определённым словарём необходимо указать два атрибута:

  • itemscope — указатель на то, что весь блок является единой сущностью, в котором все данные связаны. Указывается только у главного блока и не имеет своего значения.
  • itemtype — указывает на то, какой словарь будет использоваться. Например для описания наших данных мы решили использовать словарь Organization, тогда полный вид атрибута будет itemtype="http://schema.org/Organization".
<section itemscope itemtype="http://schema.org/Organization">
    <h1>Компания «Прауд»</h1>
    <p>Адрес: г.Мотино, улица Строителей, дом 6</p>
    <p>Телефон: 8 (8765) 333-00-00</p>
    <p>Email: [email protected]</p>
</section>

Теперь поисковая система будет знать, что внутри этого блока находятся данные о нашей организации. Приступим к разметке адреса. Schema.org позволяет отдельно указывать улицу, дом, строение и так далее, но мы обобщим всё это и используем только одно значение itemprop="address", чтобы обозначить адрес предприятия. Обратите внимание, что элементы разметки указываются с помощью атрибута itemprop.

<section itemscope itemtype="http://schema.org/Organization">
    <h1>Компания «Прауд»</h1>
    <p>Адрес: <span itemprop="address">г.Мотино, улица Строителей, дом 6</span></p>
    <p>Телефон: 8 (8765) 333-00-00</p>
    <p>Email: [email protected]</p>
</section>

По аналогии с адресом разметим все остальные данные, а именно: название, телефон, email. Для каждого из них существует своё значение атрибута itemprop. Обратите внимание, что мы размечаем только данные, оставляя за «бортом» название поля. Для этого часто нужные данные оборачивают в span и для него указывают атрибут.

<section itemscope itemtype="http://schema.org/Organization">
    <h1 itemprop="name">Компания «Прауд»</h1>
    <p>Адрес: <span itemprop="address">г.Мотино, улица Строителей, дом 6</span></p>
    <p>Телефон: <span itemprop="telephone">8 (8765) 333-00-00</span></p>
    <p>Email: <span itemprop="email">[email protected]</span></p>
</section>

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

Попробуйте вставить тестовый пример в эти инструменты и взгляните на результат. Можете попробовать «сломать» микроразметку и посмотреть на вывод ошибок.

Задание

Создайте разметку организации, в которой укажите:

  • Название организации
  • Email организации

Теги используются на своё усмотрение. Вся семантика строится на уровне микроразметки.


Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics
Если вы столкнулись с трудностями и не знаете, что делать, задайте вопрос в нашем большом и дружном cообществе
Упражнение доступно только авторизованным пользователям.

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