使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

面包屑导航

网页上的面包屑导航路径指明了网页在网站层次结构中的位置,有助于用户有效地了解和探索网站。用户可从面包屑导航路径中的最低层级开始,一次一个层级地导航到网站层次结构中的最高层级。

某网页上显示的面包屑导航

示例

Google 搜索使用网页正文中的面包屑导航标记在搜索结果中对来自该网页的信息进行分类。如以下用例所示,用户往往可通过各种不同类型的搜索查询到达同一个网页。虽然每次搜索可能会返回相同的网页,但面包屑导航会根据 Google 搜索查询的上下文对内容进行分类。网页 ancillaryjustice.html 可能会显示以下面包屑导航路径,具体取决于搜索上下文。

单个面包屑导航路径

以“2014 年星云奖最佳小说”奖项为例。这一包含了年份和体裁的搜索查询可能会生成以下面包屑导航:

图书 科幻小说 获奖作品

JSON-LD

下面是支持该面包屑导航的 JSON-LD 示例:


<html>
  <head>
    <title>Award Winners</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Books",
        "item": "https://example.com/books"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Science Fiction",
        "item": "https://example.com/books/sciencefiction"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Award Winners"
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

RDFa

下面是支持该面包屑导航的 RDFa 示例:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books">
          <span property="name">Books</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction">
          <span property="name">Science Fiction</span></a>
        <meta property="position" content="2">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">Award Winners</span>
        <meta property="position" content="3">
      </li>
    </ol>
  </body>
</html>

微数据

下面是支持该面包屑导航的微数据示例:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books">
            <span itemprop="name">Books</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://example.com/books/sciencefiction">
          <span itemprop="name">Science Fiction</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">Award winners</span>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
  </body>
</html>

HTML

下面的示例展示了如何以融入视觉设计的方式,在网页中插入 HTML 面包屑导航块。

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol>
      <li>
        <a href="https://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="https://www.example.com/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

多个面包屑导航路径

如果用户可以通过多种方式转到您网站上的某个网页,您可以为单个网页指定多个面包屑导航路径。以下是一个能够转到获奖图书页面的面包屑导航路径:

图书 科幻小说 获奖作品

以下是转到同一网页的另一个面包屑导航路径:

文学 获奖作品

JSON-LD

下面是支持多个面包屑导航路径的 JSON-LD 示例:


<html>
  <head>
    <title>Award Winners</title>
    <script type="application/ld+json">
    [{
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Books",
        "item": "https://example.com/books"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Science Fiction",
        "item": "https://example.com/books/sciencefiction"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Award Winners"
      }]
    },
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Literature",
        "item": "https://example.com/literature"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Award Winners"
      }]
    }]
    </script>
  </head>
  <body>
  </body>
</html>

RDFa

下面是支持多个面包屑导航路径的 RDFa 示例:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books">
          <span property="name">Books</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction">
          <span property="name">Science Fiction</span></a>
        <meta property="position" content="2">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction/awardwinners">
          <span property="name">Award Winners</span></a>
        <meta property="position" content="3">
      </li>
    </ol>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/literature">
          <span property="name">Literature</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">Award Winners</span>
        <meta property="position" content="2">
      </li>
    </ol>
  </body>
</html>

微数据

下面是支持多个面包屑导航路径的微数据示例:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books">
            <span itemprop="name">Books</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://example.com/books/sciencefiction">
          <span itemprop="name">Science Fiction</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books/sciencefiction/awardwinners">
          <span itemprop="name">Award Winners</span></a>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/literature">
          <span itemprop="name">Literature</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">Award Winners</span>
        <meta itemprop="position" content="2" />
      </li>
    </ol>
  </body>
</html>

HTML

下面的示例展示了如何以融入视觉设计的方式,在网页中插入 HTML 面包屑导航块。

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol>
      <li>
        <a href="https://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="https://www.example.com/books/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
    <ol>
      <li>
        <a href="https://www.example.com/literature">Literature</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

指南

您的内容必须遵循以下指南,才能在 Google 搜索结果中显示面包屑导航。

我们建议您提供代表网页的典型用户路径的面包屑导航,而不是直接照搬网址结构。网址路径的某些部分无法帮助用户了解网页在网站上的位置。例如,在 https://example.com/pages/books/catcher_in_the_rye.html 这个网址中,网址中的 pages 路径和顶级元素 example.com 均未传达任何位置信息。

结构化数据类型定义

如需指定面包屑导航,请定义一个包含至少两个 ListItemsBreadcrumbList。您的内容必须包含必要属性,才能在搜索结果中一并显示面包屑导航。

BreadcrumbList 是用于存放列表中所有元素的容器项。如需了解 BreadcrumbList 的完整定义,请访问 schema.org/BreadcrumbList

必要属性
itemListElement

ListItem

以特定顺序列出的面包屑导航数组。使用 ListItem 指定每个面包屑导航。例如:


{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Books",
    "item": "https://example.com/books"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "Authors",
    "item": "https://example.com/books/authors"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "Ann Leckie",
    "item": "https://example.com/books/authors/annleckie"
  }]
}

ListItem

ListItem 包含列表中单个项的详细信息。如需了解 ListItem 的完整定义,请访问 schema.org/ListItem

必要属性
item

URL,或 Thing 的子类型

表示面包屑导航的网页的网址。您可以通过以下两种方式指定 item

  • URL:指定网页的网址。例如:
    
    "item": "https://example.com/books"
  • Thing:根据您正在使用的标记格式使用 ID 指定网址:
    • JSON-LD:使用 @id 指定网址。
    • 微数据:使用 hrefitemid 指定网址。
    • RDFa:使用 abouthrefresource 指定网址。

如果面包屑导航是面包屑导航路径中的最后一项,则无需指定 item。如果未针对最后一项指定 item,Google 会使用包含相应内容的网页对应的网址。

name

Text

向用户显示的面包屑导航的标题。如果您使用包含 nameThing(而非 URL)指定 item,则无需指定 name

position

Integer

面包屑导航在面包屑导航路径中的位置。位置 1 表示路径的开头。

问题排查

如果您在实施或调试结构化数据时遇到问题,请查看下面列出的一些实用资源。

  • 如果您使用了内容管理系统 (CMS) 或其他人负责管理您的网站,请向其寻求帮助。请务必向其转发列明问题细节的任何 Search Console 消息。
  • Google 不能保证使用结构化数据的功能一定会显示在搜索结果中。如需查看导致 Google 无法将您的内容显示为富媒体搜索结果的各种常见原因,请参阅结构化数据常规指南
  • 您的结构化数据可能存在错误。请参阅结构化数据错误列表
  • 如果您的网页受到结构化数据手动操作的影响,其中的结构化数据将会被忽略(但该网页仍可能会出现在 Google 搜索结果中)。如需修正结构化数据问题,请使用“人工处置措施”报告
  • 再次查看相关指南,确认您的内容是否未遵循指南。问题可能是因为出现垃圾内容或使用垃圾标记导致的。不过,问题可能不是语法问题,因此富媒体搜索结果测试无法识别这些问题。
  • 针对富媒体搜索结果缺失/富媒体搜索结果总数下降进行问题排查
  • 请等待一段时间,以便 Google 重新抓取您的网页并重新将其编入索引。请注意,网页发布后,Google 可能需要几天时间才会找到和抓取该网页。有关抓取和索引编制的常见问题,请参阅 Google 搜索抓取和索引编制常见问题解答
  • Google 搜索中心论坛中发帖提问。