分享

结合使用 Drupal、HTML5 和微数据

 看见就非常 2015-04-24

简介

2011 年 5 月,Google、Yahoo 和 Bing 三大引擎巨头联合推出了 ,现在所有人都在谈论结构化数据。Schema.org 是搜索引擎理解网页的一种新途径。如果 Web 内容作者在他们的页面上添加了一点微数据,比如一些词汇表术语,他们的搜索结果会在以上三种搜索引擎中得到更好的显示。

额外的标记并没有改变已经实现 的许多站点上显示搜索结果的方式。但 Web 内容作者仍然希望为他们的页面打上标记,并已准备好让三大搜索引擎巨头使用其内容。

对于没有试验过向 HTML 添加结构化数据的不同语法的 Web 作者,Schema.org 是一个挑战。这些语法包括:

  • 微格式
  • RDFa
  • 微数据

更具挑战性的是,Google (对众多 Web 作者最有影响力的搜索引擎)表明它将只处理微数据。作为上述三种语法中最新的一种语法,微数据尚未获得很多工具的支持。

本文将介绍如何使用 Drupal 向页面添加微数据。准备好您的内容,以便可以在应用程序(比如 Google 的 Rich Snippets)中使用它们。

下载 本文使用的源代码。

回页首

什么是微数据?

常用缩写词

  • FOAF:朋友的朋友
  • RDF:资源描述框架
  • RDFa:属性方面的 RDF

微数据是向页面添加结构化数据的一种简便方式。它定义了一些属性,比如 itemtypeitemprop,可将这些属性放在 HTML 标签上,以只是页面是关于哪方面内容的。微数据的概念由 HTML 5 规范的编辑 Ian Hickson 于 2009 年提出。但这个概念的来源要比这个时间早得多。

微数据是以 RDFa 为基础的,它是采用 HTML 形式放置 RDF 的一种方式。2004 年,Mark Birbeck 在一份 W3C 笔记中提到 RDFa。后来,这个概念被写入 XHTML 的下一版本中。RDFa 引入了几个新的 HTML 属性,比如 propertyabout,并重用了一些属性,比如 rel

RDFa 功能很强大,但由于有时颇为复杂的属性交互,作者很难知道他们的 RDFa 是否正确。RDFa 还继承了 XML 的一些功能,比如很容易混淆的命名空间前缀。

微格式是 XHTML 中另一版本的结构化数据,它由一群草根开发人员在一年多后推出。与 RDFa 相比,微格式重用了 Web 内容作者已经习惯的现有 XHTML 属性,比如链接上的 rel 属性。微格式还在这些属性中添加了一点语义。人们只注重标记可见内容,很容易滥用不可见的内容,或者让不可见内容与可见内容失去同步。

微格式存在一个问题,即没有一种解析它们的通用方式。相反,必须为每种微格式添加支持。例如,如果想同时处理日历数据和地址数据,就必须保证解析器同时支持这两种格式,或者使用两种不同的解析器。通过社区进程发布新的微格式也很困难。

微数据结合了微格式与 RDFa 的优点。微数据具有以下特点:

  • 通过减少属性数量与属性排列选项,可以降低 RDFa 的复杂性。
  • 消除命名空间前缀。
  • 维持 RDFa 的通用解析,让工具处理已发布的数据时变得更容易。
  • 保留不同用户群创建自己的属性值集合(也称为词汇表)的能力,并将它用于微数据。

回页首

将 词汇表与微数据相结合

Schema.org 是一个适用于微数据的词汇表。因为词汇表不需要经过任何组织的批准,搜索引擎所有者能够根据自身需要设计自己的词汇表。大多数词汇表处理的事情类似于 Google 在其 Rich Snippets 中侧重的重点:人物、地点、事件、娱乐和商业。

有几个很好的例子(参见参考资料)演示了如何在站点上放置 术语。例如,清单 1 显示了使用 术语增强过的一部电影的简单标记。

清单 1. 使用 术语增强过的一部电影的简单标记
<div itemscope itemtype ="http:///Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>Director: <span itemprop="director">James Cameron</span> 
(born August 16, 1954)</span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html"
itemprop="trailer">Trailer</a>
</div>

附加标记的作用可能无法立即看出来。为了获得直观印象,我们将使用这个代码段的页面发布到 Web 上。接下来,您可以在 Google 的 Rich Snippets 测试工具(参见参考资料)中输入该页面的 URL,如 图 1 中所示。如果无法方便地访问 Web 服务器,您还可以复制这个代码段,并将其粘贴到 Opera 开发人员 Philip J?genstedt 提供的现场微数据测试工具中(参见参考资料)。

图 1. 从清单 1 中示例提取的 Schema.org 微数据
从清单 1 中示例提取的 Schema.org 微数据的屏幕截图

该工具提取出两方面的信息:电影及其导演。

微数据中的两个主要概念是内容项 和这些内容项的属性。可以将属性设置为字符串或另一个内容项。例如,电影是一个内容项。它有一个名称,这个名称就是一个具有字符串值的属性。它还有一名导演,这个属性有一个内容项值,即 Person。

为了让解析器了解您要开始谈论一个内容项,请使用 itemscope 属性。您还可以使用 itemtype 属性,让解析器知道您正在谈论的内容的类型。

使用 itemtype 确定在 itemprop 属性中可以使用哪些属性。例如,在 Movie itemtype 的页面上,您会看到可在电影上使用的属性的一个列表(参见参考资料)。如果您使用属性的完整 URL,还可以使用未在此列表中列出的其他属性。例如,FOAF 词汇表还可以指定一个 name 属性。通过使用 itemprop="http:///foaf/0.1/name",您可以用 FOAF name 属性代替 name 属性。

位于 Movie 的 <div> 中的所有属性均被理解为电影的属性,直到到达 div 的结尾或 Movie 中 div 上的一个 itemscopeitemscope 属性表示您现在谈论的是另一件事情(这个例子中是一个 Person),因此 birthplace 属性被理解为 Person,而非 Movie 的一个属性。

因为您给内容添加了一点结构,任意一种工具都能轻松提取出相关信息。通过在 HTML 中添加属性,可以让页面中的数据变得易于处理,几乎就像是在 Excel 电子数据表或数据库中处理数据一样。

尽管微数据非常简单,但手动放置和维护内容仍然很困难。一些工具支持生成微数据,这些工具包括 Drupal 的 Microdata 模块(参见 参考资料)。

回页首

使用 Drupal 向页面添加微数据

Drupal 是一个内容管理系统,其 Web 占有率估计约为 2%。通过 Drupal 的用户界面,站点管理员可以创建表单,从用户那里收集内容。接着 Drupal 会在数据库中为表单数据自动创建正确的表与字段,并以一种可配置的方式来处理数据显示。

Drupal 特别适用于输出结构化数据,因为它处理内容的方式很特别,它将内容作为拥有字段值形式的属性的独立内容(称为实体)。在 Drupal 7 中,使用 RDFa 向 HTML 添加结构化数据的功能被整合到了 Drupal 核心中。

由于 是在 2011 年 6 月 2 日宣布成立的,它向微数据输出也添加了同样的支持。微数据模块仍然在开发中,尚不能用在正在运行的站点上。要在测试站点上进行试验,您可以使用微数据模块为字段生成微数据,并基于这些微数据测试 Rich Snippet 显示。

让我们从使用 Drupal 重新创建上面的示例开始。参见 参考资料,下载并启用以下模块的最新版本:

  • Microdata
  • Entity API
  • CTools

标记内容类型

内容类型 允许用户定义将为实体收集并存储的字段值。例如,您可以创建一个产品内容类型,并让它拥有收集以下信息的表单字段:价格、可用颜色、尺寸与制造商的型号,这些信息可以让维护库存变得更轻松。

在这次练习中,您将创建一个电影内容类型。打开 Structure > Content Types,单击 Add Content type 链接,然后输入以下信息。

  • 名称:Movie
  • 描述: 一个描述电影的页面
  • 评论设置:选择 Closed。该页面上不需要评论功能。
  • 微数据设置:添加 itemtype http:///Movie

    标题是一种特殊类型的字段,没有自己的编辑画面,因此还需要在这里添加标题。请使用 name 属性来标记标题。

您可以创建一个新的 Movie 内容项,用它来测试这个例子是否能正确工作。打开 Add content 来创建 Movie。创建完毕之后,使用 Rich Snippet 测试工具确定是否能够从该页面提取数据。您应该看到一个内容项,其类型为 http:///movie,而 名称为 Cool Hand Luke,如 图 2 中所示。

图 2. 映射内容类型和标题之后提取出的微数据
映射内容类型和标题之后提取出的微数据的屏幕截图

内容类型被识别为一个带有标题的 Movie,但还有关于这部电影的更多信息。

回页首

标记文本字段

内容类型上附加了一些字段,以便收集关于内容的其他信息。在这个例子中,添加了电影风格作为内容类型的字段。

要将风格添加到内容类型,请打开 Structure > Content types,然后单击该电影内容类型的 Manage fields。您将使用一个文本字段来收集电影风格。然后输入以下信息。

  • Label: Genre
  • Field name: genre
  • Field type: Text
  • Field widget: Text field

在下一个页面上单击 Save field settings。在字段实例配置表单的底部,您会看到 Genre Microdata Mapping,如图 3 中所示。将字段属性设置为 genre,然后单击 Save

图 3. 映射文本字段的界面
映射文本字段的界面的屏幕截图

编辑您的内容部分并添加电影风格。然后刷新 Rich Snippet。风格信息上立刻显示了类型和名称。

标记图像字段

这个例子没有演示图像,您可以向内容类型添加一个图像,比如电影海报。然后在 Rich Snippet 中显示图像的缩略图。

要向内容类型添加图像,请打开 Structure > Content types 并单击 Manage fields

  • Label: Poster
  • Field name: poster
  • Field type: Image
  • Field widget: Image

对海报使用 image 属性。在字段属性字段中,请输入 image,如 图 4 中所示。

图 4. 映射图像字段的界面
映射图像字段的界面的屏幕截图

保存并编辑电影,以便添加一个图像。重新测试 Rich Snippet,您应该看到 image 属性及其 URL:http:///sites/default/files/cool-hand-luke.jpg,如 图 5中所示。这个内容项还包含类型 http:///movie、名称 Cool Hand Luke 以及摘要 prison drama

图 5. 从文本与图像字段提取出的微数据
从文本与图像字段提取出的微数据的屏幕截图

您还可以看到显示海报缩略图的 Rich Snippet,如 图 6 中所示。Google 的测试工具正在积极开发之中,随着时间的推移,用于相同标记的 Rich Snippet 显示可能会发生变化。以下这个 Rich Snippet 是在 9 月 14 日捕捉到的,但它显示截止 9 月 19 日的已发生的变化。

图 6. 为电影而显示的 Rich Snippet
为电影而显示的 Rich Snippet 的屏幕截图。捕获于 9 月 14 日,却显示了截止 9 月 19 日所发生的更改

回页首

在字段格式器中启用微数据

文本与图像字段涵盖了人们通常会在站点上放置的大量数据,但仍然存在其他类型的数据。为了涵盖站点管理员可能需要的所有类型的数据,Drupal 的字段系统允许用户选择基本的字段类型,并提供了一个 API,让模块能够定义新的字段类型。在这些模块中,您可以为每种字段类型定义不同的数据收集表单(小部件)、数据存储与显示(格式器)。然后站点管理员就可以安装这些字段模块,并在不必编写任何代码的情况下配置小部件与格式器 (formatter)。

对于在 HTML 中放置微数据属性的位置,微数据有严格的要求,因此 Drupal 中的每种字段类型都需要定义在其格式器中放置属性的位置。微数据得到了核心定义的大多数字段类型的支持,但很多广泛应用的字段类型仍然不支持微数据。

要使用所贡献模块中定义的字段格式器,您可以查看追踪微数据支持的表格。即使尚未受到支持的字段格式器,这并不意味着您不能使用它。给字段格式器添加微数据支持十分简单。您甚至可以通过创建一个包含您所修改内容的补丁,将微数据支持传回给该模块。这是加入 Drupal 开发人员社区的一种好方法。

在来自 的例子中,标记了一个指向电影预告片的链接。在撰写本文之际,Drupal Link 模块定义的链接字段格式器还不支持微数据,但您可以改变这一点。

您将为 Link 模块添加微数据支持。下面的例子使用了 2011 年 9 月 20 日的 Link 模块代码,本文的 下载 文件中提供了这些代码。(Link 模块的当前版本已发生改变,可能已经包含对微数据的支持。)

注册属性

链接字段有两个不同的数据位 (bit of data),您可能想使用微数据公开它们:

  • 链接的 URL
  • 链接到该 URL 的文本

此时,您需要通过一个 Entity API 模块(即 Entity Property API)向系统通知这两个属性。

您必须向字段定义中添加一些信息,这些信息是通过 link_field_info 注册的。添加字段本身的 property_typeproperty_callbacks,如 清单 2 中所示。

清单 2. 将字段的属性信息添加到 link_field_info
/**
 * Implements hook_field_info().
 */
function link_field_info() {
return array(
    'link_field' => array(
      'label' => t('Link'),
     'description' => t('Store a title, href, and attributes in the database to
 assemble a link.'),
      // ...
      'property_type' => 'field_item_link',
      'property_callbacks' => array('link_field_property_info_callback'),
    ),
  );
}

属性类型可以让系统知道字段的数据类型。因为 field_item_link 不是可以识别的数据类型或实体,在处理它们时,数据类型默认为 struct。这个 struct 就好比是已标记属性(链接 URL 与被链接的文本)的一个容器。因为它只是一个容器而已,所以您不必为字段本身启用微数据,只需为它的属性启用微数据即可。

属性回调是为组件属性注册相同属性类型信息的一项功能。要使用微数据标记属性,需要针对每个属性将微数据设置为 TRUE,如 清单 3 中所示。这为针对这些属性添加微数据提供了图形化用户界面。

清单 3. 使用属性回调注册字段的属性
/**
 * Additional callback to adapt the property info of link fields.

 * @see entity_metadata_field_entity_property_info().
 */

function link_field_property_info_callback(&$info, $entity_type, $field, $instance,
$field_type) {
  $property = &$info[$entity_type]['bundles'][$instance['bundle']]['properties']
[$field['field_name']];


  $property['property info'] = array(
    'title' => array(
     'type' => 'text',
     'label' => t('The title of the link.'),
     'microdata' => TRUE,
   ),
   'url' => array(
     'type' => 'uri',
     'label' => t('The URL of the link.'),
      'microdata' => TRUE,
    ),
  );
 if ($instance['settings']['title'] == 'none') {
   unset($property['property info']['title']);
 }
}

用户界面从属性信息中获取标签,并使用类型来确定要显示哪种类型的表单字段。如果属性是一个内容项而非字符串,那么该界面上还会显示一个 itemtype 字段。图 7 显示了一部预告片的两个属性的示例:链接标题与链接 URL。

图 7. 链接微数据映射表单
链接微数据映射表单的屏幕截图

您现在可以在字段配置表单上指定对字段属性使用哪些词汇表术语。然而,直到添加一点代码之后,属性才会插入到 HTML 中。

给有主题输出添加微数据

为了放置微数据,您需要修改字段的 HTML 输出。例如,为了向软件应用程序添加一个链接,您可能想让链接文本(软件名称)使用 name 属性,而让链接本身使用 url 属性。清单 4 显示了如何做到这一点,它向标签添加 URL 的 itemprop,并使用文本的 itemprop 在文本内容周围插入空白。

清单 4. 添加微数据之前与之后的一个链接
<a href="http://">Drupal</a>

<a itemprop="url" href="http://"><span itemprop="name">Drupal</span></a>

如果您能够使用 Link 模块插入这些属性,操作就会变得更简单。为了将来自数据库的字段内容转换为 HTML,每个字段格式器模块都有自己的查看函数。在查看函数中,一些格式器使用主题函数来生成 HTML。theme_link_formatter_link_default() 就是这样的一个例子。通常,需要将微数据属性从 field_formatter_view 函数解析到主题函数中。

在 Link 模块中,该格式器已经使用 item 变量传递了一个要放置在 <a> 标签上的属性数组。您可以将 URL itemprop 添加到该数组中,在需要时自动输出它,如 清单 5 中所示。

清单 5. 在 hook_field_formatter_view 中添加微数据
/**
 * Implements hook_field_formatter_view().
 */
function link_field_formatter_view($entity_type, $entity, $field, $instance, 
         $langcode, $items, $display) {
  $elements = array();
  $microdata = array();

  // If the microdata module is enabled, the microdata mapping will have been
  // passed in via the entity.
  if (module_exists('microdata')) {
    $microdata = $entity->microdata[$field['field_name']];
  }

  foreach ($items as $delta => $item) {
    // Add the url attributes to $item['attributes'] because the theme function
    // will pass it through to l(), properly placing the itemprop for the url.
    if (isset($microdata['url'])) {
      $item['attributes'] += $microdata['url']['#attributes'];
    }
    // Pass the microdata array to the theme function so it can be used to place
    // the link title's attribute.
    $elements[$delta] = array(
      '#markup' => theme('link_formatter_'. $display['type'], array('element' => $item, 
      'field' => $instance, 'microdata' => $microdata)),
    );
  }
  return $elements;
}

无法自动放置文本内容的属性。您必须将它们传递到主题函数中,并修改主题函数,然后才能使用它们。

将微数据变量传递给主题函数之后,您可以在主题周围添加包含 itemprop<span> 标签。然后进行代码检查,以确定是否存在用于文本的 itemprop,如果存在,则添加微数据,如 清单 6 中所示。

清单 6. 在主题函数中添加微数据
/**
 * Theme function for 'default' text field formatter.
 */
function theme_link_formatter_link_default($vars) {
  $url = $vars['element']['url'];
  $microdata = $vars['microdata'];
  // If there is an itemprop set for the title, wrap the title in a span and
  // add the itemprop to that span.
  if (!empty($microdata['title'])) {
    $title = '<span ' . drupal_attributes($microdata['title']['#attributes']) 
                . '>' . $vars['element']['title'] . '</span>';
  }
  else {
    $title = $vars['element']['title'];
  }

  // Create the array of options to pass to l().
  $link_options = $vars['element'];
  unset($link_options['element']['title']);
  unset($link_options['element']['url']);
  
  // Display a normal link if both title and URL are available.
  if (!empty($title) && !empty($url)) {
    return l($title, $url, $link_options);
  }
  // If only a title, display the title.
  elseif (!empty($title)) {
    return check_plain($title);
  }
  // If only a url, display the full url as a link.
  elseif (!empty($url)) {
    return l($url, $url, $link_options);
  }
}

现在,您可以为格式器测试微数据输出。

回页首

将您的修改反馈给社区

Drupal 能成为功能强大的技术解决方案的原因之一是:它拥有数量庞大的社区贡献者。这些贡献者们不仅是与 Drupal 同呼吸共命运的人,还会偶尔对自己的站点进行代码修复,然后将这些修复打包为补丁,供其他人使用。

如果您在自己的项目中给字段格式器添加微数据,您可以将这些成果反馈给 Drupal 社区。只需在模块的文章队列中发表一篇文章,并建议该模块支持微数据即可。这类文章统称为功能建议。然后,您可以在文章中发布一个包含您所做修改的补丁。(一些优秀的指南还演示了如何为 Drupal 项目创建补丁。)补丁发布成功后,就会标记为 “需要审查”。

回页首

结束语

在本文中,您学习了如何使用 Drupal 向页面添加微数据,以便能够在应用程序(比如 Google 的 Rich Snippet)中使用您的内容。借助新的微数据模块,您可以为基本字段类型配置微数据输出,并向自定义字段类型添加微数据输出。现在,其他人可以基于您的数据来编写其应用程序。

回页首

下载

描述名字大小
文章源代码microdata-source2.zip820KB

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多