輪轉介面

輪轉介面是一種清單式的複合式搜尋結果,可以讓使用者在行動裝置上以滑動方式瀏覽。這項功能又稱為代管輪轉介面,會顯示來自同一網站的多張資訊卡。如要為網站啟用輪轉介面,請新增 Carousel 結構化資料,並與下列其中一種支援的內容類型搭配使用:

將 Carousel 標記與支援的內容類型搭配使用時,輪轉介面在 Google 搜尋中可能會以下列方式呈現:

食譜、課程以及影片等代管輪轉介面在 Google 搜尋中的範例

新增結構化資料

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

以下簡單說明如何在網站中加入結構化資料:如需在網頁中新增結構化資料的逐步指南,請前往結構化資料程式碼研究室

  1. 請先決定要在哪個網頁中加入 Carousel 結構化資料。您有以下兩種選擇:
    • 摘要頁面和多個詳細資料頁面:摘要頁面對清單中的每個項目都有簡短說明,而每項說明都會指向一個獨立的、專門解說單一項目的詳細資料頁面。比方說,摘要網頁會列出好幾種最佳餅乾食譜,而每則說明會連結到各種餅乾的完整食譜。
    • 單頁式清單:含有所有清單資訊的單一網頁,包含每個項目的全文。例如,在單一網頁上列出 2020 年所有熱門電影。
  2. 新增必要屬性。根據您使用的格式,瞭解要在網頁中的什麼位置插入結構化資料
  3. 依據輪轉介面所包含的內容類型,加入必要屬性和建議屬性:
  4. 遵循指南規範
  5. 使用複合式搜尋結果測試驗證程式碼。
  6. 部署幾個包含結構化資料的網頁,並使用網址檢查工具測試 Google 轉譯網頁的情形。請確認 Google 可以存取您的網頁,且網頁並未遭到 robots.txt 檔案或 noindex 標記封鎖,也未設有登入規定。如果網頁看起來沒問題,您可以要求 Google 重新檢索您的網址
  7. 為了讓 Google 掌握日後的異動內容,建議您提交 Sitemap。您可以使用 Search Console Sitemap API 自動執行這項操作。

摘要頁面和多個詳細資料頁面

摘要頁面對清單中的每個項目都有簡短說明,而每項說明都會指向一個獨立的、專門解說單一項目的詳細資料頁面

摘要頁面

摘要頁面會定義 ItemList,其中每項 ListItem 都只有三種屬性:@type (設為「ListItem」)、position (清單中的位置) 以及 url (含有項目詳細資訊的網頁網址)。

以下為摘要頁面的範例:


<html>
  <head>
    <title>Best cookie recipes</title>
    <script type="application/ld+json">
    {
      "@context":"https://schema.org",
      "@type":"ItemList",
      "itemListElement":[
        {
          "@type":"ListItem",
          "position":1,
          "url":"http://example.com/peanut-butter-cookies.html"
        },
        {
          "@type":"ListItem",
          "position":2,
          "url":"http://example.com/triple-chocolate-chunk.html"
        },
        {
          "@type":"ListItem",
          "position":3,
          "url":"http://example.com/snickerdoodles.html"
        }
      ]
    }
    </script>
  </head>
  <body>
    <p>
      Here are the best cookie recipes of all time.
    </p>
    <h2>
      Peanut Butter Cookies
    </h2>
    <p>
      This <a href="https://example.com/peanut-butter-cookies.html">Peanut Butter Cookie recipe</a> is the tastiest one you'll find.
    </p>
    <h2>
      Triple Chocolate Chunk Cookies
    </h2>
    <p>
      This <a href="https://example.com/triple-chocolate-chunk.html">Triple Chocolate Chunk Cookies recipe</a> is the tastiest one you'll find.
    </p>
    <h2>
      Snickerdoodles
    </h2>
    <p>
      This <a href="https://example.com/snickerdoodles.html">Snickerdoodles recipe</a> is the tastiest one you'll find.
    </p>
  </body>
</html>

詳細資料頁面

詳細資料頁面會定義該 Carousel 標記所搭配的特定結構化資料類型。舉例來說,如果摘要頁面的內容關於最佳的餅乾食譜,那麼每個詳細資料頁面都會包含特定食譜的 Recipe 結構化資料。

以下為詳細資料頁面的範例:

花生醬餅乾


<html>
  <head>
    <title>Peanut Butter Cookies</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Peanut Butter Cookies",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
      ],
      "author": {
        "@type": "Person",
        "name": "Wendy Darling"
      },
      "datePublished": "2018-03-10",
      "description": "This Peanut Butter Cookie recipe is everyone's favorite",
      "prepTime": "PT10M",
      "cookTime": "PT25M",
      "totalTime": "PT35M",
      "recipeCuisine": "French",
      "recipeCategory": "Cookies",
      "keywords": "peanut butter, cookies",
      "recipeYield": "24",
      "nutrition": {
        "@type": "NutritionInformation",
        "calories": "120 calories"
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "5",
        "ratingCount": "18"
      },
      "recipeIngredient": [
        "2 cups of peanut butter",
        "1/3 cup of sugar"
      ],
      "recipeInstructions": [
        {
          "@type": "HowToStep",
          "text": "Mix together the peanut butter and sugar."
        },
        {
          "@type": "HowToStep",
          "text": "Roll cookie dough into small balls and place on a cookie sheet."
        },
        {
          "@type": "HowToStep",
          "text": "Bake for 25 minutes."
        }
      ],
      "video": {
        "@type": "VideoObject",
        "name": "How to Peanut Butter Cookies",
        "description": "This is how you make peanut butter cookies.",
        "thumbnailUrl": [
          "https://example.com/photos/1x1/photo.jpg",
          "https://example.com/photos/4x3/photo.jpg",
          "https://example.com/photos/16x9/photo.jpg"
         ],
        "contentUrl": "http://www.example.com/video123.mp4",
        "embedUrl": "http://www.example.com/videoplayer?video=123",
        "uploadDate": "2018-02-05T08:00:00+08:00",
        "duration": "PT1M33S",
        "interactionStatistic": {
          "@type": "InteractionCounter",
          "interactionType": { "@type": "WatchAction" },
          "userInteractionCount": 2347
        },
        "expires": "2019-02-05T08:00:00+08:00"
       }
    }
    </script>
  </head>
  <body>
    <p>
      Here's how to make peanut butter cookies.
    </p>
    <ol>
      <li>Mix together the peanut butter and sugar.</li>
      <li>Roll cookie dough into small balls and place on a cookie sheet.</li>
      <li>Bake for 25 minutes.</li>
    </ol>
  </body>
</html>

三重巧克力餅乾


<html>
  <head>
    <title>Triple Chocolate Chunk Cookies</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Triple Chocolate Chunk Cookies",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
      ],
      "author": {
        "@type": "Person",
        "name": "Wendy Darling"
      },
      "datePublished": "2018-03-10",
      "description": "This Triple Chocolate Chunk Cookie recipe is everyone's favorite",
      "prepTime": "PT10M",
      "cookTime": "PT25M",
      "totalTime": "PT35M",
      "recipeCuisine": "French",
      "recipeCategory": "Cookies",
      "keywords": "chocolate, cookies",
      "recipeYield": "24",
      "nutrition": {
        "@type": "NutritionInformation",
        "calories": "120 calories"
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "5",
        "ratingCount": "18"
      },
      "recipeIngredient": [
        "2 cups of melted chocolate",
        "1/3 cup of sugar"
      ],
      "recipeInstructions": [
        {
          "@type": "HowToStep",
          "text": "Mix together the chocolate and sugar."
        },
        {
          "@type": "HowToStep",
          "text": "Roll cookie dough into small balls and place on a cookie sheet."
        },
        {
          "@type": "HowToStep",
          "text": "Bake for 25 minutes."
        }
      ],
      "video": {
        "@type": "VideoObject",
        "name": "How to Triple Chocolate Chunk Cookies",
        "description": "This is how you make peanut butter cookies.",
        "thumbnailUrl": [
          "https://example.com/photos/1x1/photo.jpg",
          "https://example.com/photos/4x3/photo.jpg",
          "https://example.com/photos/16x9/photo.jpg"
         ],
        "contentUrl": "http://www.example.com/video123.mp4",
        "embedUrl": "http://www.example.com/videoplayer?video=123",
        "uploadDate": "2018-02-05T08:00:00+08:00",
        "duration": "PT1M33S",
        "interactionStatistic": {
          "@type": "InteractionCounter",
          "interactionType": { "@type": "WatchAction" },
          "userInteractionCount": 2347
        },
        "expires": "2019-02-05T08:00:00+08:00"
       }
    }
    </script>
  </head>
  <body>
    <p>
      Here's how to make Triple Chocolate Chunk Cookies.
    </p>
    <ol>
      <li>Mix together the chocolate and sugar.</li>
      <li>Roll cookie dough into small balls and place on a cookie sheet.</li>
      <li>Bake for 25 minutes.</li>
    </ol>
  </body>
</html>

肉桂奶油餅乾


<html>
  <head>
    <title>Snickerdoodles</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Snickerdoodles",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
      ],
      "author": {
        "@type": "Person",
        "name": "Wendy Darling"
      },
      "datePublished": "2018-03-10",
      "description": "This Snickerdoodles recipe is everyone's favorite",
      "prepTime": "PT10M",
      "cookTime": "PT25M",
      "totalTime": "PT35M",
      "recipeCuisine": "French",
      "recipeCategory": "Cookies",
      "keywords": "cinnamon sugar, cookies",
      "recipeYield": "24",
      "nutrition": {
        "@type": "NutritionInformation",
        "calories": "120 calories"
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "5",
        "ratingCount": "18"
      },
      "recipeIngredient": [
        "2 cups of cinnamon",
        "1/3 cup of sugar"
      ],
      "recipeInstructions": [
        {
          "@type": "HowToStep",
          "text": "Mix together the cinnamon and sugar."
        },
        {
          "@type": "HowToStep",
          "text": "Roll cookie dough into small balls and place on a cookie sheet."
        },
        {
          "@type": "HowToStep",
          "text": "Bake for 25 minutes."
        }
      ],
      "video": {
        "@type": "VideoObject",
        "name": "How to Snickerdoodles",
        "description": "This is how you make snickerdoodles.",
        "thumbnailUrl": [
          "https://example.com/photos/1x1/photo.jpg",
          "https://example.com/photos/4x3/photo.jpg",
          "https://example.com/photos/16x9/photo.jpg"
         ],
        "contentUrl": "http://www.example.com/video123.mp4",
        "embedUrl": "http://www.example.com/videoplayer?video=123",
        "uploadDate": "2018-02-05T08:00:00+08:00",
        "duration": "PT1M33S",
        "interactionStatistic": {
          "@type": "InteractionCounter",
          "interactionType": { "@type": "WatchAction" },
          "userInteractionCount": 2347
        },
        "expires": "2019-02-05T08:00:00+08:00"
       }
    }
    </script>
  </head>
  <body>
    <p>
      Here's how to make snickerdoodles.
    </p>
    <ol>
      <li>Mix together the cinnamon and sugar.</li>
      <li>Roll cookie dough into small balls and place on a cookie sheet.</li>
      <li>Bake for 25 minutes.</li>
    </ol>
  </body>
</html>

單頁式清單

單頁式清單含有所有的輪轉介面資訊,包括每個項目的全文。例如,在單一網頁上列出 2020 年所有熱門電影。這個網頁不會連到其他詳細資料頁面。

以下是單頁式清單的範例:


<html>
  <head>
    <title>The Best Movies from the Oscars - 2018</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "ItemList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": "1",
          "item": {
            "@type": "Movie",
            "url": "https://example.com/2019-best-picture-noms#a-star-is-born",
            "name": "A Star Is Born",
            "image": "https://example.com/photos/6x9/photo.jpg",
            "dateCreated": "2018-10-05",
            "director": {
                "@type": "Person",
                "name": "Bradley Cooper"
              },
            "review": {
              "@type": "Review",
              "reviewRating": {
                "@type": "Rating",
                "ratingValue": "5"
              },
              "author": {
                "@type": "Person",
                "name": "John D."
              },
              "reviewBody": "Heartbreaking, inpsiring, moving. Bradley Cooper is a triple threat."
              },
              "aggregateRating": {
                "@type": "AggregateRating",
                "ratingValue": "90",
                "bestRating": "100",
                "ratingCount": "19141"
              }
            }
          },
        {
          "@type": "ListItem",
          "position": "2",
          "item": {
            "@type": "Movie",
            "name": "Bohemian Rhapsody",
            "url": "https://example.com/2019-best-picture-noms#bohemian-rhapsody",
            "image": "https://example.com/photos/6x9/photo.jpg",
            "dateCreated": "2018-11-02",
            "director": {
                "@type": "Person",
                "name": "Bryan Singer"
              },
            "review": {
              "@type": "Review",
              "reviewRating": {
                "@type": "Rating",
                "ratingValue": "3"
              },
              "author": {
                "@type": "Person",
                "name": "Vin S."
              },
              "reviewBody": "Rami Malek's performance is overrated, at best."
              },
              "aggregateRating": {
                "@type": "AggregateRating",
                "ratingValue": "61",
                "bestRating": "100",
                "ratingCount": "21985"
              }
            }
          },
        {
          "@type": "ListItem",
          "position": "3",
          "item": {
            "@type": "Movie",
            "name": "Black Panther",
            "url": "https://example.com/2019-best-picture-noms#black-panther",
            "image": "https://example.com/photos/6x9/photo.jpg",
            "dateCreated": "2018-02-16",
            "director": {
                "@type": "Person",
                "name": "Ryan Coogler"
              },
            "review": {
              "@type": "Review",
              "reviewRating": {
                "@type": "Rating",
                "ratingValue": "2"
              },
              "author": {
                "@type": "Person",
                "name": "Trevor R."
              },
              "reviewBody": "I didn't like the lighting and CGI in this movie."
              },
              "aggregateRating": {
                "@type": "AggregateRating",
                "ratingValue": "96",
                "bestRating": "100",
                "ratingCount": "88211"
              }
            }
          }
      ]
    }
    </script>
  </head>
  <body>
  </body>
</html>

指南規範

除了一般結構化資料指南之外,Carousel 結構化資料還適用下列指南規範:

  • 所有項目皆須為相同類型。舉例來說,如果清單內容與食譜有關,請只加入 Recipe 項目,不要混用不同類型。
  • 請確認 Carousel 結構化資料完整且包含該網頁所列的所有項目。
  • 向使用者顯示的文字必須與網頁中結構化資料包含的資訊相似。
  • 以清單格式呈現的項目將按照 position 屬性指定的順序顯示。

驗證及部署結構化資料

  1. 使用複合式搜尋結果測試驗證程式碼。 如果是摘要網頁,您必須驗證以下項目:
    • 檢查 itemListElement 是否包含至少兩個 ListItem 元素。
    • 確認所有 ListItem 元素的類型都相同,例如全都和食譜有關。
    • 使用複合式搜尋結果測試驗證清單中提及的每個網址。清單的內容必須是支援的內容類型,且清單中的每個網頁都必須根據該類型的說明文件,提供有效的結構化資料。支援的內容類型包括:食譜課程餐廳電影
  2. 部署幾個包含結構化資料的網頁,並使用網址檢查工具測試 Google 轉譯網頁的情形。請確認 Google 可以存取您的網頁,且網頁並未遭到 robots.txt 檔案或 noindex 標記封鎖,也未設有登入規定。如果網頁看起來沒問題,您可以要求 Google 重新檢索您的網址
  3. 為了讓 Google 掌握日後的異動內容,建議您提交 Sitemap。您可以使用 Search Console Sitemap API 自動執行這項操作。

結構化資料類型定義

若要指定清單,請定義包含至少兩個 ListItemsItemList。您的內容必須包含必要屬性,才能以複合式搜尋結果形式呈現。

ItemList

ItemList 是用於存放清單中所有元素的容器項目。若用於摘要頁面,清單中的所有網址都必須指向相同網域中的不同網頁。若用於單頁式清單,所有網址都必須指向清單結構化資料代管頁面上的錨定標記。

schema.org/ItemList 內提供 ItemList 的完整定義。

必要屬性
itemListElement

ListItem

項目的清單。所有項目皆須為相同類型。如需詳細資訊,請參閱 ListItem

ListItem

ListItem 包含清單中個別項目的詳細資料。

  • 如果是摘要頁面,只要加入 ListItem 中的 typepositionurl 屬性即可。
  • 如果是單頁式清單,請加入這個資料類型的所有額外 schema.org 屬性。支援的資料類型如下:

schema.org/ListItem 內提供 ListItem 的完整定義。

摘要頁面

下列屬性適用於摘要頁面:

必要屬性
position

Integer

項目在輪轉介面中的位置。為以 1 做基礎的數字。

url

URL

項目完整詳細資料頁面的標準網址。所有清單中的網址皆不可重複,但須位於相同網域 (與目前頁面相同的網域或子網域/上層網域)。

單頁式清單

下列屬性適用於單頁式清單:

必要屬性
item

Thing

清單中的一項個別項目。請為這個物件填入下列值,並加上所述特定結構化資料類型的所有屬性:

  • item.name
  • item.url
  • 這個資料類型所需的任何其他屬性。詳情請參閱 schema.org 說明,以及說明文件針對您的內容類型所描述的規則: 例如:如果是食譜,您就要提供 prepTimeimage 屬性。
item.name

Text

項目的字串名稱。系統會將 item.name 顯示為輪轉介面中個別項目的標題,並會忽略 HTML 格式。

item.url

URL

完整網址和項目在頁面上的錨定標記。網址必須為目前頁面,且您必須在頁面中使用者可見的文字附近加入 HTML 錨定標記 (<a> 標記或 nameid 值)。例如https://example.org/recipes/pies#apple_pie

position

Integer

項目在輪轉介面中的位置。為以 1 做基礎的數字。

疑難排解

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