食谱 Pin 图

食谱 Pin 图可让您从网站上为食谱添加标题、食用分量、烹饪时间、评分及配料列表。我们还可以显示食谱是否为原始饮食、素食主义、纯素食主义或不含麸质。

往您的网站上添加食谱 Pin 图

1. 在 HTML 代码的 <head> <head> 图板区块之间为您想要启用食谱高级 Pin 图的每个页面添加 Schema.org 或 hrecipe 标记
2.使用我们的高级 Pin 图验证器,确保我们能够看到高级 Pin 图数据
3. 如果一切正常,点击立即应用,确保在应用时选择 HTML 标签

食谱评分

您可以为食谱高级 Pin 图添加评分信息。为此,请通过 Schema.org 标记添加元标记。如果您需要关于向您的站点实施评级信息的帮助,请访问 Schema.org 或查看此示例 Pin 图,以了解 bettycrocker.com 是如何设置其站点的。请注意,评级信息只能使用 Schema.org标记(非 h-recipe)来添加,而且评级信息只会显示在 iOS 和 Android 设备上。

Schema.org 与 hrecipe 标记

下面是每种标记类型所需的高级 Pin 图字段。编辑黑色字段以显示您的食谱。Schema.org 标记

<div itemscope itemtype="https://schema.org/Recipe">
   <span itemprop="name">
    橙子-菠萝-胡萝卜奶昔</span>
   <span itemprop="description">
    您的食谱描述</span>
 <span itemprop="aggregateRating">
    将在此显示综合评价</span>
    <meta itemprop="url"
    内容="https://myrecipesite.com/pineapple.html"/>
    <span itemprop="recipeYield">1 人份</span>
    原料:
        <span itemprop=“ingredients”>原料 1</span>,
        <span itemprop=“ingredients”>原料 2</span>,
        <span itemprop=“ingredients”>原料 3</span>,
        <span itemprop=“ingredients”>
    根据需要尽可能多地添加原料</span>.
   说明:
    <span itemprop=“recipeInstructions”>
    将菠萝、冰、橙汁、胡萝卜和
   香蕉放入搅拌机。搅拌至均匀。</span>
</div> 

hrecipe 标记

<article class="h-recip">
  <h1 class="p-name">百吉饼</h1>
  <ul>
    <li class="p-ingredient">面粉</li>
    <li class="p-ingredient">糖</li>
    <li class="p-ingredient">酵母</li>
  </ul>
  <p>耗时 <time class="dt-duration" datetime="1H">1 小时</time>,
     供应数量 <data class="p-yield" value="4">四人</data>.</p>
  <div class="e-instructions">
    <ol>
      <li>首先把所有的原料混合在一起。</li>
   </ol>
  </div>
</article>

请访问我们的开发人员网站以了解更多信息。 

仍需要帮助?
联系我们