輪轉介面

您可以使用結構化資料,讓您的複合式搜尋結果能夠以類似清單的形式 (也稱為「輪轉介面」) 呈現。輪轉介面通常只出現於行動裝置,且僅用於特定的內容類型,如下所示。如果您將輪轉介面標記用於目前不支援這個格式的內容類型,並不會造成錯誤,資訊仍然能夠正常顯示,但不會以輪轉介面的形式呈現。

在某些情況下,Google 搜尋可能會將您的複合式搜尋結果以輪轉介面的形式呈現,即使這個網頁不包含支援清單的結構化資料也一樣。例如:來自不同網站的食譜搜尋結果,可能會以輪轉介面的形式呈現在清單中。

範例

以下是來自某個網站的雞肉料理食譜清單,以輪轉介面的形式呈現:

食譜複合式搜尋結果的輪轉介面

規範

除了標準結構化資料指南之外,以下指南適用於所有清單標記:

  • 所有清單中的項目必須為相同類型,例如:ArticleRecipe
  • 向使用者顯示的文字必須與網頁中結構化資料包含的資訊相似。
  • 以清單格式呈現的項目將按照 position 屬性指定的順序顯示。
  • 清單格式目前支援以下內容類型:食譜課程文章餐廳

有兩種方式能將您的結構化資料以清單格式呈現:

  • 摘要頁面 + 多個完整詳細資料頁面
  • 單一頁面的多功能網頁清單

摘要頁面 + 多個完整詳細資料頁面

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

摘要頁面 詳細資料頁面
定義 ItemList,其中每項 ListItem 都只有三種屬性:@type (設為「ListItem」)、position (清單中的位置) 以及 url (含有項目詳細資訊的網頁網址)。 為清單類型定義適合的結構化資料元素。
best_dessert_recipes.html 的虛擬程式碼:

ItemList
  itemListElement: [
    {
      @type: ListItem
      position: 1
      url: http://example.com/coffee_cake.html
    },
    {
      @type: ListItem
      position:2
      url: http://example.com/apple_pie.html,
    },
    ... more recipes ...
  ]
coffee_cake.html 的虛擬程式碼:

@type: Recipe
name: Party Coffee Cake
author: George Smith
.... more properties ...

程式碼範例:

程式碼範例:

單一頁面的多功能網頁清單

單一頁面的多功能網頁清單代管所有的清單資訊,包含每個項目的全文。例如:列在同一頁面上的各種鬆餅食譜庫。

單一頁面
定義 ItemList,其中每個元素皆為 ListItem 且包含 item 屬性,並為 schema.org 元素類型填入結構化資料 (例如:電影課程)。網頁應包含向使用者顯示的文字以及可與 ListItem 元素匹配的錨點。

best_dessert_recipes.html 的虛擬程式碼:


ItemList
  itemListElement: [
    {
      @type: ListItem
      position: 1
      item: {
        @type: Recipe
        url: http://example.com/big_list_of_recipes#recipe_1
        name: George's Cherry Pie
        author: George Smith
        ... all other required Recipe type properties ...}
    },
    {
      @type: ListItem
      position: 2
      item: {
        @type: Recipe
        url: http://example.com/big_list_of_recipes#recipe_2
        name: Party Coffee Cake
        author: Mary Stone
        ... all other required Recipe type properties ...}
    },
    ... more recipes ...
  ]
程式碼範例:

結構化資料類型定義

若要指定一份清單,您必須定義包含至少兩個 ListItemsItemList。您的內容必須包含必要的屬性,才能以複合式搜尋結果的形式呈現。您也可以加入我們建議的屬性,以便為您的內容添加更多資訊,打造出更優質的使用者體驗。

ItemList

ItemList 為保留清單中所有元素的容器項目。若用於摘要頁面,所有清單中的網址都必須指向相同網域中的不同網頁。若用於多功能網頁清單,所有網址都必須指向保留清單結構化資料的頁面。

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

必要屬性
itemListElement

ListItem

項目的清單。所有項目皆須為相同類型。詳情請參閱 ListItem

ListItem

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

  • 如果是摘要頁面ListItem 只應包含 typepositionurl 屬性。
  • 如果是多功能網頁清單ListItem 應包含這個資料類型的所有額外 schema.org 屬性 (例如:RecipeCourse 物件)。

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

簡易摘要清單 (JSON-LD) 中的示例:

{
  "@type":"ListItem",
  "position":1,
  "url":"http://example.com/desserts/apple-pie"
}

多功能清單 (JSON-LD) 中的示例:

{
  "@type": "ListItem",
  "position": 1,
  "item": {
    "@type": "Recipe",
    "url": "http://example.com/desserts/pies/#apple-pie",
    "name": "Apple Pie",
    "image": "https://example.com/300px-Apple_pie.jpg",
    "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": "6",
      "reviewCount": "32"
    },
    "recipeYield": "8 servings",
    "recipeIngredient": [
      "Pastry crust for bottom and top",
      "1/2 cup unsalted butter",
      "3 tablespoons all-purpose flour",
      "1/4 cup water",
      "1/4 cup white sugar",
      "1/2 cup brown sugar",
      "10 cups peeled, chopped green apples"
    ], ... snip ...
  }
}
必要屬性
item

Thing

僅用於多功能網頁清單。所有的多功能網頁清單都需要這個屬性。 請勿將這個物件用於摘要頁面。將下列值以及所述特定結構化資料類型的所有元素填入物件:

  • item.name
  • item.url
  • 這個資料類型所需的任何其他屬性,詳情請參閱 schema.org 說明,以及這些說明文件針對您的內容類型 (例如文章書籍) 所描述的規則。例如:若為清單中的書籍,您會提供 bookFormatisbn 屬性;若為食譜,您則會提供 prepTimeimage 屬性。
item.name

Text

項目的字串名稱,顯示於產出的資料庫中。會忽略 HTML 格式。所有的多功能網頁清單都需要這個屬性。請勿將這個屬性用於摘要頁面。

item.url

URL

這個項目在頁面上的有效網址 + 網頁錨點。所有的多功能網頁清單都需要這個屬性。請勿將這個屬性用於摘要頁面。網址必須為目前頁面,且您必須在頁面中使用者可見的文字附近納入 HTML 錨點 (<a> 標記或 nameid 值) 。 例如https://example.org/recipes/pies#apple_pie

position

Integer

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

url

URL

僅用於摘要頁面。摘要頁面需要這個屬性。請勿將這個屬性納入多功能網頁清單中。項目完整詳細資料頁面的標準網址。所有清單中的網址皆不可重複,但須位於相同網域 (相同網域或以子網域/上層網域做為目前頁面)。