丰富网页摘要 - 路径

新功能schema.org 可让您使用 Google、Microsoft 和 Yahoo! 均能理解的词汇在自己网页上标记更多类型的项。了解详情 (不过,Google 仍支持您现有的丰富网页摘要标记)。

注意:本文描述了一种实验性格式。根据反馈和其他可用的标记标准,该格式以后可能会进行修改或替换。

关于路径

浏览路径记录是一组链接(路径),可帮助用户了解您网站的层次结构并在其中导航,如下所示:

网页中可以包含多个浏览路径记录。例如:

如果在网页正文中标记了路径信息,Google 就可以识别此信息,并根据此信息在我们的搜索结果中理解和呈现您网页上的信息。

属性

路径可以包含多个不同的属性,您可以使用微数据RDFa 标记这些属性。Google 可识别以下路径属性:

属性 说明
title 路径的标题。
url 路径的网址。
child 层次结构中的下一个路径。child 必须是另一个路径项。

以下 HTML 代码描述了一个女性服装网站产品页的浏览路径记录。

  <a href="http://www.example.com/dresses">女装</a> › 
  <a href="http://www.example.com/dresses/real">时尚女装</a> › 
  <a href="http://www.example.com/dresses/real/green">绿色时尚女装</a>

这一组路径在网页上的显示效果如下:

女装时尚女装绿色时尚女装

下面各节介绍了如何使用微数据或 RDFa 标记此内容。

微数据

以下是用微数据标记的同一段 HTML 代码:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses" itemprop="url">
    <span itemprop="title">女装</span>
  </a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses/real" itemprop="url">
    <span itemprop="title">时尚女装</span>
  </a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
    <span itemprop="title">绿色时尚女装</span>
  </a>
</div>

下面对此示例进行了详细说明:

  • 在每个 <div> 的第一行中,<itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> 表示 <div> 中包含的 HTML 代码描述了一个路径。itemscope 表示 <div> 的内容描述的是项,而 itemtype="http://data-vocabulary.org/Breadcrumb" 表示该项是路径。
  • 示例中说明了该项的属性,例如其标题和网址。为了标记属性,请给包含其中某一属性(例如 <div><span>)的每个元素分配一个用于指明其属性的 itemprop 属性。例如,<span itemprop="url">
  • 每个路径项都应按顺序显示,第一项表示顶级网页,最后一项表示当前网页的上一级网页。

如果网页中包含多个浏览路径记录

如果网页中只包含一个浏览路径记录,Google 将按照各路径项在网页上的显示顺序排列各项。但是,如果网页中包含多个浏览路径记录,则您需要指明每个路径所属的浏览路径记录。要指明浏览路径记录,请使用 child 属性指定层次结构中的下一项,如下所示:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/books" itemprop="url">
    <span itemprop="title">图书</span>
  </a> ›
  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/books/authors" itemprop="url">
      <span itemprop="title">作者</span>
    </a> ›
    <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://www.example.com/books/authors/stephenking" itemprop="url">
        <span itemprop="title">斯蒂芬·金 (Stephen King)</span>
      </a>
    </div>
  </div>
</div>

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/books" itemprop="url">
    <span itemprop="title">图书</span>
  </a> ›
  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/fiction" itemprop="url">
      <span itemprop="title">小说</span>
    </a> ›
    <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://www.example.com/books/fiction/horror" itemprop="url">
        <span itemprop="title">恐怖</span>
      </a>
    </div>
  </div>
</div>

RDFa

以下是用 RDFa 标记的同一 HTML 内容。

<div xmlns:v="http://rdf.data-vocabulary.org/#">
   <span typeof="v:Breadcrumb">
     <a href="http://www.example.com/dresses" rel="v:url" property="v:title">
      女装
    </a> ›
   </span>
   <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/dresses/real" rel="v:url" property="v:title">
      时尚女装
    </a> ›
   </span>
   <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/dresses/real/green" rel="v:url" property="v:title">
      绿色时尚女装
    </a> ›
   </span>
</div>

下面对此示例进行了详细说明。

  • 该示例的开头为使用 xmlns 的命名空间声明。这表示指定词汇(实体及其组件列表)所在的命名空间。必须在末尾使用反斜杠 (/) 和 # 号 (xmlns:v="http://rdf.data-vocabulary.org/#")。
  • 每个路径都使用 typeof="v:Breadcrumb" 进行标识。
  • 路径名称使用 title 属性进行标识,并且带有前缀 v:,例如:<span property="v:title">rel 属性表示此链接是该路径的网址。property 属性应在 <a> 元素中指定,而不是嵌套在其中,如下所示:<a href="books.html" rel="v:url" property="v:title">Books</a>
  • 每个路径项都应按顺序显示,第一项表示顶级网页,最后一项表示当前网页的上一级网页。

如果网页中包含多个浏览路径记录

如果网页中只包含一个浏览路径记录,Google 将按照各路径项在网页上的显示顺序排列各项。但是,如果网页中包含多个浏览路径记录,则您需要指明每个路径所属的浏览路径记录。要指明浏览路径记录,请使用 child 属性指定层次结构中的下一项,如下所示:


<div xmlns:v="http://rdf.data-vocabulary.org/#">
  <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/books" rel="v:url" property="v:title">
      图书
    </a> ›
    <span rel="v:child">
      <span typeof="v:Breadcrumb">
        <a href="http://www.example.com/books/authors" rel="v:url" property="v:title">
          作者
        </a> ›
        <span rel="v:child">
          <span typeof="v:Breadcrumb">
            <a href="http://www.example.com/books/authors/stephenking" rel="v:url" property="v:title">
              斯蒂芬·金 (Stephen King)
            </a> ›
          </span>
        </span>
      </span>
    </span>
  </span>
</div>

<div xmlns:v="http://rdf.data-vocabulary.org/#">
  <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/books" rel="v:url" property="v:title">
      图书
    </a> ›
    <span rel="v:child">
      <span typeof="v:Breadcrumb">
        <a href="http://www.example.com/books/fiction" rel="v:url" property="v:title">
          小说
        </a> ›
        <span rel="v:child">
          <span typeof="v:Breadcrumb">
            <a href="http://www.example.com/books/fiction/horror" rel="v:url" property="v:title">
              恐怖
            </a> ›
          </span>
        </span>
      </span>
    </span>
  </span>
</div>