パンくずリスト(BreadcrumbList)の構造化データ

検索結果のパンくずリスト

ページに表示されるパンくずリストは、そのページがサイト階層内のどこに位置するかを示しており、ユーザーはサイトを効果的に理解し、移動できます。ユーザーは、パンくずリスト内の最後のパンくずから順番にさかのぼることで、サイトの階層内を 1 レベルずつ上に移動できます。

機能の提供状況

この機能はパソコン版に対応したもので、Google 検索を利用できるすべての地域と言語でご利用いただけます。

如何添加结构化数据

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

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

  1. 添加必要属性。根据您使用的格式,了解在网页上的什么位置插入结构化数据
  2. 遵循指南
  3. 使用富媒体搜索结果测试验证您的代码,并修复所有严重错误。此外,您还可以考虑修正该工具中可能会标记的任何非严重问题,因为这些这样有助于提升结构化数据的质量(不过,要使内容能够显示为富媒体搜索结果,并非必须这么做)。
  4. 部署一些包含您的结构化数据的网页,然后使用网址检查工具测试 Google 看到的网页样貌。请确保您的网页可供 Google 访问,不会因 robots.txt 文件、noindex 标记或登录要求而被屏蔽。如果网页看起来没有问题,您可以请求 Google 重新抓取您的网址
  5. 为了让 Google 随时了解日后发生的更改,我们建议您提交站点地图Search Console Sitemap API 可以帮助您自动执行此操作。

Google 検索では、検索結果内のウェブページからの情報を分類する際に、ページの本文内のパンくずリスト マークアップを使用します。以下の使用例に示すように、ユーザーがページにアクセスするときの検索クエリはさまざまです。異なる検索で同じウェブページが返されたとしても、そのコンテンツは Google 検索クエリのコンテキスト内でパンくずリストにより分類されています。フィクションの書籍に関する賞の受賞作を示すページでは、次のようなパンくずリストが使用される場合があります。

単一のパンくずリスト

ページにつながるパンくずリストが 1 つしかない場合は、ページで次のようにパンくずリストを指定できます。

書籍 サイエンス フィクション 受賞作

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>

microdata

microdata を使用してパンくずリストを記述した例です。


<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>

複数のパンくずリスト

ページに移動する方法がサイト内に複数ある場合は、1 つのページに複数のパンくずリストを指定できます。文学賞の受賞作のページに移動するパンくずリストの例の一つを次に示します。

書籍 サイエンス フィクション 受賞作

同じページに移動する別のパンくずリストの例を次に示します。

文学 受賞作

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>

microdata

microdata を使用して複数のパンくずリストを記述した例です。


<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 検索でパンくずリストとともに表示されるようにするには、下記のガイドラインを遵守する必要があります。

パンくずリストには URL 構造をそのまま反映させるのではなく、ユーザーが特定のページにたどり着くまでの一般的な経路を示すことをおすすめします。最上位パス(サイトのドメイン名またはホスト名)やページ自体にパンくずリストの ListItem を含める必要はありません。

構造化データタイプの定義

パンくずリストを指定するには、少なくとも 2 つの ListItems を含む BreadcrumbList を定義します。コンテンツがパンくずリストとともに表示されるようにするには、必須プロパティを含める必要があります。

BreadcrumbList は、リスト内のすべての要素を保持するコンテナ アイテムです。BreadcrumbList の定義の全文は schema.org/BreadcrumbList で確認できます。 Google がサポートするプロパティは、次のとおりです。

必須プロパティ
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 で確認できます。 Google がサポートするプロパティは、次のとおりです。

必須プロパティ
item

URL または Thing のサブタイプ

パンくずを表すウェブページの URL。item の指定方法は次の 2 つです。

  • URL: ページの URL を指定します。次に例を示します。
    "item": "https://example.com/books"
  • Thing: 使用しているマークアップ形式に基づいて、ID で URL を指定します。
    • JSON-LD: @id を使用して URL を指定します。
    • microdata: href または itemid を使用して URL を指定します。
    • RDFa: abouthref または resource を使用して URL を指定します。

パンくずがパンくずリストの最後のアイテムである場合、item は必須ではありません。最後のアイテムに item が含まれていない場合、Google はそのページの URL を使用します。

name

Text

ユーザーに表示されるパンくずのタイトル。URL ではなく name のある Thing を使用して item を指定している場合、name は必須ではありません。

position

Integer

パンくずリスト内のパンくずの位置。位置が 1 の場合、リスト内の最初のパンくずを示します。

Search Console でリッチリザルトを監視する

Search Console は、Google 検索におけるページのパフォーマンスを監視できるツールです。Search Console に登録していなくても Google 検索結果に表示されますが、登録することにより、Google がサイトをどのように認識しているかを把握して改善できるようになります。次の場合は Search Console を確認することをおすすめします。

  1. 構造化データを初めてデプロイした後
  2. 新しいテンプレートをリリースした後やコードを更新した後
  3. トラフィックを定期的に分析する場合

構造化データを初めてデプロイした後

ページがインデックスに登録されたら、関連するリッチリザルトのステータス レポートを使用して、問題がないかどうかを確認します。有効な項目が増え、無効な項目が増えていない状態が理想的です。構造化データに問題が見つかった場合の手順は次のとおりです。

  1. 無効な項目を修正します
  2. 一般公開 URL の検査を行い、問題が解決したかどうかを確認します。
  3. ステータス レポートを使用して検証をリクエストします。

新しいテンプレートをリリースした後やコードを更新した後

ウェブサイトに大幅な変更を加えた場合は、構造化データの無効な項目が増加しないかどうか監視します。
  • 無効な項目が増加した場合は、新しく公開したテンプレートが正常に機能していないか、既存のテンプレートの新しい操作方法に問題があると考えられます。
  • 有効な項目が減少している(無効な項目の増加と一致しない)場合は、ページに構造化データが埋め込まれていない可能性があります。URL 検査ツールを使用して問題の原因を特定します。

トラフィックを定期的に分析する場合

パフォーマンス レポートを使用して Google 検索のトラフィックを分析します。このデータから、検索でページがリッチリザルトとして表示される頻度、ユーザーがページをクリックする頻度、検索結果におけるページの平均掲載順位がわかります。この結果は、Search Console API を使用して自動的に取得することもできます。

问题排查

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

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