hcard 概念在 HTML 中是如何工作的答案

【问题标题】：How does the hcard concept work in HTMLhcard 概念在 HTML 中是如何工作的
【发布时间】：2012-10-12 13:38:48
【问题描述】：

所以最近我在读一本名为 Adaptive Webdesign 的书，我遇到了一个叫做 hcard、hcalendar 的东西，我去了它各自的 documentation page。现在的问题是我不明白这是如何工作的？它用于表示人..标记是这样的

<div class="vcard">
    <a class="url fn" href="http://tantek.com/">Tantek Çelik</a>
</div>

现在我知道这些类的含义如下：url 表示给定链接将用户带到网页，fn 表示格式化名称等等...

这些类是否指向搜索引擎，内容是 hCard 或呈现方式不同等。有人可以解释一下这是如何工作的，这样做有什么好处，从 SEO 的角度来看，这是否重要？这些类是预定义的吗？

编辑：那么这些类是保留的吗？如果我将它们用于其他元素怎么办？是否有任何 javvascript 可以调用 onclick 的按钮以在计算机/用户设备上保存 vcard？

【问题讨论】：

no1 在这里回答更详细的 1？

标签： html microformats

【解决方案1】：

此概念允许机器获取有关内容的详细信息。这很简单，您知道给定名称是什么。机器不... :)

所以你需要一种方法来告诉机器你的 html 包含什么样的数据。

例如：您可以像下面的示例一样丰富您的数据，并允许（可能是地址簿应用程序）获取有关应填写哪些字段的详细信息。

<div class="vcard">
    <a class="url fn" href="http://tantek.com/">
        <span class="family-name">Tantek</span>
        <span class="given-name">Çelik</span>
    </a>
</div>

这个 sn-p 允许地址簿应用程序。轻松找到给定名称并将其设置为正确的字段。顺序在这里并不重要。

测试您的“Rich Snippets”：http://www.google.com/webmasters/tools/richsnippets

【讨论】：

【解决方案2】：

如果您没有声明您正在使用hCard 语法（通过使用vcard 类），那么您可以随意使用您喜欢的任何类名。即使您确实开始使用 hCard 微格式，也不会隐式应用任何样式，因为微格式与显示样式无关。

使用微格式的目的是打开一个接口来公开元数据。通过以标准化的微格式提供数据，解析您网站的任何人都可以使用微格式查找相关信息。

搜索引擎尤其受益于此，因为它允许他们在结果页面上提供有关特定资源的更多信息。

【讨论】：

【解决方案3】：

vCard 是电子名片的标准。 hCard 采用这些标签并将它们用作 HTML 中数据周围的类名。每个 hCard 都在一个具有 class="vcard" 的块内开始。

其中一些类型具有子属性。例如，“tel”值包含“type”和“value”。这样，您可以指定单独的家庭和公司电话号码。 'adr' 类型有很多子属性（邮政信箱、扩展地址、街道地址、地点、地区、邮政编码、国家名称、类型、值）。

<div class="vcard">
   <div class="fn">xxxxx</div>
   <div class="adr">
      <span class="locality">yyyy</span>,
      <span class="country-name">zzzzz</span>
   </div>
</div>

类名在您的页面中不必有任何含义。但是，您始终可以利用它们来设置您的联系信息的样式。您还可以在浏览器的用户样式表中设置它们的样式，以便在网上冲浪时找到它们。 (Original source)

关于SEO方面，请查看这篇文章Tips for Local Search Engine Optimization for Your Site

【讨论】：

Ahaaa 不错的答案...至少为我清除了这一点，类名与我的页面无关

【解决方案4】：

我不确切知道 hcard 和 hcalendar，但例如，在 Google 上查找 Stack Overflow 问题，您会看到它的时间已发布出现在内容旁边，对于许多网站，它还显示作者姓名。

换句话说，Google 将使用这些微格式来增强搜索体验，方法是在从页面解析时为搜索提供元数据。

你帮助谷歌，他们帮助你。

【讨论】：

但是如果我将这些类用于其他元素，它有什么特殊的渲染效果吗？

【解决方案5】：

我建议您将 http://schema.org/ 用于微格式。 Google 官方推荐使用它，Bing 和许多其他搜索引擎也完全支持它。当您使用 schema.org 微格式时，搜索引擎爬虫会从您的标记中提取数据实体，并以相应的方式显示在搜索结果中。

所以是的，使用微格式有很多好处。通过使用它们，您可以改善搜索引擎爬虫的行为，您的内容将被正确编入索引，更重要的是，它将被正确分类，因此它会出现在自定义搜索中。

【讨论】：

但是如果我将这些类用于其他元素，它有什么特殊的渲染效果吗？
@Mr.Alien，这些类用于 DOM 挂钩（通常是 CSS 和 JS）。因此，vcard 格式依赖于任何使用vcard 类的人都打算使用vcard 微格式的假设。您可以将您的类属性设置为您想要的任何内容。如果您尚未在父元素上设置 vcard 类，则无需担心。
您不能使用 schema.org with microformats，反之亦然。您可能是指微数据。