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

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

顯示在網頁上的導覽標記

How to add structured data

Structured data is a standardized format for providing information about a page and classifying the page content. If you're new to structured data, you can learn more about how structured data works.

Here's an overview of how to build, test, and release structured data.

  1. Add the required properties. Based on the format you're using, learn where to insert structured data on the page.
  2. Follow the guidelines.
  3. Validate your code using the Rich Results Test and fix any critical errors. Consider also fixing any non-critical issues that may be flagged in the tool, as they can help improve the quality of your structured data (however, this isn't necessary to be eligible for rich results).
  4. Deploy a few pages that include your structured data and use the URL Inspection tool to test how Google sees the page. Be sure that your page is accessible to Google and not blocked by a robots.txt file, the noindex tag, or login requirements. If the page looks okay, you can ask Google to recrawl your URLs.
  5. To keep Google informed of future changes, we recommend that you submit a sitemap. You can automate this with the Search Console Sitemap API.

範例

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」都無法提供任何明確資訊。

結構化資料類型定義

如要指定導覽標記，請定義包含至少兩個 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 表示在記錄的開頭。

透過 Search Console 監控複合式搜尋結果

Search Console 這項工具能協助您監控網頁在 Google 搜尋中的成效。 Google 會主動將您的網頁納入搜尋結果，您無需為此申請使用 Search Console，但是您可以藉由這項服務瞭解並改善 Google 檢索您網站的方式。建議在下列情況查看 Search Console：

  1. 首次部署結構化資料後
  2. 發布新範本或更新程式碼後
  3. 定期分析流量

首次部署結構化資料後

在 Google 為網頁建立索引後，請透過相關的複合式搜尋結果狀態報告查看是否存在任何問題。理想情況下，有效項目會增加，但無效項目不會變多。如果您在結構化資料中發現問題，請依下列步驟操作：

  1. 修正無效項目。
  2. 檢查線上網址，查看問題是否仍繼續發生。
  3. 透過狀態報告要求驗證。

發布新範本或更新程式碼後

當您對網站進行大幅變更時，請留意結構化資料中無效項目是否增加。
  • 如果無效項目增加，代表您推出的新範本可能無法正常運作，或者您的網站採用新方式與現有範本互動，但效果不佳。
  • 如果有效項目減少，但錯誤並未隨之增加，代表您的網頁可能已不再內嵌結構化資料。請使用網址檢查工具找出問題的成因。

定期分析流量

透過成效報表分析您的 Google 搜尋流量。 這些資料會顯示您的網頁在 Google 搜尋中呈現為複合式搜尋結果的頻率、使用者點擊的頻率，以及您的搜尋結果平均排名。您也可以使用 Search Console API 自動提取這些結果。

疑難排解

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

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