在 Google 上取得食譜

運用結構化資料,讓使用者能透過 Google 找到您的食譜內容。當您提供評論者評分、烹調和備料時間以及營養資訊等內容時,可讓 Google 更加瞭解您的食譜,並以有趣的方式呈現給使用者。食譜可顯示在 Google 搜尋結果和 Google 圖片中。

Google 搜尋和 Google 圖片中的食譜

依您標記內容的方式而定,您的食譜可能也適用下列強化功能:

食譜強化
引導式食譜:透過新增食譜結構化資料,啟用 Google 助理引導使用者在 Google Home 和智慧螢幕上按照食譜完成料理。 有些額外屬性對 Google 搜尋而言只是建議屬性,但卻是引導式食譜功能的必要屬性。請務必新增 recipeIngredientrecipeInstructions 屬性。

如要進一步瞭解在 Google 助理呈現食譜的資訊,請參閱如何透過網頁內容建立動作

在 Google 助理呈現食譜
食譜代管網頁輪轉介面:透過新增 ItemList 結構化資料,讓使用者探索您的食譜網頁。 Google 搜尋中的食譜輪轉介面

如何新增結構化資料

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

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

  1. 新增必要屬性。如要瞭解應在網頁上的何處插入結構化資料,請觀看「JSON-LD 結構化資料:網頁上的插入位置」影片。
  2. 遵循指南的規定
  3. 使用複合式搜尋結果測試驗證程式碼。
  4. 部署幾個包含結構化資料的網頁,並使用網址檢查工具測試 Google 轉譯網頁的情形。請確認 Google 可以存取您的網頁,且網頁並未遭到 robots.txt 檔案或 noindex 標記封鎖,也未設有登入規定。如果網頁看起來沒問題,您可以要求 Google 重新檢索您的網址
  5. 為了讓 Google 掌握異動內容,建議您提交 Sitemap。您可以使用 Search Console Sitemap API 自動執行這項操作。

示例

以下是以 JSON-LD 程式碼呈現的食譜範例。

引導式食譜

以下網頁範例可以顯示在 Google 搜尋,也能夠以引導式食譜的形式在 Google 助理上呈現。

<html>
  <head>
    <title>Party Coffee Cake</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Party Coffee Cake",
      "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": "Mary Stone"
      },
      "datePublished": "2018-03-10",
      "description": "This coffee cake is awesome and perfect for parties.",
      "prepTime": "PT20M",
      "cookTime": "PT30M",
      "totalTime": "PT50M",
      "keywords": "cake for a party, coffee",
      "recipeYield": "10",
      "recipeCategory": "Dessert",
      "recipeCuisine": "American",
      "nutrition": {
        "@type": "NutritionInformation",
        "calories": "270 calories"
      },
      "recipeIngredient": [
        "2 cups of flour",
        "3/4 cup white sugar",
        "2 teaspoons baking powder",
        "1/2 teaspoon salt",
        "1/2 cup butter",
        "2 eggs",
        "3/4 cup milk"
        ],
      "recipeInstructions": [
        {
          "@type": "HowToStep",
          "name": "Preheat",
          "text": "Preheat the oven to 350 degrees F. Grease and flour a 9x9 inch pan.",
          "url": "https://example.com/party-coffee-cake#step1",
          "image": "https://example.com/photos/party-coffee-cake/step1.jpg"
        },
        {
          "@type": "HowToStep",
          "name": "Mix dry ingredients",
          "text": "In a large bowl, combine flour, sugar, baking powder, and salt.",
          "url": "https://example.com/party-coffee-cake#step2",
          "image": "https://example.com/photos/party-coffee-cake/step2.jpg"
        },
        {
          "@type": "HowToStep",
          "name": "Add wet ingredients",
          "text": "Mix in the butter, eggs, and milk.",
          "url": "https://example.com/party-coffee-cake#step3",
          "image": "https://example.com/photos/party-coffee-cake/step3.jpg"
        },
        {
          "@type": "HowToStep",
          "name": "Spread into pan",
          "text": "Spread into the prepared pan.",
          "url": "https://example.com/party-coffee-cake#step4",
          "image": "https://example.com/photos/party-coffee-cake/step4.jpg"
        },
        {
          "@type": "HowToStep",
          "name": "Bake",
          "text": "Bake for 30 to 35 minutes, or until firm.",
          "url": "https://example.com/party-coffee-cake#step5",
          "image": "https://example.com/photos/party-coffee-cake/step5.jpg"
        },
        {
          "@type": "HowToStep",
          "name": "Enjoy",
          "text": "Allow to cool and enjoy.",
          "url": "https://example.com/party-coffee-cake#step6",
          "image": "https://example.com/photos/party-coffee-cake/step6.jpg"
        }
      ],
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "5",
        "ratingCount": "18"
      },
      "video": {
        "@type": "VideoObject",
        "name": "How to make a Party Coffee Cake",
        "description": "This is how you make a 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/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": "http://schema.org/WatchAction" },
          "userInteractionCount": 2347
        },
        "expires": "2019-02-05T08:00:00+08:00"
      }
    }
    </script>
  </head>
  <body>
  </body>
</html>

僅在 Google 搜尋呈現食譜

以下網頁範例可以顯示在 Google 搜尋,但無法在 Google 助理上以引導式食譜的形式呈現。

<html>
  <head>
    <title>Non-alcoholic Pina Colada</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Non-alcoholic Pina Colada",
      "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": "Mary Stone"
      },
      "datePublished": "2018-03-10",
      "description": "This non-alcoholic pina colada is everyone's favorite!",
      "recipeCuisine": "American",
      "prepTime": "PT1M",
      "cookTime": "PT2M",
      "totalTime": "PT3M",
      "keywords": "non-alcoholic",
      "recipeYield": "1 serving",
      "recipeCategory": "Drink",
      "nutrition": {
        "@type": "NutritionInformation",
        "calories": "120 calories"
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "5",
        "ratingCount": "18"
      },
      "recipeIngredient": [
        "2 cups of pineapple juice",
        "5/8 cup cream of coconut",
        "ice"
      ],
      "recipeInstructions": [
        {
          "@type": "HowToStep",
          "text": "Blend 2 cups of pineapple juice and 5/8 cup cream of coconut until smooth."
        },
        {
          "@type": "HowToStep",
          "text": "Fill a glass with ice."
        },
        {
          "@type": "HowToStep",
          "text": "Pour the pineapple juice and coconut mixture over ice."
        }
      ],
      "video": {
        "@type": "VideoObject",
        "name": "How to make a Party Coffee Cake",
        "description": "This is how you make a 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/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": "http://schema.org/WatchAction" },
          "userInteractionCount": 2347
        },
        "expires": "2019-02-05T08:00:00+08:00"
       }
    }
    </script>
  </head>
  <body>
  </body>
</html>

以下是採用 itemList 結構化資料的食譜摘要頁面 (羅列食譜清單的頁面) 範例。這類內容可在搜尋結果中以格狀形式呈現。

<html>
  <head>
    <title>Grandma's Best Pie Recipes</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "ItemList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "url": "https://example.com/apple-pie.html"
        },
        {
          "@type": "ListItem",
          "position": 2,
          "url": "https://example.com/blueberry-pie.html"
        },
        {
          "@type": "ListItem",
          "position": 3,
          "url": "https://example.com/cherry-pie.html"
        }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

指南規範

您必須遵循一般結構化資料指南,才能在搜尋結果中顯示食譜。如要在 Google 助理上以引導式食譜的形式呈現食譜,請確認您的內容符合 Google 助理的內容限制政策

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

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

結構化資料類型定義

您的內容必須包含必要屬性,才能在 Google 搜尋中以複合式搜尋結果形式呈現。您也可以加入建議的屬性,為內容新增更多相關資訊,提供更優質的使用者體驗。

Recipe

請使用 schema.org Recipe 類型的下列屬性來標記食譜內容。schema.org/Recipe 內提供 Recipe 的完整定義。

必要屬性

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

Text

菜餚的名稱。

建議屬性

aggregateRating

AggregateRating

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

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

author

PersonOrganization

撰寫食譜的人員或機構名稱。

cookTime

Duration

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

一律與 prepTime 搭配使用。

datePublished

Date

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

description

Text

簡短的菜餚介紹。

keywords

Text

有關食譜的其他字詞,例如季節 ("夏天")、節日 ("萬聖節") 或其他描述形容詞 ("快速"、"簡易"、"道地")。

其他規範

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

    不建議使用

    
    "keywords": "dessert, American"
    

    建議使用

    
    "keywords": "winter apple pie, nutmeg crust"
    

nutrition.calories

Energy

由這份食譜製作的料理中所含的卡路里數。如果已定義 nutrition.calories,則 recipeYield 須以料理的數量來定義。

prepTime

Duration

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

一律與 cookTime 搭配使用。

recipeCategory

Text

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

recipeCuisine

Text

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

recipeIngredient

Text

食譜使用的食材。

例如:


"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

HowToStepHowToSectionText

菜餚烹調步驟。

以下提供幾種設定 recipeInstructions 值的方式。為求明確,我們建議您使用 HowToStepHowToSection 也可用於在食譜有其他區段時將 HowToStep 分組。

  • HowToStep:使用 HowToStep 指定這個食譜的步驟。
  • HowToSection (僅適用於分成多個區段的食譜):用於將步驟分組為多個區段。如需範例,請參閱 HowToSection
  • 單一或重複的文字屬性:包含一或多個步驟的文字區塊。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

Text

按照食譜可烹調出的份量。指定這道食譜可製作幾人份的料理 (只能使用數字)。如果想使用其他單位 (例如幾「個」),您也可以加入其他份量。如果您為每人份的菜餚指定了任何營養資訊 (例如 nutrition.calories),就必須提供這項資訊。

範例


"recipeYield": [
  "6",
  "24 cookies"
]

totalTime

Duration

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

使用 totalTime 或使用 cookTimeprepTime 的組合。

video

VideoObject

這部影片說明菜餚烹調步驟。接在必要和建議的影片屬性清單之後。

  • Video without clips
  • Video with clips:含有與影片片段相對應的剪輯內容。食譜的其他部分 (例如步驟) 可以參考這些在 video.hasPart 中定義的剪輯內容。

video.hasPart

Clip

整部影片的一部分剪輯。

video.hasPart.endOffset

Number

剪輯結束時間 (以從影片開頭算起的秒數表示)。

video.hasPart.name

Text

剪輯名稱。舉例來說,如果是示範如何在餅盤中排列及壓平派皮的剪輯,就可以命名為「排列派皮」。

video.hasPart.startOffset

Number

剪輯開始時間 (以從影片開頭算起的秒數表示)。

video.hasPart.url

URL

剪輯開始時間的連結。剪輯開始時間必須與 video.hasPart.startOffset 中設定的值相同。例如:


"startOffset": 20,
"endOffset": 29,
"url": "https://www.example.com/example?t=20"

HowToSection

使用 HowToSection 將標記食譜教學部分的步驟順序 (或子區段) 分組。直接在 recipeInstructions 屬性定義中指定 HowToSection,或指定為另一個 HowToSectionitemListElement

HowToSection 類型用於定義單一食譜的其中一個區段,並包含一或多個步驟。請勿將 HowToSection 用來定義相同菜餚的不同食譜,HowToSection 應用來呈現單一食譜的一部分。如要提供某道菜餚的多種食譜,請使用 Recipe 物件。舉例來說,您可以將製作蘋果派的多種做法分別用多個 Recipe 物件呈現,而非使用 HowToSection 物件。

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

必要屬性

itemListElement

HowToStep

這個區段和/或子區段的詳細步驟清單。比方說,披薩食譜可能有一個區段是製作外皮的步驟,一個區段是準備配料的步驟,以及一個區段是搭配組合和烘焙的步驟。如果食譜中含有區段,但並未以 HowToSections 定義,Google 助理可能會以錯誤的方式將區段名稱顯示為另一個步驟 (例如「製作餅皮」步驟後面是「將麵粉和酵母粉混合」步驟)。

範例:


{
  "@type": "HowToSection",
  "name": "Assemble the pie",
  "itemListElement": [
    {
      "@type": "HowToStep",
      "text": "In large bowl, gently mix filling ingredients; spoon into crust-lined pie plate."
    }, {
      "@type": "HowToStep",
      "text": "Top with second crust. Cut slits or shapes in several places in top crust."
    }
  ]
}

name

Text

環節名稱。

HowToStep

使用 HowToStep 將一或多個句子分組,說明食譜的烹飪步驟。使用句子來定義 text 屬性,或使用 HowToDirectionHowToTip 為每個句子定義 itemListElement

請使用 HowToStep 類型的下列屬性來標記食譜。直接在 recipeInstructions 屬性的定義中指定 HowToStep,或在 HowToSection 中指定 itemListElement

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

必要屬性

itemListElement

HowToDirectionHowToTip

詳細子步驟清單,包括指示或提示。

如果已使用 text,這個屬性則變成選用屬性。

text

Text

這個步驟的指示全文。

如果已使用 itemListElement,這個屬性則變成選用屬性。其他指南:

  • 只能包含操作說明文字,不可包含「指引」、「觀看影片」、「步驟 1」等其他文字,因為這些詞組不應列在已加上標記的屬性中。
建議屬性

image

ImageObjectURL

步驟圖片。其他圖片規範:

  • 圖片網址必須可供檢索和建立索引
  • 圖片必須代表加上標記的內容。
  • 圖片必須採 .jpg、.png 或 .gif 格式。

name

Text

說明步驟摘要的文字或詞組,例如「排列派皮」。請勿使用非敘述性的文字 (例如「步驟 1:<文字>」) 或其他形式的步驟編號 (例如「1. <文字>」)。

url

URL

步驟的直接連結 URL (如果有的話),例如錨定連結片段。

video

VideoObjectClip

這個步驟的影片或影片剪輯。

如要使用 VideoObject,請遵循必要和建議的影片剪輯屬性清單。

HowToDirectionHowToTip

HowToDirectionHowToTip 的作用是提供指示或提示。 兩者有同樣的必要屬性和建議屬性。

schema.org/HowToDirectionschema.org/HowToTip 內分別提供 HowToDirectionHowToTip 的完整定義。

必要屬性

text

Text

指示或提示文字。

ItemList

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

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

必要屬性

itemListElement

ListItem

單一項目頁面的註解。

ListItem.position

Integer

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


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

ListItem.url

URL

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

透過 Search Console 監控複合式搜尋結果

Search Console 這項工具能協助您監控網頁在 Google 搜尋中的成效。 Google 會主動將您的網頁納入搜尋結果,您無需為此申請使用 Search Console,但是您可以藉由這項服務瞭解並改善 Google 檢索您網站的方式。建議您在下列情況下查看 Search Console:

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

首次部署結構化資料後

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

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

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

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

定期分析流量

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

疑難排解

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