食譜釘圖

您可使用食譜釘圖,為來自您網站的食譜新增標題、份量、料理所需時間、評等和食材表。我們也可以顯示食譜屬於原始飲食、蛋奶素、全素或無麩質。

將食譜釘圖新增到您的網站上

1. 在您想啟用食譜資訊釘圖的每一個頁面之 HTML 程式碼中,於 <head> </head> 區段之間加入 Schema.org 或 hrecipe 標記
2. 使用資訊釘圖驗證程式確認我們可以檢視資訊釘圖資料
3. 如果一切都沒有問題,請按一下「立即申請」,申請時請務必選擇 HTML 標籤

食譜評等

您可以為食譜資訊釘圖新增評等資訊。若要完成此操作,您需透過 Schema.org 標記新增中繼標籤。若您需要在網站上導入評等資訊,請造訪 Schema.org 或參閱此範例釘圖,瞭解 bettycrocker.com 如何設定其網站。請注意,只能使用 Schema.org 標記 (h-recipe 不適用) 來新增評等資訊,且評等資訊只會在 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>

請前往開發人員網站瞭解更多資訊。

仍需要協助?
請與我們聯繫