食譜 (Recipe
、HowTo
、ItemList
) 結構化資料
運用結構化資料,讓使用者能透過 Google 找到您的食譜內容。當您提供評論者評分、烹調和備料時間以及營養資訊等內容時,可讓 Google 更加瞭解您的食譜,透過具吸引力的介面呈現給使用者。食譜可顯示在 Google 搜尋結果和 Google 圖片中。
![這張插圖顯示食譜複合式搜尋結果在 Google 搜尋中的顯示方式。當中含有 4 項來自不同網站的複合式搜尋結果,包括烹飪時間、餐點圖片與評論資訊等詳細資料。](https://developers-dot-devsite-v2-prod.appspot.com/static/search/docs/images/recipe-rich-result-google-search.png?authuser=9&hl=zh-tw)
![這張插圖顯示食譜在 Google 圖片中的顯示方式。有 6 張圖片搜尋結果顯示不同的食物,其中 3 張含有食譜徽章,可讓使用者知道這幾張是食譜](https://developers-dot-devsite-v2-prod.appspot.com/static/search/docs/images/recipes-in-google-images.png?authuser=9&hl=zh-tw)
依您標記內容的方式而定,您的食譜可能也適用下列強化功能:
食譜強化功能 | |
---|---|
食譜代管網頁輪轉介面:透過加入 ItemList 結構化資料,讓使用者探索您的食譜網頁。
|
![]() |
如何新增結構化資料
結構化資料是一種標準化格式,能夠提供網頁相關資訊並分類網頁內容。如果您是第一次使用結構化資料,請參閱這篇文章,進一步瞭解結構化資料的運作方式。
以下簡要說明如何建立、測試及發布結構化資料。
- 新增必要屬性。根據您使用的格式,瞭解要在網頁中的什麼位置插入結構化資料。
- 遵循指南規範。
- 使用複合式搜尋結果測試驗證程式碼,並修正所有重大錯誤。此外,我們也建議您修正工具中可能標記的任何非重大問題,因為這有助於改善結構化資料的品質 (但並非符合複合式搜尋結果的顯示條件)。
- 部署幾個包含結構化資料的網頁,並使用網址檢查工具測試 Google 轉譯網頁的情形。請確認 Google 可以存取您的網頁,且網頁並未遭到 robots.txt 檔案或
noindex
標記封鎖,也未設有登入規定。如果網頁看起來沒問題,您可以要求 Google 重新檢索您的網址。 - 為了讓 Google 掌握日後的異動內容,建議您提交 Sitemap。您可以使用 Search Console Sitemap API 自動執行這項操作。
範例
以下是以 JSON-LD 程式碼呈現的食譜範例。
Google 搜尋上的食譜
以下網頁範例可以顯示在 Google 搜尋。
<html> <head> <title>Non-Alcoholic Piña Colada</title> <script type="application/ld+json"> { "@context": "https://schema.org/", "@type": "Recipe", "name": "Non-Alcoholic Piña 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": "2024-03-10", "description": "This non-alcoholic pina colada is everyone's favorite!", "recipeCuisine": "American", "prepTime": "PT1M", "cookTime": "PT2M", "totalTime": "PT3M", "keywords": "non-alcoholic", "recipeYield": "4 servings", "recipeCategory": "Drink", "nutrition": { "@type": "NutritionInformation", "calories": "120 calories" }, "aggregateRating": { "@type": "AggregateRating", "ratingValue": "5", "ratingCount": "18" }, "recipeIngredient": [ "400ml of pineapple juice", "100ml cream of coconut", "ice" ], "recipeInstructions": [ { "@type": "HowToStep", "name": "Blend", "text": "Blend 400ml of pineapple juice and 100ml cream of coconut until smooth.", "url": "https://example.com/non-alcoholic-pina-colada#step1", "image": "https://example.com/photos/non-alcoholic-pina-colada/step1.jpg" }, { "@type": "HowToStep", "name": "Fill", "text": "Fill a glass with ice.", "url": "https://example.com/non-alcoholic-pina-colada#step2", "image": "https://example.com/photos/non-alcoholic-pina-colada/step2.jpg" }, { "@type": "HowToStep", "name": "Pour", "text": "Pour the pineapple juice and coconut mixture over ice.", "url": "https://example.com/non-alcoholic-pina-colada#step3", "image": "https://example.com/photos/non-alcoholic-pina-colada/step3.jpg" } ], "video": { "@type": "VideoObject", "name": "How to Make a Non-Alcoholic Piña Colada", "description": "This is how you make a non-alcoholic piña colada.", "thumbnailUrl": [ "https://example.com/photos/1x1/photo.jpg", "https://example.com/photos/4x3/photo.jpg", "https://example.com/photos/16x9/photo.jpg" ], "contentUrl": "https://www.example.com/video123.mp4", "embedUrl": "https://www.example.com/videoplayer?video=123", "uploadDate": "2024-02-05T08:00:00+08:00", "duration": "PT1M33S", "interactionStatistic": { "@type": "InteractionCounter", "interactionType": { "@type": "WatchAction" }, "userInteractionCount": 2347 }, "expires": "2024-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>
指南
您必須遵循結構化資料通用指南,才能讓您的標記顯示在搜尋結果中。
Recipe
結構化資料需符合下列規範。
- 請將
Recipe
結構化資料用於準備特定菜餚的相關內容。舉例來說,「臉部磨砂膏」或「派對點子」都不是有效的菜餚名稱。 - 如要在輪轉介面或格線中顯示您的食譜,請務必遵照下列規範:
- 提供
ItemList
結構化資料以匯總食譜清單。 您可以單獨提供ItemList
結構化資料,也可以隨食譜結構化資料一起提供。 - 您的網站必須具有列出集合中所有食譜的摘要頁面。比方說,當使用者在搜尋結果中點擊摘要連結時,系統會恰當地導向您的網站,讓使用者看到您網頁上與其搜尋相關的食譜。
- 提供
結構化資料類型定義
您的內容必須包含必要屬性,才能在 Google 搜尋中以複合式搜尋結果形式呈現。您也可以加入建議的屬性,為內容新增更多相關資訊,提供更優質的使用者體驗。
Recipe
請使用 schema.org Recipe
類型的下列屬性來標記食譜內容。schema.org/Recipe 內提供 Recipe
的完整定義。
Google 支援的屬性如下:
必要屬性 | |
---|---|
image
|
完成菜餚的圖片。 其他圖片規範:
例如: "image": [ "https://example.com/photos/1x1/photo.jpg", "https://example.com/photos/4x3/photo.jpg", "https://example.com/photos/16x9/photo.jpg" ] |
name |
菜餚的名稱。 |
建議屬性 | |
---|---|
aggregateRating |
表示項目所獲得平均評分的屬性。請遵循評論摘錄規範,以及必要和建議的 如果 |
author |
撰寫食譜的人員姓名或機構的名稱。為了讓 Google 更瞭解不同內容的作者,建議您遵循作者標記最佳做法。 |
cookTime |
實際烹調菜餚花費的時間,採 ISO 8601 格式 (如適用)。 一律與 |
datePublished |
食譜的發布日期,採 ISO 8601 格式 (如適用)。 |
description |
簡短的菜餚介紹。 |
keywords
|
有關食譜的其他字詞,例如季節 (「夏天」)、節日 (「萬聖節」) 或其他描述形容詞 (「快速」、「簡易」、「道地」)。 其他規範
|
nutrition.calories |
由這份食譜製作的料理中所含的卡路里數。如果已定義 |
prepTime |
前置備料加上準備工作空間所需的時間長度,採 ISO 8601 格式 (如適用)。 一律與 |
recipeCategory |
食譜適合當做哪一餐或適合當做主菜/開胃菜/配菜類。例如:「晚餐」、「主菜」或「甜點」、「零食」。 |
recipeCuisine |
食譜所介紹的是哪個地區的料理。例如:「法國」、「地中海」或「美國」。 |
recipeIngredient |
食譜使用的食材。 例如: "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
|
菜餚烹調步驟。 以下提供幾種設定
其他規範
|
recipeYield |
按照食譜可烹調出的份量 (如適用)。指定這道食譜可製作幾人份的料理。只能使用數字,如果想使用其他單位 (例如幾「個」),您也可以加入其他份量單位。如果您為每人份的菜餚指定了任何營養資訊 (例如 範例 "recipeYield": [ "6", "24 cookies" ] |
totalTime |
前置備料加上實際烹調所需的總時間長度,採 ISO 8601 格式 (如適用)。 請使用 |
video
|
VideoObject
說明菜餚烹調步驟的影片。接在必要和建議的影片屬性清單之後。 |
HowToSection
使用 HowToSection
將標記食譜教學部分的步驟順序 (或子區段) 分組。直接在 recipeInstructions
屬性定義中指定 HowToSection
,或指定為另一個 HowToSection
的 itemListElement
。
HowToSection
類型用於定義單一食譜的其中一個區段,並包含一或多個步驟。請勿將 HowToSection
用來定義相同菜餚的不同食譜,HowToSection
應用來呈現單一食譜的一部分。如要提供某道菜餚的多種食譜,請使用多個 Recipe
物件。舉例來說,如果要呈現製作蘋果派的多種做法,請分別用多個 Recipe
物件,不要使用 HowToSection
物件。
schema.org/HowToSection 內提供 HowToSection
的完整定義。
必要屬性 | |
---|---|
itemListElement
|
HowToStep
這個區段和/或子區段的詳細步驟清單。比方說,在一份披薩食譜中,製作外皮、準備配料以及搭配組合和烘焙等步驟可能分別屬於三個不同區段。 範例: { "@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
屬性,或使用 HowToDirection
或 HowToTip
為每個句子定義 itemListElement
。
請使用 HowToStep 類型的下列屬性來標記食譜。直接在 recipeInstructions
屬性的定義中指定 HowToStep
,或在 HowToSection
中指定 itemListElement
。
schema.org/HowToStep 內提供 HowToStep
的完整定義。
必要屬性 | |
---|---|
itemListElement
|
HowToDirection 或 HowToTip
詳細子步驟清單,包括指示或提示。 如果已使用 |
text
|
Text
這個步驟的指示全文。 如果已使用
|
建議屬性 | |
---|---|
image
|
ImageObject 或 URL
步驟圖片。其他圖片規範:
|
name
|
Text
說明步驟摘要的文字或詞組,例如「排列派皮」。請勿使用非敘述性的文字 (例如「步驟 1:<文字>」) 或其他形式的步驟編號 (例如「1. <文字>」)。 |
url
|
URL
步驟的直接連結 |
video
|
VideoObject 或 Clip
這個步驟的影片或影片片段。 如要使用 |
HowToDirection
和 HowToTip
HowToDirection
和 HowToTip
的作用是提供指示或提示 (如適用)。兩者有同樣的必要屬性和建議屬性。
schema.org/HowToDirection 和 schema.org/HowToTip 內分別提供 HowToDirection
和 HowToTip
的完整定義。
必要屬性 | |
---|---|
text
|
Text
指示或提示文字。 |
ItemList
除了食譜屬性外,請針對代管專屬清單新增下列屬性。雖然 ItemList
並非必要屬性,但如果您想讓自己的食譜出現在代管輪轉介面中,則必須新增下列屬性。如要進一步瞭解代管輪轉介面,請參閱輪轉介面。
schema.org/ItemList 內提供 ItemList
的完整定義。
必要屬性 | |
---|---|
itemListElement
|
單一項目頁面的註解。 |
ListItem.position
|
項目頁面在清單中的序數位置。例如: "itemListElement": [ { "@type": "ListItem", "position": 1, }, { "@type": "ListItem", "position": 2, } ] |
ListItem.url
|
項目頁面的標準網址。每個項目都必須有一個專屬網址。 |
透過 Search Console 監控複合式搜尋結果
Search Console 這項工具能協助您監控網頁在 Google 搜尋中的成效。 Google 會主動將您的網頁納入搜尋結果,您無需為此申請使用 Search Console,但是您可以藉由這項服務瞭解並改善 Google 檢索您網站的方式。建議在下列情況查看 Search Console:
首次部署結構化資料後
在 Google 為網頁建立索引後,請透過相關的複合式搜尋結果狀態報告查看是否存在任何問題。理想情況下,有效項目會增加,但無效項目不會變多。如果您在結構化資料中發現問題,請依下列步驟操作:
發布新範本或更新程式碼後
當您對網站進行大幅變更時,請留意結構化資料中無效項目是否增加。- 如果無效項目增加,代表您推出的新範本可能無法正常運作,或者您的網站採用新方式與現有範本互動,但效果不佳。
- 如果有效項目減少,但錯誤並未隨之增加,代表您的網頁可能已不再內嵌結構化資料。請使用網址檢查工具找出問題的成因。
定期分析流量
透過成效報表分析您的 Google 搜尋流量。 這些資料會顯示您的網頁在 Google 搜尋中呈現為複合式搜尋結果的頻率、使用者點擊的頻率,以及您的搜尋結果平均排名。您也可以使用 Search Console API 自動提取這些結果。疑難排解
如果無法順利導入結構化資料,或是偵錯時遇到困難,請參考下列資源。
- 如果您使用內容管理系統 (CMS) 或者有他人代您處理網站事務,請向對方尋求協助。請務必將所有與問題相關的 Search Console 訊息都轉寄給對方,這些訊息會針對問題提供詳細說明。
- Google 不保證採用結構化資料的功能一定會顯示在搜尋結果中。如要瞭解為何 Google 無法將您的內容顯示為複合式搜尋結果,請參閱結構化資料通用指南裡的常見原因清單。
- 結構化資料可能含有錯誤。請查看結構化資料錯誤清單。
- 如果您的網頁遭到結構化資料專人介入處理處置,系統會忽略網頁上的結構化資料,但該網頁仍然會出現在 Google 搜尋結果中。請使用專人介入處理報告來修正結構化資料問題。
- 再次查看指南規範,確認您的內容是否符合規定。問題可能是因為垃圾內容或不當使用的標記所引起。不過,因為問題可能與語法無關,所以複合式搜尋結果測試無法找出問題所在。
- 疑難排解:未出現複合式搜尋結果/複合式搜尋結果總數減少。
- 請等待一段時間,讓系統執行重新檢索和重新建立索引作業。在發布網頁後,Google 可能需要幾天時間才會找到網頁並進行檢索。如有關於檢索和索引建立作業的一般問題,請參閱 Google 搜尋檢索和索引常見問題。
- 前往 Google 搜尋中心論壇發文提問。