導覽標記 (BreadcrumbList) 結構化資料

搜尋結果中的導覽標記

網頁上的導覽標記記錄會指出該網頁在整個網站階層中的位置，協助使用者有效瞭解及探索網站。使用者可以從導覽標記記錄的最後一個導覽標記開始，依網站階層往上瀏覽，一次瀏覽一個階層。

功能適用情況

這項功能適用於電腦，以及可使用 Google 搜尋的所有語言和地區。

如何新增結構化資料

結構化資料是一種標準化格式，能夠提供網頁相關資訊並分類網頁內容。如果您是第一次使用結構化資料，請參閱這篇文章，進一步瞭解結構化資料的運作方式。

以下簡要說明如何建立、測試及發布結構化資料。

  1. 新增必要屬性。根據您使用的格式，瞭解要在網頁中的什麼位置插入結構化資料。
  2. 遵循指南規範。
  3. 使用複合式搜尋結果測試驗證程式碼，並修正所有重大錯誤。此外，我們也建議您修正工具中可能標記的任何非重大問題，因為這有助於改善結構化資料的品質 (但並非符合複合式搜尋結果的顯示條件)。
  4. 部署幾個包含結構化資料的網頁，並使用網址檢查工具測試 Google 轉譯網頁的情形。請確認 Google 可以存取您的網頁，且網頁並未遭到 robots.txt 檔案或 noindex 標記封鎖，也未設有登入規定。如果網頁看起來沒問題，您可以要求 Google 重新檢索您的網址。
  5. 為了讓 Google 掌握日後的異動內容，建議您提交 Sitemap。您可以使用 Search Console Sitemap API 自動執行這項操作。

範例

Google 搜尋會使用網頁內文的導覽標記，在搜尋結果中將網頁資訊分門別類。如下列應用實例所示，使用者經常會透過類型截然不同的搜尋查詢內容到達某個網頁。雖然每次搜尋都可能會傳回相同的網頁，但導覽標記會根據 Google 搜尋查詢的脈絡將內容分門別類。虛構類書籍獎項得獎者頁面可能會使用下列導覽標記記錄：

單一導覽標記記錄

如果只有一個導覽標記記錄可導向該網頁，該網頁可以指定下列導覽標記記錄：

書籍 › 科幻 › 獲獎作品

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 搜尋才會顯示您的導覽標記。

建議您，請提供代表指向該網頁一般使用者路徑的導覽標記，而非建立網址結構的鏡像。您不必為頂層路徑 (網站的網域或主機名稱) 或頁面本身加入導覽標記 ListItem。

結構化資料類型定義

如要指定導覽標記，請定義包含至少兩個 ListItems 的 BreadcrumbList。您的內容必須包含必要屬性，才能以導覽標記的形式呈現。

BreadcrumbList 是用於存放清單中所有元素的容器項目。schema.org/BreadcrumbList 內提供 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 包含清單中個別項目的詳細資料。schema.org/ListItem 內提供 ListItem 的完整定義。 Google 支援的屬性如下：

必要屬性
item

URL 或 Thing 的子類型

可代表導覽標記的網頁網址。您可以透過兩種方式指定 item：

  • URL：指定網頁的網址，例如： 
    "item": "https://example.com/books"
  • Thing：根據您使用的標記格式，利用 ID 指定網址：
    • JSON-LD：使用 @id 指定網址。
    • 微資料：使用 href 或 itemid 指定網址。
    • RDFa：使用 about、href 或 resource 指定網址。

如果導覽標記是導覽標記記錄中的最後一個項目，則不必指定 item。如果沒有針對最後一個項目指定 item，Google 會使用包含相應內容的網頁所對應的網址。

name

Text

向使用者顯示的導覽標記標題。如果您使用包含 name 的 Thing (而非 URL) 來指定 item，則不必指定 name。
position

Integer

導覽標記在導覽標記記錄中的位置。位置 1 表示在記錄的開頭。

Monitor rich results with Search Console

Search Console is a tool that helps you monitor how your pages perform in Google Search. You don't have to sign up for Search Console to be included in Google Search results, but it can help you understand and improve how Google sees your site. We recommend checking Search Console in the following cases:

  1. After deploying structured data for the first time
  2. After releasing new templates or updating your code
  3. Analyzing traffic periodically

After deploying structured data for the first time

After Google has indexed your pages, look for issues using the relevant Rich result status report. Ideally, there will be an increase of valid items, and no increase in invalid items. If you find issues in your structured data:

  1. Fix the invalid items.
  2. Inspect a live URL to check if the issue persists.
  3. Request validation using the status report.

After releasing new templates or updating your code

When you make significant changes to your website, monitor for increases in structured data invalid items.
  • If you see an increase in invalid items, perhaps you rolled out a new template that doesn't work, or your site interacts with the existing template in a new and bad way.
  • If you see a decrease in valid items (not matched by an increase in invalid items), perhaps you are no longer embedding structured data in your pages. Use the URL Inspection tool to learn what is causing the issue.

Analyzing traffic periodically

Analyze your Google Search traffic using the Performance Report. The data will show you how often your page appears as a rich result in Search, how often users click on it and what is the average position you appear on search results. You can also automatically pull these results with the Search Console API.

疑難排解

如果無法順利導入結構化資料，或是偵錯時遇到困難，請參考下列資源。

  • 如果您使用內容管理系統 (CMS) 或者有他人代您處理網站事務，請向對方尋求協助。請務必將所有與問題相關的 Search Console 訊息都轉寄給對方，這些訊息會針對問題提供詳細說明。
  • Google 不保證採用結構化資料的功能一定會顯示在搜尋結果中。如要瞭解為何 Google 無法將您的內容顯示為複合式搜尋結果，請參閱結構化資料通用指南裡的常見原因清單。
  • 結構化資料可能含有錯誤。請查看結構化資料錯誤清單和無法剖析的結構化資料報告。
  • 如果您的網頁遭到結構化資料人工判決處罰，系統會忽略網頁上的結構化資料，但該網頁仍然會出現在 Google 搜尋結果中。請使用人工判決處罰報告來修正結構化資料問題。
  • 再次查看指南規範，確認您的內容是否符合規定。問題可能是因為垃圾內容或不當使用的標記所引起。不過，因為問題可能與語法無關，所以複合式搜尋結果測試無法找出問題所在。
  • 參閱「疑難排解：未出現複合式搜尋結果/複合式搜尋結果總數減少」。
  • 請等待一段時間，讓系統執行重新檢索和重新建立索引作業。在發布網頁後，Google 可能需要幾天時間才會找到網頁並進行檢索。如有關於檢索和索引建立作業的一般問題，請參閱 Google 搜尋檢索和索引常見問題。
  • 前往 Google 搜尋中心論壇發文提問。