2.1K

标记事件

有事情发生了。在某一时刻发生了什么事。如果你可以告诉搜索引擎，说在未来某一时刻将会发生点什么，这是不是很酷呢？说真的，我们的确有这种办法。

我们先来看看一个简单的预约页面。

<article>
    <h1>Google Developer Day 2009</h1>
    <img width="300" height="200"
         src="http://diveintohtml5.org/examples/gdd-2009-prague-pilgrim.jpg"
         alt="[Mark Pilgrim at podium]">
    <p>
        Google Developer Days are a chance to learn about Google
        developer products from the engineers who built them. This
        one-day conference includes seminars and ¡°office hours¡±
        on web technologies like Google Maps, OpenSocial, Android,
        AJAX APIs, Chrome, and Google Web Toolkit.
    </p>
    <p>
        <time datetime="2009-11-06T08:30+01:00">2009 November 6, 8:30</time>
            –
        <time datetime="2009-11-06T20:30+01:00">20:30</time>
    </p>
    <p>
        Congress Center<br>
        5th kv¨§tna 65<br>
        140 21 Praha 4<br>
        Czech Republic
    </p>
    <p>
        <a href="http://code.google.com/intl/cs/events/developerday/2009/home.html">
            GDD/Prague home page
        </a>
    </p>
</article>

有关这个事件的所有信息都是在一个<article>标记中的，这样我们可以很方便地添加 itemtype 和 itemscope 属性。

<article itemscope itemtype="http://data-vocabulary.org/Event">

Event 词典的 URL 是 http://data-vocabulary.org/Event。我们也可以查看一下这个词典的属性的含义：

summary	事件名字
url	事件详细页面的链接
location	事件发生的地点。可以由嵌套的 Organization 或 Address 表示
description	事件描述
startDate	事件起始日期和时间。ISO 日期格式
endDate	事件终止日期和时间。ISO 日期格式
duration	事件持续时间。ISO 格式
eventType	事件分类（例如，“会议”或者“讲座”）。这个属性可以随便填写，不是一个枚举值
geo	位置的地理坐标。通常有两个子属性：latitude 和 longitude
photo	事件相关照片或图片的链接

事件名字出现在<h1>中。根据 HTML5 microdata 数据模型，<h1>元素没有特殊处理，其属性值就是文本内容。我们所需要做的就是为<h1>添加 itemprop 属性。

<h1 itemprop="summary">Google Developer Day 2009</h1>

用我们日常语言来说就是，“这个事件的名字是 Google Developer Day 2009”。

这个事件列出了一张照片，可以标记为 photo 属性。正如你所期望的那样，照片使用的是<img>标签。就像 Person 词典的 photo 属性，Event 的 photo 也是一个 URL。既然 HTML5 microdata 数据模型规定，<img>元素的属性值是其 src 属性，那么，我们所要做的就是为<img>元素添加 itemprop 属性。

<img itemprop="photo" width="300" height="200"
     src="http://diveintohtml5.org/examples/gdd-2009-prague-pilgrim.jpg"
     alt="[Mark Pilgrim at podium]">

用我们日常语言就是，“这个事件的照片在 http://diveintohtml5.org/examples/gdd-2009-prague-pilgrim.jpg”。

下一步就是关于这个事件的更长一点的描述，不过也就是一段文本而已。

<p itemprop="description">Google Developer Days are a chance to
    learn about Google developer products from the engineers who built
    them. This one-day conference includes seminars and ¡°office
    hours¡± on web technologies like Google Maps, OpenSocial,
    Android, AJAX APIs, Chrome, and Google Web Toolkit.</p>

下一个就是新东西了。事件通常会在特定时间开始，特定时间结束。在 HTML5，日期和时间都应该放在<time>元素中。我们目前已经这么做了。现在问题是，我们如何为这些<time>标记添加 microdata 属性？回顾一下 HTML5 microdata 数据模型，我们发现<time>有特殊处理。<time>标记的 microdata 属性值是其 datetime 属性。并且，Event 词典的 startDate 和 endDate 属性都要求 ISO 风格的日期，这同<time>元素的 datetime 属性的要求是一样的。这再一次体现出，HTML 自身的核心词典的语义可以很好地符合我们自定义 microdata 词典的语义。标记 microdata 的起始和结束时间很简单：

1. 正确使用 HTML 标记（使用 <time> 元素标记日期和时间）；
2. 添加 itemprop 属性

<p>
    <time itemprop="startDate" datetime="2009-11-06T08:30+01:00">
        2009 November 6, 8:30
    </time>
    –
    <time itemprop="endDate" datetime="2009-11-06T20:30+01:00">20:30</time>
</p>

用我们的话说就是，“事件开始于2009年11月6日上午8:30，结束于2009年11月6日20:30（时区是布拉格，GMT+1）”。

下一步，声明 location 属性。Event 词典定义说，这个属性可以是 Organization 或者 Address。本例中，事件发生在一个地点，指明了特定的会议室，布拉格 Congress Center。把它标记成一个 Organization 可以允许我们指明其名字和地址。

首先，我们那个包含了地址信息的<p>标记，就是 Event 的 location 属性。这个元素有它自己的 microdata 数据，定义在 http://data-vocabulary.org/Organization 词典。

<p itemprop="location" itemscope
   itemtype="http://data-vocabulary.org/Organization">

下一步，使用<span>元素标记出 Organization 的名字，然后给这个<span>元素添加 itemprop 属性。

<span itemprop="name">Congress Center</span><br>

根据 microdata 范围规则，这个itemprop="name"是 Organization 词典定义的一个属性，而不是 Event 词典。<p>元素定义了 Organization 词典范围的开始，并且<p>没有关闭。我们定义的所有 microdata 属性的范围都是属于最近的词典。嵌套的词典就像堆栈。我们还没有出栈，因此我们还是讨论的 Organization 的属性。

事实上，我们即将在这个栈上添加第三个词典：Event 的 Organization 的 Address。

<span itemprop="address" itemscope
      itemtype="http://data-vocabulary.org/Address">

又一次，我们需要用独立的 microdata 属性标记地址的不同部分，因此我们需要添加<span>元素来添加 itemprop 属性。

<span itemprop="street-address">5th kv¨§tna 65</span><br>
<span itemprop="postal-code">140 21</span>
<span itemprop="locality">Praha 4</span><br>
<span itemprop="country-name">Czech Republic</span>

Address 没有更多的属性了，所以我们可以关闭那个开始 Address 范围的 <span> 标记，相当于出栈。

</span>

Organization 也没有更多的属性了，所以我们也关闭开始了 Organization 的那个 <p> 标记，又是一次出栈。

</p>

现在，我们回到了 Event 作用域。下一个属性是 geo，表示 Event 的物理位置。我们使用上一节中用到的 Geo 词典。我们需要<span>当做容器，给它添加 itemtype 和 itemscope 属性。在这个<span>元素中，我们需要两个<meta>元素，一个是 latitude 属性，另一个是 longitude 属性。

<span itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">
    <meta itemprop="latitude" content="50.047893" />
    <meta itemprop="longitude" content="14.4491" />
</span>

我们关闭了 Geo 的<span>标记，也就是说，我们又回到了 Event 这一层。最后一个属性是 url。我们应该对它很熟悉了。关联到 Event 的 URL 同关联到 Person 和 Organization 的 URL 是一样的。如果我们正确使用 HTML（在<a href>中标记超链接），那么将这个超链接作为 microdata 的 url 属性，只需简单地添加一个 itemprop 属性。

    <p>
        <a itemprop="url"
           href="http://code.google.com/intl/cs/events/developerday/2009/home.html">
            GDD/Prague home page
        </a>
    </p>
</article>

我们的事件页面可能有多个事件，比如在另外一个地方的演讲。不过，处理方法还是一样的，这里不再赘述。我们只是强调一点，一个页面可以有多个事件，每一个事件都可以添加自己的 microdata。

回到 Google Rich Snippets

根据 Google 的 Rich Snippets Testing Tool，我们可以看到类似下面的事件列表：

Item
    Type: http://data-vocabulary.org/Event
    summary = Google Developer Day 2009
    eventType = conference
    photo = http://diveintohtml5.org/examples/gdd-2009-prague-pilgrim.jpg
    description = Google Developer Days are a chance to learn about Google dev...
    startDate = 2009-11-06T08:30+01:00
    endDate = 2009-11-06T20:30+01:00
    location = Item(__1)
    geo = Item(__3)
    url = http://code.google.com/intl/cs/events/developerday/2009/home.html

Item
    Id: __1
    Type: http://data-vocabulary.org/Organization
    name = Congress Center
    address = Item(__2)

Item
    Id: __2
    Type: http://data-vocabulary.org/Address
    street-address = 5th května 65
    postal-code = 140 21
    locality = Praha 4
    country-name = Czech Republic

Item
    Id: __3
    Type: http://data-vocabulary.org/Geo
    latitude = 50.047893
    longitude = 14.4491

正如你看到的，所有我们添加进 microdata 的信息都列出了。属性被分成几部分显示，每个部分都有一个给定的内部 ID（Item(__1)、Item(__2) 等等）。这并不是 microdata 标准的一部分。这只是 Google 的测试工具为了方便自己添加的。

下面是 Google 可能会怎样使用它获取到的信息。（还是那样说，Google 可以选择这么做，也可以不这么做，这不是你我能够控制的。）

在页面标题和自动生成的文本之后，Google 开始使用我们添加到页面的 microdata 标记。注意日期格式：“Fri, Nov 6”。这并不是我们在 HTML 或者 microdata 中定义的字符串。我们使用的是两个 ISO 风格的字符串，2009-11-06T08:30+01:00 和 2009-11-06T20:30+01:00。Google 拿到这两个日期，发现它们是同一天的，因此决定只显示一个日期。这种显示效果显然更友好。

在看看物理地址。Google 显示的方式是地点名 + 地区 + 国家，而不是精确到街道。由于我们将地址分割成五个子属性——名字、街道、地区、区域和国家——每部分使用不同的 microdata 属性。Google 可以由此显示地址的缩略信息。其它使用 microdata 的程序则可以选择不同的显示方式。这里并没有什么对错之分。只要你提供了足够多的信息，什么都是可能的。也就是说，你只需要提供信息，剩下的交给整个世界去解释。