導覽標記

顯示在網頁上的導覽標記

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

如何新增結構化資料

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

以下簡要說明如何建立、測試及發布結構化資料。如需在網頁中新增結構化資料的逐步指南,請前往結構化資料程式碼研究室

  1. 新增必要屬性。如要瞭解應在網頁上的何處插入結構化資料,請觀看「JSON-LD 結構化資料:網頁上的插入位置」影片。
  2. 遵循指南
  3. 使用複合式搜尋結果測試驗證程式碼。
  4. 部署幾個包含結構化資料的網頁,並使用網址檢查工具測試 Google 轉譯網頁的情形。請確認 Google 可以存取您的網頁,且網頁並未遭到 robots.txt 檔案或 noindex 標記封鎖,也未設有登入規定。如果網頁看起來沒問題,您可以要求 Google 重新檢索您的網址
  5. 為了讓 Google 掌握異動內容,建議您提交 Sitemap。您可以使用 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 是用於存放清單中所有元素的容器項目。schema.org/BreadcrumbList 內提供 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 包含清單中個別項目的詳細資料。schema.org/ListItem 內提供 ListItem 的完整定義。

必要屬性
item

URLThing 的子類型

可代表導覽標記的網頁網址。您可以透過兩種方式指定 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 搜尋中的成效。 Google 會主動將您的網頁納入搜尋結果,您無需為此申請使用 Search Console,但是您可以藉由這項服務瞭解並改善 Google 檢索您網站的方式。建議在下列情況查看 Search Console:

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

首次部署結構化資料後

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

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

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

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

定期分析流量

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

疑難排解

如果您無法順利導入結構化資料,請參考下列資源。