我的目标是使用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'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引用表示标记为&#34;短语级别&#34;,因此它的作用类似于内联跨度,而不是块div。但<article>
标记似乎从使用<h1>
,<header>
,<footer>
中受益。我可以说,该规范没有为使用<cite>
包装<article>
引用文章提供解决方案。是否有解决方案或解决方法? (正在进行的工作通过使用<div class="citation">
)
<address>
标记W3引用表示内容&#34;地址元素不得用于表示任意地址,除非这些地址实际上是相关的联系信息。&#34;据我所知,该规范没有为标记文章作者的网址和名称提供解决方案,与文章的联系信息不同。是否有解决方案或解决方法? (正在进行的工作通过<address>
使用作者的网址和名称来捏造这一点
请在评论中提问。随着我的了解,我将更新这篇文章。
答案 0 :(得分:10)
如果您问我使用哪个标记作为博客帖子链接列表(OP’s context),但没有看到您的示例,我会选择以下内容:
<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
是一个切片内容元素,它会创建文档大纲中的条目,可能与您的案例有关,也可能不是。 (例如,你可以check the outline with the HTML5 Outliner。)
分段内容元素可能不是最佳选择的另一个迹象:您的article
不包含任何实际的&#34; main&#34;内容。简单地说,分段内容元素的主要内容可以通过剥离其元数据来确定:header
,footer
和address
元素。 (这不是明确指定的,而是来自Sections中的定义。)
但是,没有此内容不是错误。你可以轻易想象(也许你打算这样做),你会引用博客文章中的一个片段(制作这个案例similar to a search result entry),在这种情况下你会有:
<article>
<header></header>
<blockquote></blockquote> <!-- the non-metadata part of the article -->
<footer></footer>
</article>
我将进一步假设您要使用article
。
关于HTML5的说明:
从语义上讲,不需要包裹div
。您可以直接将citation
课程添加到article
。
header
element是optional if it just contains a heading element(当您的标题不仅包含标题元素时,此元素才有意义)。但是,当然没有错。
我希望在cite
element中加入a
元素(类似于规范中的第五个示例)。
span
元素只能包含phrasing content,因此不允许address
作为孩子。
address
element只有在包含联系信息时才能使用。因此,如果这个元素是合适的,取决于链接页面上可用的内容:如果它是联系表单,是;如果它是创作的博客文章列表,请
author
link type可能不合适,因为它被定义为提供有关article
元素作者的信息。但是,严格来说,你是作者。如果article
仅包含博客文章作者的实际内容,则使用author
链接类型将是合适的;但在您的情况下,您正在撰写内容(&#34;由#34;,&#34;在&#34上发布;)。
您可能希望将external
link type用于all external links。
关于你的微数据的说明:
您可以指定Schema.org属性headline
和name
in the same itemprop
(separated with space)。
您可能希望在article
上使用Schema.org的citation
property(这要求您指定父类型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>
(考虑到所有事情,我仍然更喜欢部分 - 无变体。)