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

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

Микроразметка — простой инструмент, и создаётся с помощью дополнительных атрибутов 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

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

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