レシピピン

レシピピンは、料理名、レシピの評価、レシピの分量、調理時間、材料を、あなたのウェブサイトから表示することができます。また、パレオ、ベジタリアン、ビーガン、グルテンフリーといった表記も可能です。

サイトにレシピピンを追加する

1. レシピピンを有効にしたいページの HTML コードの <head> と </head> との間に、Schema.org または hRecipe のマークアップを追加します
2. Pinterest のリッチピン検証ツールを使用して、リッチピンデータが表示されることを確認します
3. 正しく表示されていれば、「申請する」をクリックします。申請の際には、HTML を選択してください

レシピの評価

レシピピンには、評価情報を追加できますが、それには Schema.org マークアップから必要なメタタグを追加してください。ウェブサイトへの評価情報追加に関してサポートが必要な場合には、Schema.org にアクセスするか、このピンの例を見て bettycrocker.com による導入事例を確認することができます。評価情報を追加するには hRecipe ではなく Schema.org マークアップが必要です。また、評価情報は iOS と Android デバイスのみで表示されます。

Schema.org と hRecipe のマークアップ

各マークアップのリッチピン必須項目は以下のとおりです。黒の項目を編集して、レシピに適用してください。Schema.org マークアップ

<div itemscope itemtype="https://schema.org/Recipe">
  <span itemprop="name">
    オレンジとパイナップルと人参のスムージー</span>
   <span itemprop="description">
    レシピの説明文。</span>
  <span itemprop="aggregateRating">
    集計された評価がここに表示されます</span>
    <meta itemprop="url"
    content="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-recipe">
  <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">4 人分</data>.</p>
  <div class="e-instructions">
    <ol>
      <li>最初にすべての材料をよく混ぜます。</li>
   </ol>
  </div>
</article>

詳細は Pinterest デベロッパー向けサイトをご覧ください。

ヘルプが必要ですか?
お問い合わせはこちら