Webmaster-Tools

Im Folgenden sehen Sie denselben HTML-Inhalt mit Markup für Mikrodaten:

<div itemscope itemtype="http://data-vocabulary.org/Recipe" >
    
  <h1 itemprop="name">Großmutters Apfelkuchen für Festtage</h1>
  <img itemprop="photo" src="Apfelkuchen.jpg" /> 
   
  Von <span itemprop="author">Kerstin Mayer</span>
  Veröffentlicht: <time datetime="2009-11-05" itemprop="published">
    
    5. November 2009</time>
  
  <span itemprop="summary">Das ist ein Rezept meiner Großmutter für einen Apfelkuchen.  Ich gebe gerne eine Prise Muskatnuss hinzu.</span>
  <span itemprop="review" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
    <span itemprop="rating">4.0</span> Sterne auf der Grundlage von
    <span itemprop="count">35</span> Berichten </span>
  
  Vorbereitungszeit: <time datetime="PT30M" itemprop="prepTime">30 Minuten</time>
  
  Backzeit: <time datetime="PT1H" itemprop="cookTime">1 Stunde</time>
  
  Gesamtzeit: <time datetime="PT1H30M" itemprop="totalTime">1 Stunde, 30 Minuten</time>
  
  Menge: <span itemprop="yield">Kuchen mit einem Durchmesser von 23 cm</span>
  <span itemprop="nutrition" itemscope itemtype="http://data-vocabulary.org/Nutrition">
    Serviergröße: <span itemprop="servingSize">1 mittelgroßes Stück</span>
      
    Kalorien pro Portion: <span itemprop="calories">250</span>
    Fett pro Portion: <span itemprop="fat">12 g</span>
  </span>
  Zutaten:
    <span itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient">
      
      In dünne Scheiben geschnittene <span itemprop="name">Äpfel</span>:
      <span itemprop="amount">6 Tassen</span>
   
    </span>
    <span itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient">
      <span itemprop="name">Zucker</span>:
      <span itemprop="amount">3/4 Tasse</span>
    </span>
  ...
		  
  Zubereitung:
    <div itemprop="instructions">
      1. Äpfel schälen und schneiden.
      2. Zucker und Zimt vermischen. Für saure Äpfel zusätzlichen Zucker verwenden.
      ...
    </div>
</div>

Erklärung:

• In der ersten Zeile gibt an, dass das von den <div>-Tags umschlossene HTML ein Rezept darstellt. itemscope gibt an, dass der Inhalt der <div>-Tags ein Element beschreibt, und itemtype="http://www.data-vocabulary.org/Recipe" gibt an, dass es sich bei diesem Element um ein Rezept handelt.
• Das Beispiel beschreibt Eigenschaften des Rezepts, wie Autor, Zutaten und Vorbereitungszeit. Zur Kennzeichnung der Rezepteigenschaften wird jedem Element mit einer dieser Eigenschaften – etwa <div> oder <span> – ein itemprop-Attribut zugewiesen. Diese Attribute geben eine Eigenschaft an. Beispiel: <span itemprop="author">.
• Eine Eigenschaft kann ein weiteres Element enthalten, das heißt, ein Element kann andere Elemente umfassen. Beispiel: Das obige Rezept enthält das Element "Review-aggregate" (itemtype="http://www.data-vocabulary.org/Review-aggregate") mit den Eigenschaften rating und count, sowie einen Artikel für die Rezeptzutaten (ingredient) mit den Eigenschaften amount und name.
• Google zeigt Content, der dem Nutzer verborgen bleibt, nur in Ausnahmefällen an. Manchmal kann es sich jedoch als nützlich erweisen, Suchmaschinen genauere Informationen zur Verfügung zu stellen, selbst wenn diese Informationen dem Besucher Ihrer Webseite verborgen bleiben sollen. In diesem Beispiel gibt das datetime-Attribut an, dass der Rich Snippets-Parser den Attributwert zum Suchen der Vorbereitungszeit, Garzeit und Gesamtzeit für die Zubereitung des Gerichts verwenden soll. Die Zeiten auf der Seite werden jedoch noch immer lesbar angezeigt. Beispiel: <time datetime="PT1H" itemprop="cookTime">1 Stunde</time>.

Im Folgenden wird noch einmal der gleiche HTML-Code mit Mikroformat-Auszeichnungen dargestellt. (Hinweis: Einige der oben dargestellten Eigenschaften werden zwar von Google erkannt, sind jedoch nicht Teil der offiziellen hRecipe-Entwurfsspezifikation, die unter microformats.org veröffentlicht ist.)

<div class="hrecipe">
    
   <span class="item">
      <h1 class="fn">Großmutters Apfelkuchen für Festtage</h1>
   
   </span>
   <img src="apfelkuchen.jpg" class="photo" />
    
   Von <span class="author">Kerstin Mayer</span>
   
   Veröffentlicht am: <span class="published">5. November 2009<span class="value-title" title="2009-11-05"></span></span>
    
   <span class="summary">Das ist ein Rezept meiner Großmutter für einen Apfelkuchen.  Ich gebe gerne eine Prise Muskatnuss hinzu.</span>
   <span class="review hreview-aggregate">
      <span class="rating">
         <span class="average">4,0</span> Sterne auf der Grundlage von
            
         <span class="count">35</span> Beurteilungen
      
      </span> 
   </span>
   Vorbereitungszeit: <span class="preptime">30 Minuten <span class="value-title" title="PT30M"></span></span>
   
   Backzeit: <span class="cooktime">1 Stunde<span class="value-title" title="PT1H"></span></span>   
      
   Gesamtzeit: <span class="duration">1 Stunde, 30 Minuten <span class="value-title" title="PT1H30M"></span></span>
   
   Menge: <span class="yield">Kuchen mit einem Durchmesser von 23 cm</span>
   
   <span class="nutrition">
      
      Serviergröße: <span class="servingsize">1 mittelgroßes Stück</span>
      
      Kalorien pro Portion: <span class="calories">250</span>
      
      Fett pro Portion: <span class="fat">12 g</span>
   
   </span>   
   
   Zutaten:
   <span class="ingredient">
      In dünne Scheiben geschnittene <span class="name">Äpfel</span>:
      
      <span class="amount">6 Tassen</span> 
    
   </span>
   <span class="ingredient">
       
      <span class="name">Zucker</span>:
      
      <span class="amount">3/4 Tasse</span>
    
   </span>   

   Zubereitung:
   <span class="instructions">
   1. Äpfel schälen und schneiden.
   2. Zucker und Zimt vermischen. Für saure Äpfel zusätzlichen Zucker verwenden.
   ...   
   </span>
</div>

Erklärung:

• In der ersten Zeile gibt class="hrecipe" an, dass der in div eingeschlossene HTML-Code ein Rezept darstellt – in diesem Fall für einen Apfelkuchen.
• Die strukturierten Daten werden vom Attribut class, etwa in class="fn" oder class="rating", sowie von den Werten, wie "Zucker" oder "1 Stunde, 30 Minuten", beschrieben. Ändern Sie einfach Ihre Tags, zum Beispiel span und div, entsprechend Ihren Vorstellungen bei der Formatierung.
• Zur Anzeige der Erfahrungsberichtinformationen wurden die Gesamtberichtsdaten (hreview-aggregate) innerhalb von hrecipe geschachtelt. Weitere Informationen zu geschachtelten Entitäten
• Die Bewertung (class="rating") stellt einen Wert eines Bewertungs-Markups dar, bei der die Bewertung als "4,0 Sterne" auf der Webseite des Rezepts angegeben ist. Weitere Informationen zur Auszeichnung von Beurteilungsbewertungen
• Google zeigt Inhalte, die dem Nutzer verborgen bleiben, nur in Ausnahmefällen an. Manchmal kann es sich jedoch als nützlich erweisen, Suchmaschinen genauere Informationen zur Verfügung zu stellen, selbst wenn diese Informationen dem Betrachter Ihrer Webseite verborgen bleiben sollen. Der obige HTML-Code beinhaltet ein Beispiel des Musters mit Mikroformatwerten, das den Suchmaschinen als Hinweis für die gesamte Garzeit im ISO 8601-Zeitformat angezeigt wird. Zudem wird dieselbe Zeitangabe auf der Seite selbst in einer leserfreundlichen Ansicht ("1 Stunde, 30 Minuten") angezeigt. Das title-Attribut gibt an, dass der Rich Snippets-Parser den Attributwert zum Suchen der Gesamtzeit für die Zubereitung des Gerichts verwenden soll. Die Zeiten auf der Seite werden jedoch noch immer lesbar angezeigt. Beispiel: <span class="value-title" title="PT1H30M">

Im Folgenden noch einmal der gleiche HTML-Code mit RDFa-Auszeichnungen:

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Recipe">
    
   <h1 property="v:name">Großmutters Apfelkuchen für Festtage</h1>
   <span rel="v:photo"/>
     
     <img src="apfelkuchen.jpg"/>
   
   </span>
   Von <span property="v:author">Kerstin Mayer</span>
   Veröffentlicht am: <span property="v:published" content="2009-11-05">5. November 2009</span>
    
   <span property="v:summary">Das ist ein Rezept meiner Großmutter für einen Apfelkuchen.  Ich gebe gerne eine Prise Muskatnuss hinzu.</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> Sterne auf der Grundlage von 
                   
               <span property="v:count">35</span> Beurteilungen
            
            </span>
         </span>
      </span>
   </span>
   Vorbereitungszeit: <span property="v:prepTime" content="PT30M">30 Minuten</span>
   
   Backzeit: <span property="v:cookTime" content="PT1H">1 Stunde</span>
   
   Gesamtzeit: <span property="v:totalTime" content="PT1H30M">1 Stunde, 30 Minuten</span>
   
   Menge: <span property="v:yield">Kuchen mit einem Durchmesser von 23 cm</span>
   
   <span rel="v:nutrition">
      <span typeof="v:Nutrition"> 
        Serviergröße: <span property="v:servingSize">1 mittelgroßes Stück</span>
        
        Kalorien pro Portion: <span property="v:calories">250</span>
        Fett pro Portion: <span property="v:fat">12 g</span> 

   

    
      </span>
   </span>
   Zutaten:   
   <span rel="v:ingredient">
      <span typeof="v:Ingredient"> 
           
         In dünne Scheiben geschnittene <span property="v:name">Äpfel</span>:   

            
         <span property="v:amount">6 Tassen</span> 
       
     </span>   
   </span>
   <span rel="v:ingredient">
       
      <span typeof="v:Ingredient"> 
           
         <span property="v:name">Zucker</span>:   
             
         <span property="v:amount">3/4 Tasse</span> 
          
      </span>   
   </span>  
   ...
 
   Zubereitung:
   <div property="v:instructions">
   1. Äpfel schälen und schneiden.
   2. Zucker und Zimt vermischen. Für saure Äpfel zusätzlichen Zucker verwenden.
   ...   
   </div>
</div>

Erklärung:

• Das Beispiel beginnt mit einer Namensraum-Deklaration über xmlns. Hiermit wird der Namensraum angegeben, in dem das Vokabular – eine Liste der Entitäten und ihrer Komponenten – festgelegt wird. Sie können die Namensraum-Deklaration xmlns:v="http://rdf.data-vocabulary.org/# namespace" immer verwenden, wenn Sie Seiten für Personen-, Beurteilungs-, Rezept-, Veranstaltungs- oder Standortdaten auszeichnen. Vergessen Sie am Ende nicht den Schrägstrich und die abschließende Raute # (xmlns:v="http://rdf.data-vocabulary.org/#").
• Ebenfalls in der ersten Zeile gibt typeof="v:Recipe" an, dass der mit Auszeichnungen ergänzte Content ein Rezept beschreibt.
• Jede Eigenschaft des Rezepts, etwa Name, Zusammenfassung und Fettgehalt, wird mithilfe von property gekennzeichnet. Dem Eigenschaftennamen wird das Präfix v: vorangestellt: (<span property="v:fat">).
• Google zeigt Inhalte, die dem Nutzer verborgen bleiben, nur in Ausnahmefällen an. Manchmal kann es sich jedoch als nützlich erweisen, Suchmaschinen genauere Informationen zur Verfügung zu stellen, selbst wenn diese Informationen dem Betrachter Ihrer Webseite verborgen bleiben sollen. In diesem Beispiel gibt das content-Attribut an, dass der Rich Snippets-Parser den Attributwert zum Suchen der Vorbereitungszeit, Garzeit und Gesamtzeit für die Zubereitung des Gerichts verwenden soll. Die Zeiten auf der Seite werden jedoch noch immer lesbar angezeigt. Beispiel: <span content="PT30M" property="v:prepTime">30 Minuten</span>.