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

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

顯示在網頁上的導覽標記

如何新增結構化資料

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

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

  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 表示在記錄的開頭。

透過 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 搜尋中心論壇發文提問。