Использование микроформатов в HTML

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

• Чтобы создать объект микроформата, в атрибуте class используются имена классов h-*.
• Чтобы добавить свойство объекту, для одного из его потомков используются имена классов p-*, u-*, dt-*, e-*.

Микроформаты используют вспомогательные словари для описания объектов и пары «имя — значение» для присвоения значений их свойствам. Свойства указываются в атрибутах class, которые можно добавлять к любому HTML-элементу, а значения данных повторно используют содержимое HTML-элементов и семантические атрибуты.

Microformats2 (иногда обозначаемые как mf2) — это обновление микроформатов, предоставляющее способ аннотировать структурированный синтаксис и словари HTML, отличный от предыдущих подходов с использованием RDFa и microdata. Для этих предыдущих подходов нужно изучить новые атрибуты.

Для microformats2 существуют библиотеки с открытым исходным кодом для разбора на большинстве языков.

Как работают микроформаты

Автор веб-страницы может добавить микроформаты в HTML. Например, чтобы идентифицировать себя, он может использовать h-card, например:

Пример HTML

<a class="h-card" href="https://alice.example.com">Alice Blogger</a>

Когда парсер встречает эти данные, он понимает, что эта страница содержит «карточку», описывающую человека или организацию по имени Alice Blogger с URL https://alice.example.com/. Парсер предоставляет эти данные через API, которые можно использовать в различных приложениях. Например, приложение может найти на странице h-card и использовать её как сведения профиля человека, зарегистрировавшегося в сервисе.

Как и в этом примере, для некоторых шаблонов разметки требуется только имя корневого класса микроформата. Парсеры используют его, чтобы найти несколько общих свойств, например name, url, photo.

Примеры использования микроформатов

У микроформатов множество вариантов использования. Во-первых, стандарт Webmention использует микроформаты, чтобы сообщения и комментарии можно было отправлять с одного сайта на другой. Спецификация Webmention определяет конкретные атрибуты, которые сайты могут публиковать и обрабатывать, обеспечивая удобный и совместимый способ публикации сообщений и комментариев. Микроформаты также можно использовать с Webmentions, чтобы отправлять с одного сайта на другой реакции в социальных сетях, например отметки «Нравится», репосты и закладки.

Микроформаты также упрощают синдикацию между сайтами. Агрегатор может обработать страницу с опубликованными микроформатами, чтобы найти такие сведения, как заголовок публикации, её текст и имя автора. Затем агрегатор может использовать собранные семантические данные для отображения результата на своём сайте. Например, агрегаторы новостей и тематические форумы могут принимать публикации и использовать микроформаты для извлечения нужного содержимого со страницы. Кроме того, веб-сайт может использовать микроформаты для отправки специально сформированных запросов сторонним сервисам с целью публикации контента, например в социальных сетях.

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

Микроформаты предназначены не только для машинного чтения — они также легко читаются людьми. Благодаря такому подходу людям проще понимать данные микроформатов и поддерживать их в актуальном состоянии.

Префиксы микроформатов

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

Во всех именах классов микроформатов используются префиксы. Префиксы — это синтаксис, не зависящий от словарей, которые разрабатываются отдельно.

• «h-*» для имён корневых классов, например «h-card», «h-entry», «h-feed» и многих других. Эти корневые классы верхнего уровня обычно указывают тип и соответствующий ожидаемый словарь свойств. Например:

  • h-card описывает человека или организацию
  • h-entry описывает периодический или датированный онлайн-контент, например запись в блоге
  • h-feed описывает поток или ленту публикаций
  • Множество других словарей можно найти в вики microformats2.

• «p-*» для обычных (текстовых) свойств, например «p-name», «p-summary»

  • Общий разбор обычного текста — в основном текста элемента. Для некоторых HTML-элементов сначала используются специальные атрибуты, например img/alt и abbr/title.

• «u-*» для свойств URL, например «u-url», «u-photo», «u-logo»

  • Специальный разбор: атрибуты элементов a/href, img/src, object/data и т. д. имеют приоритет над содержимым элементов.

• «dt-*» для свойств даты и времени, например «dt-start», «dt-end», «dt-bday»

  • Специальный разбор: атрибут datetime элемента time, шаблон класса значения и отдельный разбор значений даты и времени для удобства чтения.

• «e-*» для свойств дерева элементов, в которых значением является вся содержащаяся иерархия элементов, например «e-content». Префикс «e-» также можно запомнить по ассоциациям с «деревом элементов» (element tree), «встроенной разметкой» (embedded markup) или «инкапсулированной разметкой» (encapsulated markup).

Примеры микроформатов

h-card

Микроформат h-card представляет человека или организацию.

Значение каждого свойства задаётся в HTML с помощью свойства class, которое может присутствовать у любого элемента.

Пример h-card

<p class="h-card">
  <img class="u-photo" src="https://example.org/photo.png" alt="" />
  <a class="p-name u-url" href="https://example.org">Joe Bloggs</a>
  <a class="u-email" href="mailto:jbloggs@example.com">jbloggs@example.com</a>,
  <span class="p-street-address">17 Austerstræti</span>
  <span class="p-locality">Reykjavík</span>
  <span class="p-country-name">Iceland</span>
</p>

Пример вложенного h-card

<div class="h-card">
  <a class="p-name u-url" href="https://blog.lizardwrangler.com/">
    Mitchell Baker
  </a>
  (<a class="p-org h-card" href="https://mozilla.org/">Mozilla Foundation</a>)
</div>

Разобранный JSON:

{
  "items": [
    {
      "type": ["h-card"],
      "properties": {
        "name": ["Mitchell Baker"],
        "url": ["https://blog.lizardwrangler.com/"],
        "org": [
          {
            "value": "Mozilla Foundation",
            "type": ["h-card"],
            "properties": {
              "name": ["Mozilla Foundation"],
              "url": ["https://mozilla.org/"]
            }
          }
        ]
      }
    }
  ]
}

В этом примере h-card указан и для человека, и для организации, которую он представляет. Связь человека с указанной организацией задаётся с помощью свойства p-org.

Примечание: у вложенного h-card есть неявные свойства «name» и «url», как и у любого другого h-card, заданного только именем корневого класса в <a href>.

h-entry

Микроформат h-entry представляет периодический или датированный контент в интернете. h-entry часто используется для контента, предназначенного для синдикации, например записей в блогах и коротких заметок.

Пример h-entry для записи в блоге:

<article class="h-entry">
  <h1 class="p-name">Microformats are amazing</h1>
  <p>
    Published by
    <a class="p-author h-card" href="https://example.com">W. Developer</a> on
    <time class="dt-published" datetime="2013-06-13 12:00:00">
      13<sup>th</sup> June 2013
    </time>
  </p>

  <p class="p-summary">In which I extoll the virtues of using microformats.</p>

  <div class="e-content">
    <p>Blah blah blah</p>
  </div>
</article>

Свойства

Пример разобранного h-entry с ответом

<div class="h-entry">
  <p>
    <span class="p-author h-card">
      <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">
        <img
          class="u-photo"
          alt="Greg McVerry"
          src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg" />
      </a>
      <a
        class="p-name u-url"
        href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">
        Greg McVerry
      </a>
    </span>
    Replied to
    <a
      class="u-in-reply-to"
      href="https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Microformats">
      a post on <strong>developer.mozilla.org</strong>
    </a>
    :
  </p>
  <p class="p-name e-content">
    Hey thanks for making this microformats resource
  </p>
  <p>
    <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">
      Greg McVerry
    </a>
    published this
    <a
      class="u-url url"
      href="https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource">
      <time class="dt-published" datetime="2019-05-31T14:19:09+0000">
        31 May 2019
      </time>
    </a>
  </p>
</div>

{
  "items": [
    {
      "type": ["h-entry"],
      "properties": {
        "in-reply-to": [
          "https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Microformats"
        ],
        "name": ["Hey thanks for making this microformats resource"],
        "url": [
          "https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource"
        ],
        "published": ["2019-05-31T14:19:09+0000"],
        "content": [
          {
            "html": "Hey thanks for making this microformats resource",
            "value": "Hey thanks for making this microformats resource",
            "lang": "en"
          }
        ],
        "author": [
          {
            "type": ["h-card"],
            "properties": {
              "name": ["Greg McVerry"],
              "photo": [
                "https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"
              ],
              "url": [
                "https://quickthoughts.jgregorymcverry.com/profile/jgmac1106"
              ]
            },
            "lang": "en",
            "value": "Greg McVerry"
          }
        ]
      },
      "lang": "en"
    }
  ]
}

h-feed

h-feed — это поток или лента публикаций h-entry, например полных записей на главной странице или страницах архива, кратких описаний либо других списков публикаций.

Пример h-feed

<div class="h-feed">
  <h1 class="p-name">Microformats Blogs</h1>
  <article class="h-entry">
    <h2 class="p-name">Microformats are amazing</h2>
    <p>
      Published by
      <a class="p-author h-card" href="https://example.com">W. Developer</a> on
      <time class="dt-published" datetime="2013-06-13 12:00:00">
        13<sup>th</sup> June 2013
      </time>
    </p>
    <p class="p-summary">
      In which I extoll the virtues of using microformats.
    </p>
    <div class="e-content"><p>Blah blah blah</p></div>
  </article>
</div>

Свойства

Дочерние элементы

h-event

Микроформат h-event предназначен для событий в интернете. h-event часто используется как в списках событий, так и на страницах отдельных событий.

<div class="h-event">
  <h1 class="p-name">Microformats Meetup</h1>
  <p>
    From
    <time class="dt-start" datetime="2013-06-30 12:00">
      30<sup>th</sup> June 2013, 12:00
    </time>
    to <time class="dt-end" datetime="2013-06-30 18:00">18:00</time> at
    <span class="p-location">Some bar in SF</span>
  </p>
  <p class="p-summary">
    Get together and discuss all things microformats-related.
  </p>
</div>

Свойства

Пример разобранного h-event

<div class="h-event">
  <h2 class="p-name">IndieWeb Summit</h2>
  <time class="dt-start" datetime="2019-06-29T09:00:00-07:00">
    June 29, 2019 at 9:00am (-0700)
  </time>
  <br />through
  <time class="dt-end" datetime="2019-06-30T18:00:00-07:00">
    June 30, 2019 at 6:00pm (-0700)
  </time>
  <br />
  <div class="p-location h-card">
    <div>
      <span class="p-name">Mozilla</span>
    </div>
    <div>
      <span class="p-street-address">1120 NW Couch St</span>,
      <span class="p-locality">Portland</span>,
      <span class="p-region">Oregon</span>,
      <span class="p-country">US</span>
    </div>
    <data class="p-latitude" value="45.52345"></data>
    <data class="p-longitude" value="-122.682677"></data>
  </div>
  <div class="e-content">Come join us</div>
  <div>
    <span class="p-author h-card">
      <a class="u-url p-name" href="https://aaronparecki.com">Aaron Parecki</a>
    </span>
    Published this
    <a href="https://aaronparecki.com/2019/06/29/1/" class="u-url">event </a>on
    <time class="dt published" datetime="2019-05-25T18:00:00-07:00">
      May 5th, 2019
    </time>
  </div>
</div>

{
  "items": [
    {
      "type": ["h-event"],
      "properties": {
        "name": ["IndieWeb Summit"],
        "url": ["https://aaronparecki.com/2019/06/29/1/"],
        "author": [
          {
            "type": ["h-card"],
            "properties": {
              "name": ["Aaron Parecki"],
              "url": ["https://aaronparecki.com"]
            },
            "lang": "en",
            "value": "Aaron Parecki"
          }
        ],
        "start": ["2019-06-29T09:00:00-07:00"],
        "end": ["2019-06-30T18:00:00-07:00"],
        "published": ["2019-05-25T18:00:00-07:00"],
        "content": [
          {
            "html": "Come join us",
            "value": "Come join us",
            "lang": "en"
          }
        ],
        "location": [
          {
            "type": ["h-card"],
            "properties": {
              "name": ["Mozilla"],
              "p-street-address": ["1120 NW Couch St"],
              "locality": ["Portland"],
              "region": ["Oregon"],
              "country": ["US"],
              "latitude": ["45.52345"],
              "longitude": ["-122.682677"]
            },
            "lang": "en",
            "value": "Mozilla"
          }
        ]
      },
      "lang": "en"
    }
  ]
}

Примеры свойства rel в микроформатах

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

rel=author

Этот атрибут указывает, что документ по ссылке представляет автора текущей страницы.

<a rel="author" href="https://jamesg.blog">James Gallagher</a>

rel=license

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

<a rel="license" href="https://mit-license.org/">MIT License</a>

rel=nofollow

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

<a rel="nofollow" href="https://jamesg.blog">James Gallagher</a>

Совместимость с браузерами

Поддерживается всеми браузерами, которые поддерживают атрибут class и соответствующий API DOM.

См. также

• атрибут class
• Микроформат в Википедии
• Официальный сайт микроформатов
• Поддержка поисковыми системами на официальном сайте микроформатов
• Микроформаты на IndieWebCamp