Na pinech s recepty lze uvést název, počet porcí, dobu přípravy, hodnocení a seznam surovin pro recepty z vašeho webu. Můžete také uvést, zda se jedná o recept typu paleo, vegetariánský, veganský nebo bez lepku.
Přidání pinů s recepty na web
1. Přidejte na svůj web značky Schema.org nebo hrecipe mezi tagy <head> a </head> do HTML kódu každé stránky, na níž chcete aktivovat rozšířené piny s recepty.
2. Pomocí validátoru rozšířených pinů zkontrolujte, že se údaje o rozšířených pinech zobrazují správně.
3. Pokud vše vypadá v pořádku, klikněte na možnost Požádat. Při odeslání žádosti nezapomeňte vybrat tagy HTML.
Hodnocení receptů
Do rozšířených pinů s recepty můžete přidat informace o hodnocení. Požadovaný meta tag přidejte přes značku Schema.org. Pokud potřebujete pomoc s přidáním hodnocení na váš web, navštivte web Schema.org nebo se podívejte na tento vzorový pin, kde zjistíte, jak stránka bettycrocker.com nastavila svůj web. Informace o hodnocení lze přidat pouze pomocí značky Schema.org (nikoli h-recipe) a zobrazí se pouze v zařízeních se systémem iOS a Android.
Značky Schema.org a hrecipe
Níže najdete povinná pole rozšířených pinů pro každý typ tagů. Pole upravte tak, aby odpovídala vašim receptům. Značky Schema.org:
<div itemscope itemtype="https://schema.org/Recipe">
<span itemprop="name">
Pomerančovo-ananasovo-mrkvové smoothie</span>
<span itemprop="description">
Popis vašeho receptu</span>
<span itemprop="aggregateRating">
Zde se zobrazí souhrnné hodnocení.</span>
<meta itemprop="url"
content="https://myrecipesite.com/pineapple.html" />
<span itemprop="recipeYield">1 porce</span>
Suroviny:
<span itemprop="ingredients">surovina 1</span>,
<span itemprop="ingredients">surovina 2</span>,
<span itemprop="ingredients">surovina 3</span>,
<span itemprop="ingredients">
Přidejte tolik tagů surovin, kolik potřebujete.</span>
Pokyny:
<span itemprop="recipeInstructions">
Ananas, led, pomerančový džus, mrkev
a banán dejte do mixéru. Vymixujte dohladka.</span>
</div>
Tagy hrecipe
<article class="h-recipe">
<h1 class="p-name">Bagely</h1>
<ul>
<li class="p-ingredient">Mouka</li>
<li class="p-ingredient">Cukr</li>
<li class="p-ingredient">Droždí</li>
</ul>
<p>Doba přípravy: <time class="dt-duration" datetime="1H">1 hodina</time>,
Počet porcí: <data class="p-yield" value="4">4</data>.</p>
<div class="e-instructions">
<ol>
<li>Začněte smícháním všech surovin.</li>
</ol>
</div>
</article>