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

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

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

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

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

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

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

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

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

  4. Используйте <cite> для переноса имени сообщения.

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

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

  7. Используйте rel="author", чтобы аннотировать ссылку именем автора.

  8. Используйте itemprop="isPartOf", чтобы связать пост с блогом.

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

<!-- Hello World authored by Alice posted on Bob's 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's blog</span>
        </a>
      </span>
    </footer>
  </article>
</div>

Связанные заметки на данный момент:

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

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

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


person joelparkerhenderson    schedule 01.12.2014    source источник
comment
Какую разметку лучше всего использовать? – определите "лучший". Кроме того, вы можете объяснить, почему этот вопрос не основан на мнении.   -  person David says reinstate Monica    schedule 01.12.2014
comment
Чтобы сделать это не основанным на мнении, вы можете спросить, что такое стандартный (как в документах по стандартам) способ или что понимают поисковые системы (что может быть подтверждено их документацией для веб-мастеров).   -  person Jeffrey Bosboom    schedule 01.12.2014
comment
Где появляется такая цитата, каков ее контекст?   -  person unor    schedule 01.12.2014
comment
@unor Контекст таков: я создаю типичную страницу readme.html для проекта с открытым исходным кодом. На странице есть раздел «См. также», который содержит список цитат, то есть список ссылок на сообщения в блоге.   -  person joelparkerhenderson    schedule 01.12.2014
comment
Здесь есть несколько ошибок кодирования. cite — это встроенный стиль, и вы оборачиваете его вокруг нескольких блоков (h1, статьи, нижнего колонтитула и заголовка). Я также хочу сказать, что address также используется неправильно, если URL-адрес не ведет на страницу с ее контактной информацией.   -  person Ryan B    schedule 01.12.2014
comment
Спасибо, Райан. Я обновил тег cite из-за вашего отзыва. Можно подробнее о вашем адресе? Я хотел бы понять больше.   -  person joelparkerhenderson    schedule 02.12.2014


Ответы (1)


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

<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. (Это явно не указано, но следует из определений в Разделы.)

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

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

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

Примечания о вашем HTML5:

  • Семантически упаковка div не нужна. Вы можете добавить класс citation напрямую в класс article.

  • Элемент header необязательно, если он содержит только элемент заголовка (этот элемент имеет смысл, когда ваш заголовок состоит не только из элемента заголовка). Однако иметь его, конечно, не грех.

  • Я бы предпочел включить элемент a в cite element (аналогично пятому примеру в спецификации).

  • Элемент span может содержать только фразовое содержание., поэтому address не допускается в качестве дочернего элемента.

  • Элемент address должен использоваться только в том случае, если он содержит контактную информацию. Таким образом, подходит ли этот элемент, зависит от того, что доступно на связанной странице: если это контактная форма, да; если это список авторских постов в блоге, нет.

  • Тип ссылки author может быть неуместным, так как он предназначен для предоставления информации об авторе элемента article. Но, строго говоря, вы являетесь автором. Если бы article состояло только из фактического контента автора сообщения в блоге, использование типа ссылки author было бы уместно; но в вашем случае вы пишете контент («автор», «размещен»).

  • Вы можете использовать тип ссылки external для все внешние ссылки.

Примечания о ваших микроданных:

  • Вы можете указать свойства Schema.org headline и name в одном и том же itemprop (разделенные пробелом).

  • Возможно, вы захотите использовать свойство Schema.org citation для article (для чего необходимо указать родительский тип < href="http://schema.org/CreativeWork" rel="nofollow noreferrer">CreativeWork или один из его дочерних типов, то есть это может быть WebPage или даже AboutPage в вашем случае).

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

<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>

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

person unor    schedule 04.12.2014