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

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

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

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

Все словари работают по прострой схеме и вносят изменения только в атрибуты тегов. Таких атрибутов всего три:

  • itemscope — указатель на то, что весь блок является единой сущностью, в котором все данные связаны. Указывается только у главного блока и не имеет своего значения.
  • itemtype — указывает на то, какой словарь будет использоваться. Например для описания данных об организации нужно использовать словарь Organization, тогда полный вид атрибута будет itemtype="http://schema.org/Organization".
  • itemprop — конкретные данные, которые описываются внутри тега. Например индекс, адрес, email, номер телефона и т.д.

Контакты Hexlet в микроразметке по словарю Scheme.org будут выглядеть следующим образом:

<address itemscope itemtype="http://schema.org/Organization">
    <p itemprop="name">Hexlet Ltd.</p>
    <section>
        <header>
            <h2>Контакты</h2>
        </header>
        <section itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
            <p itemprop="streetAddress">Puolikkotie 8</p>
            <p itemprop="postalCode">02230</p>
            <p itemprop="addressLocality">Espoo, Finland</p>
        </section>
        <p>Электронная почта: <span itemprop="email">[email protected]</span></p>
    </section>
</address>

Можно заметить, что itemscope и itemtype указываются вместе, обозначая начала блока с данными и сразу обозначается его тип.

Для проверки корректности микроразметки можно использовать специальный валидатор от компании Google. Код выше в валидаторе будет выглядеть следующим образом:

Если мы забудем указать в секции адреса itemscope itemtype="http://schema.org/PostalAddress", то валидатор сообщит нам, что полей

  • streetAddress
  • postalCode
  • addressLocality

не существует в словаре Organization

Задание

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

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

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


Нашли ошибку? Есть что добавить? Пулреквесты приветствуютсяhttps://github.com/hexlet-basics

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

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