Outils pour les webmasters

Vous trouverez ci-dessous le même contenu HTML balisé à l'aide des microdonnées.

<div itemscope itemtype="http://data-vocabulary.org/Recipe" >
   
  <h1 itemprop="name">La tarte aux pommes de ma grand-mère</h1>
  <img itemprop="photo" src="tarte_aux_pommes.jpg" /> 
   
  De <span itemprop="author">Caroline Martin</span>
  Publiée le : <time datetime="2009-11-05" itemprop="published">
    
    5 novembre 2009</time>
  
  <span itemprop="summary">Voici la recette de tarte aux pommes de ma grand-mère.  Je tiens à ajouter une
    une pincée de noix de muscade.</span>
  <span itemprop="review" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
    <span itemprop="rating">4</span> étoiles, basé sur
    <span itemprop="count">35<span avis <span
  Temps de préparation : <time datetime="PT30M" itemprop="prepTime">30 min</time>
  
  Temps de cuisson : <time datetime="PT1H" itemprop="cookTime">1 h</time>
  
  Total : <time datetime="PT1H30M" itemprop="totalTime">1 h 30</time>
  
  Résultat : <span itemprop="yield">une tarte d'environ 20 cm de diamètre (8 parts)</span>
  <span itemprop="nutrition" itemscope itemtype="http://data-vocabulary.org/Nutrition">
    Portion : <span itemprop="servingSize">1 part moyenne</span>
    Calories par part : <span itemprop="calories">250</span>
    Matières grasses par part : <span itemprop="fat">12 g</span>
  </span>
  Ingrédients :
    <span itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient">
      
      <span itemprop="name">Pommes</span> coupées en fines lamelles :
      <span class="amount">1 kg<span
    <span
    <span itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient">
      <span itemprop="name">Sucre blanc</span>:
      <span itemprop="amount">100 g</span>
    </span>
  …
		  
  Préparation :
    <div itemprop="instructions">
      1. Coupez et épluchez les pommes.
      2. Mélangez le sucre et la cannelle. Ajoutez un peu de sucre si les pommes sont acides.
      …
    </div>
</div>

Description de l'exemple

• Sur la première ligne, indique que le code HTML inclus dans la balise <div> représente une recette. itemscope indique que le contenu de la balise <div> décrit un élément, et itemtype="http://www.data-vocabulary.org/Recipe" indique que l'élément est une recette.
• L'exemple décrit les propriétés de la recette, telles que l'auteur, les ingrédients et le temps de préparation. Pour associer des libellés aux propriétés d'une recette, chaque élément contenant l'une de ces propriétés (<div> ou <span>) comporte un attribut itemprop indiquant une propriété. Par exemple, <span itemprop="author">.
• Une propriété peut être composée d'un autre élément. Autrement dit, un élément peut en contenir d'autres. Par exemple, la recette ci-dessus contient un élément "Review-aggregate" (itemtype="http://www.data-vocabulary.org/Review-aggregate") avec les propriétés rating et count, ainsi qu'un élément Recipe-ingredient (ingredient) avec les propriétés amount et name.
• Sauf dans certains cas particuliers, le contenu masqué n'est pas affiché dans les pages Google. Toutefois, il peut parfois être intéressant de fournir des informations plus détaillées aux moteurs de recherche, même si vous ne souhaitez pas que ces informations puissent être visibles sur votre page. Cet exemple utilise l'attribut datetime pour indiquer que l'analyseur d'extraits enrichis doit utiliser la valeur de l'attribut pour obtenir le temps de préparation, le temps de cuisson et le temps total requis pour préparer le plat, tout en affichant les durées sur la page de manière intelligible pour les visiteurs. Par exemple : <time datetime="PT1H" itemprop="cookTime">1 h</time>.

Vous trouverez ci-dessous le même contenu HTML balisé à l'aide des microformats. Remarque : certaines des propriétés mentionnées ci-dessus, même si elles sont reconnues par Google, ne figurent pas dans la spécification hRecipe officielle publiée sur le site microformats.org.

<div class="hrecipe">
   <span class="item">
      <h1 class="fn">La tarte aux pommes de ma grand-mère</h1>
   </span>
   <img src="tarte_aux_pommes.jpg" class="photo" />
   
   Par <span class="author">Caroline Martin</span>
   Publié le : <span class="published"> 5 novembre 2009<span class="value-title" title="2009-11-05"></span></span>
   <span class="summary">Voici la recette de tarte aux pommes de ma grand-mère. Je tiens à ajouter une pincée de noix de muscade.<span
   <span class="review hreview-aggregate">
      <span class="rating">
         <span class="average">4<span étoiles, note basée sur
         <span class="count">35<span avis
      </span> 
   </span>
   Temps de préparation : <span class="preptime">30 min <span class="value-title" title="PT30M"></span></span>
   Temps de cuisson : <span class="cooktime">1 heure<span class="value-title" title="PT1H"></span></span>   
   Total : <span class="duration">1 h 30 min <span class="value-title" title="PT1H30M"></span></span>
   Résultat : <span class="yield">une tarte d'environ 20 cm de diamètre (8 portions)<span
   <span class="nutrition">
      
      Portion : <span class="servingsize">1 part moyenne</span>
      Calories par part : <span class="calories">250</span>
      Matières grasses par part : <span class="fat">12 g</span>
   </span>   
   
   Ingrédients :
   <span class="ingredient">
      <span class="name">Pommes</span> coupées en fines lamelles :
      <span class="amount">1 kg</span> 
   </span>
   <span class="ingredient">
      
      <span class="name">Sucre blancr</span> :
      <span class="amount">100 g</span> 
   </span>   

   Préparation :
   <span class="instructions">
   
   1. Coupez et épluchez les pommes.
   2. Mélangez le sucre et la cannelle. Ajoutez un peu de sucre si les pommes sont acides.
   …   
   </span>
</div>

Description de l'exemple

• Sur la première ligne, class="hrecipe" indique que le code HTML inclus dans la balise div représente une recette, en l'occurrence une tarte aux pommes.
• Les informations structurées sont représentées par l'attribut class (class="fn" et class="author", par exemple) et des valeurs ("sucre blanc", "1 h 30 min", par exemple). Vous pouvez modifier les balises span et div en fonction de vos préférences en matière de format.
• Pour que l'avis soit affiché, les informations de la balise Review-aggregate (hreview-aggregate) sont imbriquées dans hrecipe. En savoir plus sur les éléments imbriqués
• La note de "4 étoiles" qui s'affiche sur la page Web de la recette provient de la valeur d'une balise rating (class="rating"). En savoir plus sur le balisage des notes dans les avis
• Sauf dans certains cas particuliers, le contenu masqué ne s'affiche pas dans les pages Google. Toutefois, il peut parfois être intéressant de fournir des informations plus détaillées aux moteurs de recherche, même si vous ne souhaitez pas que ces informations puissent être visibles sur votre page. Le code HTML ci-dessus contient un exemple de modèles de classe value des microformats, utilisés pour indiquer le temps total de cuisson aux moteurs de recherche au format de durée ISO 8601. La même information s'affiche également sur la page, sous une forme intelligible pour les visiteurs ("1 h 30"). Cet exemple utilise l'attribut title pour indiquer que l'analyseur d'extraits enrichis doit utiliser la valeur de l'attribut pour obtenir le temps total requis pour préparer le plat, tout en affichant les durées en clair sur la page. Exemple : <span class="value-title" title="PT1H30M">.

Vous trouverez ci-dessous le même contenu HTML balisé au format RDFa.

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Recipe">
   
   <h1 property="v:name">La tarte aux pommes de ma grand-mère</h1>
   
   <span rel="v:photo"/>
     
     <img src="tarte_aux_pommes.jpg"/>
   
   </span>
   Par <span property="v:author">Caroline Martin</span>
   Publié le : <span property="v:published" content="2009-11-05">5 novembre 2009<span
   <span property="v:summary">Voici la recette de tarte aux pommes de ma grand-mère.  Je tiens à ajouter une pincée de noix de muscade.<span
   <span rel="v:Review">
      
      <span typeof="v:Review-aggregate">
         <span rel="v:rating">
            <span typeof="v:Rating">
         
               <span property="v:average">4<span étoiles, note basée sur 
               <span property="v:count">35<span avis
            </span>
         </span>
      </span>
   </span>
   Temps de préparation : <span property="v:prepTime" content="PT30M">30 min</span>
   Temps de cuisson : <span property="v:cookTime" content="PT1H">1 heure</span>
   Temps total : <span property="v:totalTime" content="PT1H30M">1 h 30 min</span>
   Résultat : <span property="v:yield">une tarte d'environ 20 cm de diamètre (8 parts)</span>
   <span rel="v:nutrition">
      
      <span typeof="v:Nutrition"> 
         
        Portion: <span property="v:servingSize">1 part moyenne</span>
        Calories par part : <span property="v:calories">250</span>
        Matières grasses par part : <span property="v:fat">12 g</span> 
      </span>
   </span>
   Ingrédients :   
   <span rel="v:ingredient">
      <span typeof="v:Ingredient"> 
         <span property="v:name">Pommes</span> coupées en fines lamelles :   
         <span property="v:amount">1 kg</span> 
     </span>   
   </span>
   <span rel="v:ingredient">
      <span typeof="v:Ingredient"> 
          
         <span property="v:name">Sucre blanc</span> :   
         <span property="v:amount">100 g</span>  
      </span>   
   </span>  
   ...
 
   Préparation :
   <div property="v:instructions">
   
   1. Coupez et épluchez les pommes.
   2. Mélangez le sucre et la cannelle. Ajoutez un peu de sucre si les pommes sont acides.
   …   
   </div>
</div>

Description de l'exemple

• L'exemple commence par une déclaration de l'espace de noms avec le code xmlns. Cette déclaration indique l'espace de noms dans lequel le vocabulaire (liste d'entités constituées de composants) est spécifié. Vous pouvez utiliser la déclaration xmlns:v="http://rdf.data-vocabulary.org/# namespace" à chaque fois que vous balisez des pages relatives à des personnes, des avis, des recettes, des événements ou des lieux. Veillez à utiliser une barre oblique suivie du signe # (xmlns:v="http://rdf.data-vocabulary.org/#").
• typeof="v:Recipe", également présent sur la première ligne, indique que le contenu balisé représente une recette.
• Chaque propriété de la recette, telle que le nom, le pseudonyme et la quantité de matières grasses, est associée à un libellé property. Le nom de la propriété est précédé de la lettre v: (<span property="v:fat">).
• Sauf dans certains cas particuliers, le contenu masqué n'est pas affiché dans les pages Google. Toutefois, il peut parfois être intéressant de fournir des informations plus détaillées aux moteurs de recherche, même si vous ne souhaitez pas que ces informations puissent être visibles sur votre page. Cet exemple utilise l'attribut content pour indiquer que l'analyseur d'extraits enrichis doit utiliser la valeur de l'attribut pour obtenir le temps de préparation, le temps de cuisson et le temps total requis pour préparer le plat, tout en affichant les durées sur la page de manière intelligible pour les visiteurs. Exemple : <span content="PT30M" property="v:prepTime">30 min</span>