像 jQuery 此类的库使开发人员创建站点的方式发生了革命性的变化，促进了大量可方便地添加至 HTML 的实用脚本的开发。微数据具有进一步推进此项革命的潜力，可以更加容易地创建可在任何站点上进行无缝工作的脚本，无论 HTML 模板有何变化。
例如，要在地图上显示计划的事件，jQuery 插件会集成 Google 地图，使在您站点上创建交互式地图变得简单。而您所要做的是以一种结构化格式（比如 JSON 或 CSV）创建一个包含位置的文件。但是，如果您还希望在页面上以 HTML 格式显示信息，拥有这种具有独立的结构化格式的数据可能是个难题。要同时去维护 HTML 和数据文件中的内容，您要么必须编写一段脚本来实现页面上 HTML 和数据文件之间转换，要么您必须重复执行工作。这种方法可能会很快导致 HTML 和数据文件不同步。
保持文件同步是使用像微数据和 RDFa 等 HTML 数据格式的一项重要优势，您可以像平常一样编写 HTML，然后在 HTML 标记中添加一些属性，使它和您的数据存储大小翻倍。因为这些 HTML 数据格式都是由 WHARWG 和 W3C 开发和批准的，人们已经构建了如何从 HTML 提取数据的构建工具，并且您可以在您的站点上轻松重用这些工具。
由于微数据只最近才开始受到人们的关注，所有只有少量已发布的插件提供了支持。有一个 jQuery UI Map 插件示例，它提供了上面所描述的地图。
您可以使用一小段的 HTML 以同时获得交互式事件地图和较出色的 SEO。
正如之前一篇文章所介绍的，微数据可与 Schema.org 词汇表中的术语结合使用，以帮助搜索引擎更好地理解您的内容。此方法使搜索引擎能够显示 Rich Snippet，后者可在搜索结果自身中显示关于页面的最重要信息。
为获得 Rich Snippet 而添加的注释可执行双重任务。除了能够更好地搜索结果，还可以将它使用在您自己的页面上实现更出色的显示。
您将使用一个 jQuery 插件完成此项任务。我在示例代码 下载 中提供了相关的文件，其中包含该插件略加修改的版本。
让我们创建一个全球的 DrupalCamp 事件清单。首先，创建一个包含两个事件的 HTML 页面，如 清单 1 中所示。
<!DOCTYPE html>
<head>
<title>Upcoming DrupalCamps</title>
</head>
<body id="doc">
<h1>Upcoming DrupalCamps</h1>
<!-- Event 1: DrupalCamp Toulouse -->
<div>
<h2><a href="http://example.com/drupalcamp_fr">DrupalCamp Toulouse 2011</a></h2>
<img src='images/drupalicon_fr.png' />
<p>Vous l’attendiez tous, le DrupalCamp Toulouse aura bien lieu,
réuni avec 2 autres événements sous la bannière
"Capitole du Libre": le DrupalCamp, une Ubuntu Party, une Akademy
(évènement KDE).</p>
<div>
ENSEEIHT, Toulouse, Haute-Garonne, FR
</div>
<div>
<time datetime="2011-11-26T09:00:00+01:00">November 26, 10:00am</time> –
<time datetime="2011-11-27T17:00:00+01:00">November 27, 6:00pm</time>
</div>
</div>
<!-- Event 2: DrupalCamp Ohio -->
<div>
<h2><a href="http://example.com/drupalcampohio">Drupalcamp Ohio 2011</a></h2>
<img src='images/drupalicon_oh.png' />
<p>The Central Ohio Drupal User Group (CODUG) is proud to announce
Ohio’s first Drupalcamp. On Saturday, December 3rd, we’ll hold an
all-day camp with keynote speaker, breakout sessions and Birds of Feather groups at The
Ohio State University’s Nationwide and Ohio Farm Bureau 4-H Center.</p>
<div>
The Ohio State University, Columbus, Ohio, US
</div>
<div>
<time datetime="2011-12-03T09:00:00-05:00">December 3, 9:00am</time> –
<time datetime="2011-12-03T17:00:00-05:00">5:00pm</time>
</div>
</div>
</body>
</html>
请注意，您使用一个特殊元素标记了日期。此元素是新时间元素，该元素是核心 HTML5 标准的一部分。它能够向页面添加准确时间，所以可由应用程序轻松地解析和应用。在此示例中，Google 使用这些时间元素从页面中选择另外 3 个事件以便在 Rich Snippet 中显示。请注意，在发布时，关于是否将时间元素更改为一种更加通用的数据元素的问题存在着争议。如果这一提议得以通过，“time” 将替换为 “data”，“datetime” 将替换为下面代码中的 “value”。
datetime 是以 YYYY-MM-DD 格式开始的。接下来，一个 “T” 将日期与时间分开，时间格式显示为 HH:MM:SS。然后提供相对于世界标准时间 (UTC) 的偏移。例如，冬天的法国，时间要比 UTC 提早一小时，所以要在 datetime 字符串末尾加上 ‘+01:00’ 的偏移量。冬天的 Ohio 要比 UTC 晚 5 小时，所以要在 datetime 字符串末尾添加 ‘-05:00’ 的偏移量。这种添加会使中部标准时间 2011 年 12 月 3 日上午 9 点得到机器可读的值 “2011-12-03T09:00:00-05:00”。
将文件保存到 Web 服务器中的 jquery-ui-map/demos 目录并将它加载到您的浏览器中。图 1 显示 清单 1 中描述的两个事件的详细信息。
具有时间元素的页面包含少量机器可理解的信息。现在看看，如果这一添加发生更改，Google 会如何显示结果。转到 Google 的 Rich Snippets Testing Tool，输入您页面的 URL（参见 图 2）。您看到的不是事件详细信息，而是预览生成错误信息，上面显示着页面没有作者标记、Rich Snippet 标记或作者信息的。
发表回复