Как процитировать сообщение в блоге с использованием микроданных HTML и schema.org?

Моя цель - процитировать сообщение в блоге с помощью микроданных HTML.

Как я могу улучшить следующую разметку для цитат?

Я ищу улучшения в синтаксисе и семантике, чтобы получить результат, который хорошо работает со стандартами HTML5, хорошо проявляется в текущих браузерах и хорошо разбирается в поисковых системах.

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

Это моя работа в процессе, и я ищу совета по ее правильности:

  • Используйте <div class="citation">, чтобы обернуть все.

  • Используйте <article> с itemscope и BlogPost, чтобы обернуть информацию о сообщении, включая его вложенную информацию.

  • Используйте <header> и <h1 itemprop="headline">, чтобы обернуть ссылку на сообщение.

  • Используйте <cite>, чтобы обернуть имя сообщения.

  • Используйте <footer>, чтобы обернуть информацию об авторе и информацию о блоге.

  • Используйте <address>, чтобы обернуть ссылку и имя автора.

  • Используйте rel="author" для аннотирования ссылки на имя автора.

  • Используйте itemprop="isPartOf" для подключения сообщения к блогу.

Это моя работа в разработке HTML-источника:

<!-- Hello World authored by Alice posted on Bob blog -->
<div class="citation">
  <article itemscope itemtype="http://schema.org/BlogPosting">
    <header>
      <h1 itemprop="headline">
        <a itemprop="url" href="…">
          <cite itemprop="name">Hello World</cite>
        </a>
      </h1>
    </header>
    <footer>
      authored by
      <span itemprop="author" itemscope itemtype="http://schema.org/Person">
        <address>
          <a itemprop="url" rel="author" href="…">
            <span itemprop="name">Alice</span>
          </a>
        </address>
      </span>
      posted on
      <span itemprop="isPartOf" itemscope itemtype="http://schema.org/Blog">
        <a itemprop="url" href="…">
          <span itemprop="name">Bob blog</span>
        </a>
      </span>
    </footer>
  </article>
</div>

Связанные примечания:

  • В теге <cite> тег W3 говорится, что тег - это "уровень фразы", ​​поэтому он работает как встроенный диапазон, а не div блока. Но тег <article>, по-видимому, выигрывает от использования <h1>, <header>, <footer>. Насколько я могу судить, спецификация не дает решения для цитирования статьи, используя <cite> для обертывания <article>. Есть ли решение для этого или обходного пути? (Проделанная работа подталкивает это, используя <div class="citation">)

  • В теге <address> тег W3 говорится о содержании "Элемент адреса не должен использоваться для представления произвольных адресов, если эти адреса фактически не являются соответствующей контактной информацией". Насколько я могу судить, спецификация не дает решения для обозначения URL-адреса автора статьи и имени, в отличие от контактной информации статьи. Есть ли решение для этого или обходного пути? (Проделанная работа подталкивает это, используя <address> для URL-адреса автора и имени)

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

Ответ 1

Если вы спросите меня, какую разметку использовать для списка ссылок на сообщения в блоге (контекст OPs), не видя ваш пример, Id перейдет с чем-то вроде этого:

<body itemscope itemtype="http://schema.org/WebPage">

<ul>
  <li>
    <cite itemprop="citation" itemscope itemtype="http://schema.org/BlogPosting">
      <a href="…" itemprop="url" rel="external"><span itemprop="name headline">Hello World</span></a>, 
      authored by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><a href="…" itemprop="url" rel="external"><span itemprop="name">Alice</span></a></span>,
      posted on <span itemprop="isPartOf" itemscope itemtype="http://schema.org/CreativeWork"><a href="…" itemprop="url" rel="external"><span itemprop="name">Bob’s blog</span></a></span>.
    </cite>
  </li>
  <li>
    <cite itemprop="citation" itemscope itemtype="http://schema.org/BlogPosting">…</cite>
  </li>
</ul>

</body>

Использование элемента содержимого секционирования article, как и в вашем примере, безусловно возможно, хотя, возможно, необычно (если я понимаю ваше использование случай правильно): Поскольку article является элементом содержимого секционирования, он создает запись в контуре документа, которая может быть или не быть тем, что вы хотите для своего дела. (Вы можете проверить схему с помощью HTML5 Outliner, например.)

Еще одно указание на то, что элемент содержимого секционирования может не быть лучшим выбором: ваш article не содержит никакого фактического "основного" контента. Проще говоря, основное содержание элемента содержимого секционирования можно определить, разделив его метаданные: header, footer и address элементы. (Это явно не указано, но это следует из определений в Sections.)

Однако, не имея этого контента, это не так. И можно легко представить (и, может быть, вы все равно это сделаете), что вы цитируете фрагмент из сообщения в блоге (делаете этот случай похожим на запись результата поиска) в этом случае у вас есть:

<article>
  <header></header>
  <blockquote></blockquote> <!-- the non-metadata part of the article -->
  <footer></footer>
</article> 

Далее предположим, что вы хотите использовать article.

Заметки о вашем HTML5:

Заметки о ваших микроданных:

Взяв ваш пример, это даст:

<body itemscope itemtype="http://schema.org/WebPage">

<article itemprop="citation" itemscope itemtype="http://schema.org/BlogPosting" class="citation">
    <header>
      <h1>
          <cite itemprop="headline name"><a itemprop="url" href="…" rel="external">Hello World</a></cite>
      </h1>
    </header>
    <footer>
      authored by
      <span itemprop="author" itemscope itemtype="http://schema.org/Person">
          <a itemprop="url" href="…" rel="external"><span itemprop="name">Alice</span></a>
      </span>
      posted on
      <span itemprop="isPartOf" itemscope itemtype="http://schema.org/Blog">
        <a itemprop="url" href="…" rel="external"><span itemprop="name">Bob’s blog</span></a>
      </span>
    </footer>
</article>

</body>

(Все рассмотренные вещи, я по-прежнему предпочитаю вариант без сечения.)