導覽標記

顯示在網頁上的導覽標記

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

如何新增結構化資料

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

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

  1. 新增必要屬性。根據您使用的格式,瞭解要在網頁中的什麼位置插入結構化資料
  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 自動提取這些結果。

疑難排解

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