面包屑导航

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

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

如何添加结构化数据

结构化数据是一种提供网页相关信息并对网页内容进行分类的标准化格式。如果您不熟悉结构化数据,可以详细了解结构化数据的工作原理

下面概述了如何构建、测试和发布结构化数据。如需获得向网页添加结构化数据的分步指南,请查看结构化数据 Codelab

  1. 添加必要属性。如需了解如何在网页上放置结构化数据,请观看 JSON-LD 结构化数据:网页上的插入位置
  2. 遵循指南
  3. 使用富媒体搜索结果测试验证您的代码。
  4. 部署一些包含您的结构化数据的网页,然后使用网址检查工具测试 Google 看到的网页样貌。请确保您的网页可供 Google 访问,不会因 robots.txt 文件、noindex 标记或登录要求而被屏蔽。如果网页看起来没有问题,您可以请求 Google 重新抓取您的网址
  5. 为了让 Google 随时了解日后发生的更改,我们建议您提交站点地图Search Console Sitemap API 可以帮助您自动执行此操作。

示例

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

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

单个面包屑导航路径

对于"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="http://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="http://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="http://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="http://www.example.com/books/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
    <ol>
      <li>
        <a href="http://www.example.com/literature">Literature</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

指南

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

结构化数据类型定义

如需指定面包屑导航,请定义一个包含至少两个 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 表示路径的开头。

使用 Search Console 监控富媒体搜索结果

Search Console 是一款工具,可帮助您监控网页在 Google 搜索结果中的显示效果。即使没有注册 Search Console,您的网页也可能会显示在 Google 搜索结果中,但注册 Search Console 能够帮助您了解 Google 如何查看您的网站并做出相应的改进。建议您在以下情况下查看 Search Console:

  1. 首次部署结构化数据后
  2. 发布新模板或更新代码后
  3. 定期分析流量时

首次部署结构化数据后

等 Google 将网页编入索引后,请在相关的富媒体搜索结果状态报告中查看是否存在问题。 理想情况下,您应该会看到有效网页数增加了,但错误数或警告数没有增加。如果您发现结构化数据存在问题,请执行以下操作:

  1. 修正错误
  2. 检查实际网址,核实问题是否仍然存在。
  3. 使用状态报告请求验证

发布新模板或更新代码后

对网站进行重大更改后,请监控结构化数据的错误数和警告数是否增加了。
  • 如果您发现错误增多了,可能是因为您推出的某个新模板无法正常工作,或者您的网站以一种新的错误方式与现有模板交互。
  • 如果您发现有效内容项减少了(但错误数的增加情况并不对应),可能是因为您的网页中未再嵌入结构化数据。请通过网址检查工具了解导致此问题的原因。

定期分析流量时

请使用效果报告分析您的 Google 搜索流量。数据将显示您的网页在 Google 搜索结果中显示为富媒体搜索结果的频率、用户点击该网页的频率以及网页在搜索结果中的平均排名。您还可以使用 Search Console API 自动提取这些结果。

问题排查

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