12

我的目标是使用 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>

到目前为止的相关说明：

  • 标签 W3 参考说标签是“<cite>短语级别”，所以它就像一个内联跨度，而不是一个块 div。但是<article>标签似乎受益于使用<h1>, <header>, <footer>。据我所知，该规范没有提供使用<cite>to wrap引用文章的解决方案<article>。是否有解决方案或解决方法？（正在进行的工作通过使用来捏造这个<div class="citation">）

  • 标签 W3 参考说明内容“<address>地址元素不得用于表示任意地址，除非这些地址实际上是相关的联系信息。” 据我所知，该规范没有提供标记文章作者的 URL 和姓名的解决方案，与文章的联系信息不同。是否有解决方案或解决方法？（正在进行的工作通过使用<address>作者的 URL 和姓名来捏造这一点）

请在评论中提问。当我了解更多信息时，我会更新这篇文章。

4

1 回答 1

11

如果您问我将哪个标记用于博客文章链接列表（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">…&lt;/cite>
  </li>
</ul>

</body>

使用 sectioning content element article，就像在您的示例中一样，当然是可能的，尽管可能不寻常（如果我正确理解您的用例）：作为articlesectioning content 元素，它会在文档大纲中创建一个条目，这可能是也可能不是你想要什么。（例如，您可以使用HTML5 Outliner检查大纲。）

另一个表明分段内容元素可能不是最佳选择的迹象：您article不包含任何实际的“主要”内容。简单地说，一个分节内容元素的主要内容可以通过剥离其元数据来确定：header、、footer和address元素。（这不是明确指定的，但它遵循Sections中的定义。）

但是，没有这个内容并没有错。并且可以很容易地想象（并且也许您无论如何都打算这样做）您将引用博客文章中的一个片段（使这种情况类似于搜索结果条目），在这种情况下您将拥有：

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

我将进一步假设您要使用article.

关于 HTML5 的注意事项：

  • div从语义上讲，不需要包装。您可以直接将citation类添加到article。

  • 如果该元素仅包含一个标题元素，则该header元素是可选的（当您的标题包含多个标题元素时，此元素才有意义）。但是，拥有它当然没有错。

  • 我更喜欢在a元素中包含cite元素（类似于规范中的第五个示例）。

  • 该span元素只能包含短语内容，因此address不允许作为子元素。

  • 只有在包含联系信息的情​​况下才能使用该address元素。因此，此元素是否合适取决于链接页面上可用的内容：如果是联系表格，是的；如果它是撰写的博客文章列表，则不。

  • author链接类型可能不合适，因为它被定义为提供有关article元素作者的信息。但是，严格来说，你是作者。如果article仅包含博客文章作者的实际内容，则使用author链接类型是合适的；但在您的情况下，您正在编写内容（“作者”，“发布于”）。

  • 您可能希望对所有外部链接使用external链接类型。

关于您的微数据的注意事项：

以您为例，这将给出：

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

（考虑到所有因素，我仍然更喜欢无节的变体。）

于 2014-12-04T15:04:44.060 回答