将食谱发布到 Google 上

使用结构化数据让 Google 了解您的食谱,进而帮助用户找到您的食谱内容。 有了您提供的评价者评分、烹饪和准备时长以及营养成分等信息,Google 可以更好地了解您的食谱并以有趣的方式呈现给用户。食谱可以显示在 Google 搜索结果和 Google 图片中。

Google 搜索和 Google 图片中的食谱

根据您对内容的标记方式,您的食谱可能符合以下食谱增强功能的使用条件:

食谱增强功能
食谱教程:通过添加 Recipe 结构化数据,让 Google 助理能够引导用户在 Google Home 和智能显示屏上按照您的食谱烹饪美食。 有一些额外属性对食谱教程来说是必需的,但对 Google 搜索来说只是建议提供的属性。请务必添加 recipeIngredientrecipeInstructions

如需详细了解 Google 助理上的食谱,请了解如何根据网页内容构建操作

Google 助理上的食谱
食谱托管方陈列界面:通过添加 ItemList 结构化数据,使用户能浏览您的食谱库。 Google 搜索结果中的食谱陈列界面

如何添加结构化数据

结构化数据是一种提供网页相关信息并对网页内容进行分类的标准化格式。如果您不熟悉结构化数据,可以详细了解结构化数据的工作原理

下面概述了如何构建、测试和发布结构化数据。如需获得向网页添加结构化数据的分步指南,请查看结构化数据 Codelab

  1. 添加必要属性。如需了解如何在网页上放置结构化数据,请观看 JSON-LD 结构化数据:网页上的插入位置
  2. 遵循指南
  3. 使用富媒体搜索结果测试验证您的代码。
  4. 部署一些包含您的结构化数据的网页,然后使用网址检查工具测试 Google 看到的网页样貌。请确保您的网页可供 Google 访问,不会因 robots.txt 文件、noindex 标记或登录要求而被屏蔽。如果网页看起来没有问题,您可以请求 Google 重新抓取您的网址
  5. 为了让 Google 随时了解日后发生的更改,我们建议您提交站点地图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 结构化数据的食谱摘要网页(一个包含食谱列表的网页)示例。此内容可以显示在 Google 搜索结果中的网格内。

<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 助理上显示为食谱教程,请确保您的内容遵循 Google 助理内容限制政策

以下指南适用于 Recipe 结构化数据。

  • 只有当内容是关于特定菜肴的制作方式时,才应使用 Recipe 结构化数据。例如,“磨砂膏”或“聚会创意”就不是有效的菜肴名称。
  • 要使您的食谱显示在陈列界面或网格中,您必须遵循以下指南:
    • 提供 ItemList 结构化数据,为您的列表汇总食谱。您可以单独提供 ItemList 结构化数据,也可以和 Recipe 结构化数据一起提供。
    • 您的网站必须有一个摘要网页,其中列出集合内的所有食谱。例如,当用户点击 Google 搜索结果中的摘要链接时,他们便会被正确地定向到您网站上的相应网页,其中列出了与搜索内容相关的食谱。

结构化数据类型定义

要使您的内容能够作为富媒体搜索结果显示在 Google 搜索结果中,您必须为相应内容添加必需的属性。您还可添加建议的属性,以便添加与您的内容相关的更多信息,进而提供更好的用户体验。

Recipe

请使用 schema.org Recipe 类型的以下属性标记食谱内容。如需了解 Recipe 的完整定义,请访问 schema.org/Recipe

必需的属性

image

URLImageObject

菜肴成品图片。

其他的图片指南:

  • 每个网页必须包含至少 1 张图片(无论您是否添加了标记)。Google 将根据宽高比和分辨率挑选最合适的图片,让其显示在搜索结果中。
  • 图片网址必须可抓取且可编入索引
  • 图片必须代表标记的内容。
  • 图片必须采用受 Google 图片支持的文件格式。
  • 为了获得最佳效果,请按以下宽高比提供多张高分辨率图片(宽度乘以高度至少为 50K 像素):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 属性列表。

如果 Recipe 结构化数据只包含一条评价,那么评价者的名称必须是有效的个人或组织名称。例如,“配料减少 50%”就不是有效的评价者名称。

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 的值。我们建议使用 HowToStep。当食谱包含多个部分时,您还可以利用 HowToSection 将 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 属性列表后面。

  • 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 对象。

如需了解 HowToSection 的完整定义,请访问 schema.org/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,或指定为 HowToSectionitemListElement

如需了解 HowToStep 的完整定义,请访问 schema.org/HowToStep

必需的属性

itemListElement

HowToDirectionHowToTip

详细子步骤列表,包括指导或提示。

如果使用了 text,则该属性为可选属性。

text

Text

相应步骤的完整说明文字。

如果使用了 itemListElement,则该属性为可选属性。其他指南:

  • 只能添加说明文本,不能添加其他文本(如“指导”、“观看视频”或“第 1 步”)。请在标记的属性以外指定这些词组。
建议的属性

image

ImageObjectURL

相应步骤的图片。其他图片指南:

  • 图片网址必须可抓取且可编入索引
  • 图片必须代表已标记的内容。
  • 图片格式必须为 .jpg、.png 或 .gif。

name

Text

相应步骤的总结性字词或短语(例如“排列馅饼皮”)。请勿使用非描述性文字(例如“第 1 步:[文字]”)或其他形式的步骤编号(例如“1. [文字]”)。

url

URL

一个 URL,可直接链接到相应步骤(如果有)。例如,锚链接片段。

video

VideoObjectClip

相应步骤的视频或视频剪辑。

如果是 VideoObject,则位于必需和建议的 Video 属性或 Clip 属性列表后面。

HowToDirectionHowToTip

HowToDirectionHowToTip 可用来描述指导或提示。这两者具有相同的必需属性和建议属性。

如需了解 HowToDirectionHowToTip 的完整定义,请访问 schema.org/HowToDirectionschema.org/HowToTip

必需的属性

text

Text

指导或提示文字。

ItemList

除了 Recipe 属性之外,您还可为托管方专属的列表添加以下属性。虽然 ItemList 不是必需的,但如果您希望食谱能够显示在托管方陈列界面中,则必须添加以下属性。如需详细了解托管方陈列界面,请参阅 Carousel

如需了解 ItemList 的完整定义,请访问 schema.org/ItemList

必需的属性

itemListElement

ListItem

列表中单个食谱网页的注释。

ListItem.position

Integer

列表中相应食谱网页的序数位置。例如:


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

ListItem.url

URL

食谱网页的规范网址。每个项目都应具备一个独一无二的网址。

使用 Search Console 监控富媒体搜索结果

Search Console 是一款工具,可帮助您监控网页在 Google 搜索结果中的显示效果。即使没有注册 Search Console,您的网页也可能会显示在 Google 搜索结果中,但注册 Search Console 能够帮助您了解 Google 如何查看您的网站并做出相应的改进。建议您在以下情况下查看 Search Console:

  1. 首次部署结构化数据后
  2. 发布新模板或更新代码后
  3. 定期分析流量时

首次部署结构化数据后

等 Google 将网页编入索引后,请在相关的富媒体搜索结果状态报告中查看是否存在问题。 理想情况下,您应该会看到有效网页数增加了,但错误数或警告数没有增加。如果您发现结构化数据存在问题,请执行以下操作:

  1. 修正错误
  2. 检查实际网址,核实问题是否仍然存在。
  3. 使用状态报告请求验证

发布新模板或更新代码后

对网站进行重大更改后,请监控结构化数据的错误数和警告数是否增加了。
  • 如果您发现错误增多了,可能是因为您推出的某个新模板无法正常工作,或者您的网站以一种新的错误方式与现有模板交互。
  • 如果您发现有效内容项减少了(但错误数的增加情况并不对应),可能是因为您的网页中未再嵌入结构化数据。请通过网址检查工具了解导致此问题的原因。

定期分析流量时

请使用效果报告分析您的 Google 搜索流量。数据将显示您的网页在 Google 搜索结果中显示为富媒体搜索结果的频率、用户点击该网页的频率以及网页在搜索结果中的平均排名。您还可以使用 Search Console API 自动提取这些结果。

问题排查

如果您在实施结构化数据时遇到问题,请查看下面列出的一些实用资源。