Zengin snippet'ler - Yemek Tarifleri

Yeni! schema.org Google, Microsoft ve Yahoo! tarafından anlaşılabilen bir sözlük kullanarak sayfalarınızdaki çok çeşitli öğe türlerini işaretlemenize olanak verir. Daha fazla bilgi edinin. (Google mevcut zengin snippet işaretlemenizi desteklemeye devam etmektedir.)

Web sayfalarında yemek tarifi bilgileri işaretlendiğinde, Google yemek tarifi sonuçları için zengin snippet'leri göstermek ve Yemek Tarifi Görünümüyle Google'a eklemek üzere o bilgileri kullanabilir. (Yemek Tarifi Görünümü şu anda yalnızca ABD ve Japonya'da kullanılabilmekte, ancak diğer yerlerde de kullanılması için çalışmalarımız sürmektedir.)


hRecipe biçimi ile işaretlenmiş bir yemek tarifi snippeti

Kullanım yönergeleri

Yemek tarifi zengin snippet'inin amacı kullanıcılara belirli bir yemek tarifiyle ilgili, yorumcunun verdiği yıldız (1-5 yıldız arası), pişirme/hazırlama süresi ve kalori miktarı gibi ek bilgiler sağlamaktır.

Aşağıdaki yönergeler yemek tarif snippet'leri için geçerlidir:

  • Yemek tarif işaretleme özelliği kullanılırken, sayfanın ana konusu belirli bir yemek tarifi hakkında olmalıdır. Yemek tarif işaretleme özelliğinin birden fazla yemek tarifi içeren sayfada kullanılması desteklenmez.
  • Yemek tarifi işaretlemesi tek bir yorum içeriyorsa, yorumcunun adının geçerli bir ad (Kişi veya Kuruluş adı) olması gerekir. Örneğin, "Malzemelerde %50 indirim" geçerli bir yorumcu adı değildir.

Özellikler

Google aşağıdaki mikro veri, RDFa ve mikro biçim (hRecipe) özelliklerini tanır. Mikro biçim adının, mikro veri/RDFa adından farklı olduğu yerlerde, hRecipe adı parantez içinde görüntülenir. Kalın yazı tipindeki özellikler gereklidir. Ayrıca, zengin snippet'ler şu anda sadece aşağıdakilerden en az ikisini sağlayan yemek tarifleri için gösterilmektedir:
  • photo
  • prepTime, cookTime, totalTime veya ingredients
  • calories
  • review (yuvalanmış)
Özellik Açıklama
name (fn) Yemeğin adı.
recipeType (tag) Yemeğin türü; örneğin, aperatif, antre, tatlı ...
photo Hazırlanmakta olan yemeğin resmi.
published ISO tarih biçiminde, tarifin yayınlandığı tarih.
summary Yemeğin açıklandığı kısa bir özet.
review Yemek hakkında yorum. Yuvalanmış yorum bilgileri içerebilir.
prepTime Yemek tarifini hazırlamak için gereken sürenin, ISO 8601 süre biçimi ile belirtimi. Bir zaman aralığını belirtmek için alt öğeler olarak min, max kullanılabilir.
cookTime Yemeği gerçekten pişirmek için gereken sürenin ISO 8601 süre biçimi ile gösterimi. Bir zaman aralığını belirtmek için alt öğeler olarak min, max kullanılabilir.
totalTime (duration) Yemeği hazırlamak için gereken toplam sürenin ISO 8601 süre biçimi ile belirtimi. Bir zaman aralığını belirtmek için alt öğeler olarak min, max kullanılabilir.
nutrition Yemek tarifiyle ilgili beslenme bilgileri. Şu alt öğeleri içerebilir: servingSize, calories, fat, saturatedFat, unsaturatedFat, carbohydrates, sugar, fiber, protein, cholesterol. Bu öğeler, hRecipe mikro biçiminin açık bir şekilde bölümü değildir, ancak Google bunları tanır.
instructions Yemeği yapmak için gerçekleştirilecek adımlar. Her bir adımı açıklamak için kullanılabilecek instruction alt öğesini içerebilir.
yield Tarife göre hazırlanan yemeği miktarı (örneğin, servis yapılan kişi sayısı, porsiyon sayısı vb.).
ingredient Yemek tarifinde kullanılan malzeme. name (malzemenin adı) ve amount alt öğelerini içerebilir. Tek tek malzemeleri tanımlamak için bunu kullanın.
author Yemek tarifini oluşturan kişi. Yuvalanmış Kişi bilgilerini içerebilir.

İçeriği işaretleme

Aşağıdaki HTML kodunda, elmalı turta için bir tarif açıklanmaktadır:
<div>
  <h1>Büyükannemin Bayramlık Elmalı Turtası> 
   
  <img src="apple-pie.jpg" />
  Hazırlayan: Zeynep Yılmaz
   
  Yayın Tarihi: 5 Kasım 2009
   
  Bu, büyükannemin elmalı turta tarifidir. Üzerine hindistan cevizi serpmeyi seviyorum.
  4,0 yıldız / 35 yorum
  Hazırlık süresi: 30 dk
   
  Pişirme süresi: 1 saat
   
  Toplam süre: 1 saat 30 dk
  Sonuç: 1 adet 50 cm turta (8 kişilik)
  
  Porsiyon boyutu: 1 orta boy dilim
  
  Bir porsiyondaki kalori: 250
  Bir porsiyondaki yağ: 12 g

   
  Malzemeler: 
    İnce dilimlenmiş elmalar: 6 bardak
   
    Toz şeker: 3/4 bardak 
  ... 
		
  Hazırlanışı: 
    1. Elmaları kesip soyun 
    2. Şekeri tarçın ile karıştırın. Turta elmaları için ilave şeker kullanın. 
  ...
</div>

Aşağıdaki bölümlerde, bu içeriğin mikro veriler, mikro biçimler veya RDFa kullanılarak nasıl biçimlendirileceği anlatılmaktadır.

İşaretlemenizin doğru olduğundan emin olmak ve içeriğinizin arama sonuçlarında nasıl görüneceğini önizlemek için yapısal veri test aracını kullanın.
Mikro veriler

Burada, aynı HTML kodunun mikro veriler ile işaretlenmiş hali gösterilmektedir.

<div itemscope itemtype="http://data-vocabulary.org/Recipe" >
   
  <h1 itemprop="name">Büyükannemin Bayramlık Elmalı Turtası</h1>
   
  <img itemprop="photo" src="elma-turtası.jpg" /> 
   
  Hazırlayan: <span itemprop="author">Zeynep Yılmaz</span>
   
  Yayınlanma Tarihi: <time datetime="05-11-2009" itemprop="published">    
    5 Kasım 2009</time>
  
  <span itemprop="summary">Bu, büyükannemin elmalı turta tarifidir.  Üzerine hindistan cevizi
    serpmeyi seviyorum.</span>
  <span itemprop="review" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
      
    <span itemprop="rating">4,0</span> yıldız / 
      
    <span itemprop="count">35</span> yorumlar </span>
  
  Hazırlık süresi: <time datetime="PT30M" itemprop="prepTime">30 dk</time>
  
  Pişirme süresi: <time datetime="PT1H" itemprop="cookTime">1 saat</time>
  
  Toplam süre: <time datetime="PT1H30M" itemprop="totalTime">1 saat 30 dk</time>
  
  Sonuç: <span itemprop="yield">50 cm turta (8 kişilik)</span>
  
  <span itemprop="nutrition" itemscope itemtype="http://data-vocabulary.org/Nutrition">
    Porsiyon boyutu: <span itemprop="servingSize">1 orta boy dilim</span>
    
    Bir porsiyondaki kalori: <span itemprop="calories">250</span>
    Bir porsiyondaki yağ: <span itemprop="fat">12 g</span>
  </span>
  Malzemeler: 
    <span itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient">
      İnce dilimlenmiş <span itemprop="name">elmalar</span>:     
      
      <span itemprop="amount">6 bardak</span>
   
    </span>
    <span itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient">
      
      <span itemprop="name">Toz şeker</span>:    
      
      <span itemprop="amount">3/4 bardak</span>
    </span>
  ...
		  
  Hazırlanışı:
    <div itemprop="instructions">
      1. Elmaları kesip soyun
      2. Şekeri tarçın ile karıştırın. Turta elmaları için ilave şeker kullanın.
      ...
    </div>
</div>

Bu örnek şu şekilde çalışır:

  • İlk satırda, , <div> içindeki HTML'nin bir Yemek Tarifini temsil ettiğini belirtir. itemscope, <div> içeriğinin bir öğeyi tanımladığını, itemtype="http://www.data-vocabulary.org/Recipe" ise öğenin bir Yemek Tarifi olduğunu belirtir.
  • Örnekte, tarifin yazarı, malzemeleri ve hazırlama süresi gibi özellikleri açıklanmaktadır. Yemek tarifinin özelliklerini etiketlemek için, bu özelliklerden birini içeren her öğeye (<div> veya <span> gibi) bir özelliği belirten itemprop özelliği atanır. Örneğin, <span itemprop="author">.
  • Bir özellik, başka bir öğeden oluşabilir (diğer bir deyişle, bir öğe diğer öğeleri içerebilir). Örneğin, yukarıdaki tarif, rating ve count özelliklerine sahip bir Toplu yorum öğesini (itemtype="http://www.data-vocabulary.org/Review-aggregate") ve bununla birlikte, amount ve name özelliklerini kapsayan bir Tarif malzemeleri öğesini (ingredient) içerir.
  • Özel durumlar dışında Google, kullanıcı tarafından görülebilir olmayan içeriği görüntülemez. Ancak bazı durumlarda, sayfanızı ziyaret edenler için görünür olmasını istemeseniz dahi, arama motorlarına daha ayrıntılı bilgi sağlamak yararlı olabilir. Bu örnekte, zengin snippet ayrıştırıcısının yemeği yapmak için gereken hazırlama süresi, pişirme süresi ve toplam süreyi bulmak üzere özellik değerini kullanması gerektiğini belirtmek amacıyla datetime özelliği kullanılır, ancak yine de sayfadaki süreler kullanıcılar tarafından okunabilir bir şekilde görüntülenir. Örneğin: <time datetime="PT1H" itemprop="cookTime">1 saat</time>.
Mikro biçimler

Burada, aynı HTML kodunun mikro biçimler ile işaretlenmiş hali gösterilmektedir. (Not: Yukarıda gösterilen özelliklerin bazıları Google tarafından tanınmasına rağmen, microformats.org adresinde yayınlanan resmi hRecipe taslak belirtiminin bir parçası değildir.)

<div class="hrecipe">
   
   <span class="item">
      <h1 class="fn">Büyükannemin Bayramlık Elmalı Turtası</h1>
   </span>
   <img src="apple-pie.jpg" class="photo" />
   
   Hazırlayan: <span class="author">Zeynep Yılmaz</span>
   
   Yayın Tarihi: <span class="published"> 5 Kasım 2009<span class="value-title" title="2009-11-05"></span></span>
   
   <span class="summary">Bu, büyükannemin elmalı turta tarifidir.  Üzerine hindistan cevizi serpmeyi seviyorum..</span>
   <span class="review hreview-aggregate"> 
      <span class="rating">
         <span class="average">4,0</span> yıldız / 
         
         <span class="count">35</span> yorum
      </span> 
   </span>
   Hazırlama süresi: <span class="preptime">30 dk <span class="value-title" title="PT30M"></span></span>
   
   Pişirme süresi: <span class="cooktime">1 saat<span class="value-title" title="PT1H"></span></span>   
      
   Toplam süre: <span class="duration">1 saat 30 dk <span class="value-title" title="PT1H30M"></span></span> 
   
   Sonuç: <span class="yield">50 cm turta (8 kişilik)</span> 
   
   <span class="nutrition">
      
      Porsiyon boyutu: <span class="servingsize">1 orta boy dilim</span>
      
      Bir porsiyondaki kalori: <span class="calories">250</span> 
       
      Bir porsiyondaki yağ: <span class="fat">12 g</span> 
   
   </span>   
   
   Malzemeler:
   <span class="ingredient">
      İnce dilimlenmiş <span class="name">elmalar</span>:
      
      <span class="amount">6 bardak</span>  
   </span>
   <span class="ingredient">
      <span class="name">Toz şeker</span>: 
      
      <span class="amount">3/4 bardak</span> 
    
   </span>   

   Hazırlanışı:
   <span class="instructions">
   1. Elmaları kesip soyun
   2. Şekeri tarçın ile karıştırın. Turta elmaları için ilave şeker kullanın.
   ...   
   </span>
</div>

Bu örnek şu şekilde çalışır:

  • İlk satırdaki class="hrecipe", div etiketi içindeki HTML kodunun bir Yemek Tarifini (bu örnekte, elmalı turta) temsil ettiğini belirtir.
  • Yapısal bilgiler, class özelliği (class="fn" ve class="author" gibi) ve değerler ("toz şeker", "1 sa 30 dk" gibi) aracılığıyla aktarılır. Biçimlendirme gereksinimlerinize uygun olarak span ve div gibi etiketleri değiştirebilirsiniz.
  • Yorum bilgilerinin görüntülenmesi için, Toplu yorum bilgileri (hreview-aggregate) hrecipe içine yerleştirilmiştir. Yuvalanmış öğeler hakkında daha fazla bilgi edinin.
  • Derecelendirme (class="rating"), yemek tarifi web sayfasında derecelendirmenin "4,0 yıldız" gibi yazıldığı bir derecelendirme işaretinin değerini gösterir. Yorum değerlendirmelerini işaretleme hakkında daha fazla bilgi edinin.
  • Özel durumlar dışında Google, kullanıcı tarafından görülebilir olmayan içeriği görüntülemez. Ancak bazı durumlarda, sayfanızı ziyaret edenler için görünür olmasını istemeseniz dahi, arama motorlarına daha ayrıntılı bilgi sağlamak yararlı olabilir. Yukarıdaki HTML kodu, bir mikro biçim değer sınıfı modeli için bir örnek içerir. Bu örnek, toplam pişirme süresini arama motorlarına ISO 8601 süre biçiminde göstermek için kullanılır. Diğer yandan, bu bilgiler sayfanın kendisinde kullanıcının rahatça okuyabileceği şekilde ("1 saat 30 dk") görüntülenir. Bu örnekte, zengin snippet ayrıştırıcısının yemeği yapmak için gereken toplam süreyi bulmak üzere özellik değerini kullanması gerektiğini belirtmek amacıyla bir title özelliği kullanılır, ancak yine de sayfadaki süreler kullanıcılar tarafından okunabilir bir şekilde görüntülenir. Örneğin: <span class="value-title" title="PT1H30M">.
RDFa

Burada, aynı HTML kodunun RDFa ile işaretlenmiş hali gösterilmektedir.


<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Recipe">
   
   <h1 property="v:name">Büyükannemin Bayramlık Elmalı Turtası</h1>
   <span rel="v:photo"/>
     
     <img src="apple-pie.jpg"/> 
   
   </span>
   Hazırlayan: <span property="v:author">Zeynep Yılmaz</span>
   Yayın Tarihi: <span property="v:published" content="2009-11-05">5 Kasım 2009</span>
   
   <span property="v:summary">Bu, büyükannemin elmalı turta tarifidir.  Üzerine hindistan cevizi serpmeyi seviyorum..</span>
   <span rel="v:Review">
      <span typeof="v:Review-aggregate">
         <span rel="v:rating">
            <span typeof="v:Rating">
               <span property="v:average">4,0</span> yıldız / 
           
               <span property="v:count">35</span> yorum
            
            </span>
         </span>
      </span>
   </span>
   Hazırlama süresi: <span property="v:prepTime" content="PT30M">30 dk</span> 
   
   Pişirme süresi: <span property="v:cookTime" content="PT1H">1 saat</span> 
   
   Toplam süre: <span property="v:totalTime" content="PT1H30M">1 saat 30 dk</span>
   Sonuç: <span property="v:yield">50 cm turta (8 kişilik)</span> 
   
   <span rel="v:nutrition">
      <span typeof="v:Nutrition"> 
        Porsiyon boyutu: <span property="v:servingSize">1 orta boy dilim</span>
        
        Bir porsiyondaki kalori: <span property="v:calories">250</span>
        Bir porsiyondaki yağ: <span property="v:fat">12 g</span> 
      </span>
   </span>
   Malzemeler:    
   <span rel="v:ingredient">
      <span typeof="v:Ingredient"> 
          
         İnce dilimlenmiş <span property="v:name">elmalar</span>: 
            
         <span property="v:amount">6 bardak</span> 
     </span>   
   </span>
   <span rel="v:ingredient">
      <span typeof="v:Ingredient"> 
         <span property="v:name">Toz şeker</span>:   
            
         <span property="v:amount">3/4 bardak</span>  
        
      </span>   
   </span>  
   ...
 
   Hazırlanışı:
   <div property="v:instructions">
   1. Elmaları kesip soyun
   2. Şekeri tarçın ile karıştırın. Turta elmaları için ilave şeker kullanın.
   ...   
   </div>
</div>

Bu örnek şu şekilde çalışır:

  • Örnek, xmlns kullanılarak bir ad alanı bildirimiyle başlar. Bu satırda, vocabulary (varlıkların ve bileşenlerinin bir listesi) olarak belirtilen bir ad alanı gösterilir. Kişiler, yorumlar, yemek tarifleri, olaylar veya yer verilerine ilişkin sayfaları işaretlerken istediğiniz zaman xmlns:v="http://rdf.data-vocabulary.org/# namespace" ad alanı bildirimini kullanabilirsiniz. Sona bir sağa eğik çizgi ve # (xmlns:v="http://rdf.data-vocabulary.org/#") karakterini eklediğinizden emin olun .
  • Ayrıca, ilk satırdaki typeof="v:Recipe", işaretlenen içeriğin bir Yemek Tarifini açıkladığını gösterir.
  • Yemek tarifinin her bir özelliği (adı, özeti ve yağ içeriği gibi) property kodu kullanılarak etiketlenir. Özellik adının başında v: öneki bulunur (<span property="v:fat">).
  • Özel durumlar dışında Google, kullanıcı tarafından görülebilir olmayan içeriği görüntülemez. Ancak bazı durumlarda, sayfanızı ziyaret edenler için görünür olmasını istemeseniz dahi, arama motorlarına daha ayrıntılı bilgi sağlamak yararlı olabilir. Bu örnekte, zengin snippet ayrıştırıcısının yemeği yapmak için gereken hazırlama süresi, pişirme süresi ve toplam süreyi bulmak üzere özellik değerini kullanması gerektiğini belirtmek amacıyla content özelliği kullanılır, ancak yine de sayfadaki süreler kullanıcılar tarafından okunabilir bir şekilde görüntülenir. Örneğin: <span content="PT30M" property="v:prepTime">30 dk</span>.