食譜

行動裝置的圖片搜尋範例以及複合式搜尋結果範例

使用結構化資料標記您的食譜內容,以便為您的食譜提供複合式搜尋結果以及評論者的評分、烹調和備料時間以及營養資訊等特定代管清單。根據您將結構化資料新增至頁面的方式,該頁面可採用不同功能。

  • 搜尋:新增食譜結構化資料,以便在 Google 搜尋中以更吸睛的方式呈現複合式搜尋結果。
  • 食譜教學:啟用 Google 助理,引導使用者在 Google Home 和智慧螢幕上按照食譜完成料理。
  • 輪轉介面:新增輪轉式結構化資料,以便透過複合式搜尋結果的輪轉介面顯示食譜。這類資料包括圖片、頁面標誌以及其他有趣的複合式搜尋結果功能。
  • AMP:透過 AMP 建構食譜頁面,提供即時載入的食譜。

如果您是遵照本指南來建構內容,那麼您的內容可能會自動啟用下列功能:

  • 在圖片搜尋行動版結果中加上食譜徽章
  • 在 Google 助理上執行內容動作

示例

以下舉幾個例子,說明如何在結構化資料測試工具中使用 JSON-LD 程式碼新增食譜。

食譜範例

以下是內含 recipe食譜教學結構化資料的頁面範例。這類內容可在搜尋結果中以複合式搜尋結果的形式呈現,以及透過 Google Home 和智慧螢幕的 Google 助理提供食譜教學。

以下是採用 itemList 結構化資料的食譜摘要頁面 (羅列食譜清單的頁面) 範例。這類內容可透過搜尋結果的輪轉介面顯示。

規範

您必須遵循一般結構化資料規範,才能在搜尋結果中顯示食譜。如要透過 Google Home 和智慧螢幕的 Google 助理提供食譜教學,請確保您的內容確實遵守 Actions on Google 的內容限制政策

食譜結構化資料需符合下列規範。

  • 使用食譜結構化資料來取得準備特殊菜餚的相關內容。舉例來說,「臉部磨砂膏」或「派對點子」都不是有效的菜餚名稱。
  • 如要在特定代管清單中顯示您的食譜,則必須遵照下列規範:
    • 提供 ItemList 結構化資料以匯總食譜清單。您可以單獨提供ItemList 結構化資料,也可以隨食譜結構化資料一起提供。
    • 您的網站必須具有列出集合中所有食譜的摘要頁面。比方說,當使用者在搜尋結果中點擊摘要連結時,即會以適當方式將其導向您網站上的頁面,且頁面上列出了與其搜尋相關的食譜。

結構化資料類型定義

您的內容必須包含必要的屬性,才能以複合式搜尋結果的形式呈現或當做 Google 上的其他體驗。您也可以加入建議的屬性以新增內容的其他相關資訊,進而讓使用者享有更優質的體驗。

ItemList

ItemList 的完整定義列於 schema.org/ItemList

除了食譜屬性外,請針對特定代管清單新增下列屬性。雖然 ItemList 並非必要屬性,但如果您想讓自己的食譜出現在代管輪轉介面中,則必須新增下列屬性。如要進一步瞭解特定代管清單,請參閱輪轉介面

必要屬性
itemListElement

ListItem

單一項目頁面的註解。

ListItem.position

整數

項目頁面在清單中的序數位置。例如:


"itemListElement": [
  {
    "@type": "ListItem",
    "position": 1,
  }, {
    "@type": "ListItem",
    "position": 2,
  }
]
ListItem.url

網址

項目頁面的標準網址。每個項目都應該有一個專屬網址。

Recipe

Recipe 的完整定義列於 schema.org/Recipe。請使用 schema.org Recipe 類型的下列屬性來標記食譜內容。除了必要欄位外,還要盡量標記建議欄位,以便讓搜尋作業更能發揮作用。

如要透過 Google Home 和智慧螢幕的 Google 助理提供食譜教學,請務必新增 recipeIngredientrecipeInstructions。如果您的食譜沒有這些屬性,則無法提供食譜教學,但使用者仍可在搜尋結果中找到食譜。

必要屬性
image

URLImageObject

完成菜餚的圖片。

其他圖片規範:

  • 每一頁都必須包含至少一張圖片 (無論是否已加上標記)。Google 會根據長寬比和解析度選擇最適當的圖片顯示在搜尋結果中。
  • 圖片網址必須可供檢索和建立索引
  • 圖片必須代表加上標記的內容。
  • 圖片必須採 .jpg、.png 或 .gif 格式。
  • 為獲得最佳效果,請提供多張高解析度圖片 (寬度乘以高度至少要 5 萬像素),長寬比分別為 16x9、4x3 和 1x1。

例如:

"image": [
  "https://example.com/photos/1x1/photo.jpg",
  "https://example.com/photos/4x3/photo.jpg",
  "https://example.com/photos/16x9/photo.jpg"
]
name

文字

菜餚的名稱。

建議屬性
aggregateRating

AggregateRating

項目所獲得平均評分的註解。請遵循評論摘要指南以及必要和建議的 AggregateRating 屬性清單。

如果食譜結構化資料包含單一評論,則評論者的名稱必須是有效的個人或機構組織。舉例來說,「食材減半」即不是有效的評論者名稱。

author

人物

食譜撰寫者。

cookTime

時間長度

實際烹煮菜餚花費的時間 (採用 ISO-8601 格式)。您可以使用 min 和 max 當做子元素來指定時間範圍。

一律與 prepTime 搭配使用。

datePublished

日期

食譜的發佈日期 (採用 ISO 8601 格式)。

description

文字

簡短的菜餚介紹。

keywords

文字

食譜的其他字詞,例如季節 (「夏天」)、節日 (「萬聖節」) 或其他描述 (「快速」、「簡易」、「正宗」)。

其他指南

  • 使用逗號分隔關鍵字清單中的多個項目。
  • 請勿使用應位於 recipeCategoryrecipeCuisine 中的標記。

    不建議

    "keywords": "dessert, American"

    建議

    "keywords": "winter apple pie, nutmeg crust"
nutrition.calories

能源效率等級

每份食物的卡路里數。

prepTime

時間長度

準備菜肴所需的時間長度 (採用 ISO 8601 格式)。您可以使用 min 和 max 當做子元素來指定時間範圍。

一律與 cookTime 搭配使用。

recipeCategory

文字

食譜適合當做哪一餐或適合當做主菜/開胃菜/配菜類。例如:「晚餐」、「主菜」或「甜點」、「零食」。

recipeCuisine

文字

食譜所介紹的是哪個地區的料理。例如:「法國」、「地中海」或「美國」。

recipeIngredient

文字

食譜使用的食材。此項目對於 Google 搜尋上的食譜而言為建議屬性;但如果要透過 Google Home 和智慧螢幕的 Google 助理提供食譜教學,則為必要屬性。

例如:

"recipeIngredient": [
  "1 (15 ounce) package double crust ready-to-use pie crust",
  "6 cups thinly sliced, peeled apples (6 medium)",
  "3/4 cup sugar",
  "2 tablespoons all-purpose flour",
  "3/4 teaspoon ground cinnamon",
  "1/4 teaspoon salt",
  "1/8 teaspoon ground nutmeg",
  "1 tablespoon lemon juice"
]

其他指南

  • 僅包含製作食品所需的食材文字。
  • 請勿加入非必要的資訊,例如原料的定義。
recipeInstructions

文字

菜餚烹調步驟。此項目對於 Google 搜尋上的食譜而言為建議屬性;但如果要透過 Google Home 和智慧螢幕的 Google 助理提供食譜教學,則為必要屬性。

以下提供幾種設定 recipeInstructions 值的方式。建議您使用 HowToStepHowToSection

  • HowToStep:您可以設定每個 HowToStep 的值,為每個步驟句子指定確切的文字。這種做法可以向 Google 助理提供提示,但是請注意,食譜步驟的分組方式可能會依內容而有所不同。
  • HowToSection (僅適用於分成多個區段的食譜):用於將步驟分組為多個區段。在名稱欄位中提供各區段的名稱 (例如「製作餅皮」),並將每個 HowToStep 指定為 itemListElement。設定每個 HowToStep 的文字欄位。

    比方說,披薩食譜可能有一個區段是製作外皮的步驟,一個區段是準備配料的步驟,以及一個區段是搭配組合和烘焙的步驟。如果您沒有指出要分成多個區段,Google 助理可能會以錯誤的方式將區段名稱顯示為另一個步驟 (例如「製作餅皮」步驟後面是「將麵粉和酵母粉混合」步驟)。

  • 單一或重複的文字欄位:包含一或多個步驟的文字區塊。Google 會將所有步驟視為一個區段。重複的欄位值會被串連為單一文字區塊。接著 Google 會嘗試自動將單一文字區塊分成個別的步驟。Google 會嘗試尋找並移除區段名稱、步驟編號、關鍵字以及可能以錯誤方式顯示於食譜步驟文字中的其他任何內容。為達到最佳效果,建議您按照上述說明,使用 HowToStep 明確指定個別的步驟句子。

其他指南

  • 請勿加入屬於其他位置的中繼資料。尤其是您必須使用 author 欄位來指定作者,使用 recipeCuisine 指定料理種類、使用 recipeCategory 指定類別,以及使用 keywords 指定其他關鍵字。
  • 請僅包含如何製作食譜的相關文字,不要加入「指示」、「觀看影片」、「步驟 1」等其他文字。這類詞組應該在結構化資料以外的位置指定。

    不建議

    "recipeInstructions": [{
      "@type": "HowToStep",
      "text": "Step 1. Heat oven to 425°F."
    }]

    建議

    "recipeInstructions": [{
      "@type": "HowToStep",
      "text": "Heat oven to 425°F."
    }]
recipeYield

文字

按照食譜可烹調出的份量,例如幾人份、可分成幾份等。

totalTime

Duration

前置準備時間加上實際烹調這道菜餚所需的時間 (採用 ISO 8601 格式)。您可以使用 min 和 max 當做子元素來指定時間範圍。

使用 totalTime 或使用 cookTimeprepTime 的組合。

video

VideoObject

在頁面上描述食譜的一組影片屬性。請遵循必要和建議的影片屬性清單。

範例如下:

{
  "@context": "https://schema.org/",
  "@type": "Recipe",
  "video": [
    {
      "name": "Party Coffee Cake",
      "description": "How to make Party Coffee Cake.",
      "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/videos/123_600x400.mp4",
      "embedUrl": "http://www.example.com/videoplayer?id=123",
      "uploadDate": "2018-02-05T08:00:00+08:00"
    }
  ]
}

傳送您對下列選項的寶貴意見...

這個網頁