Outils pour les webmasters

<div>
   L'Amourita Pizza
   Adresse : 2 rue du Plan, Strasbourg, Alsace
   Téléphone : 03 88 00 00 00
   <a href="http://pizza.example.com">http://pizza.example.com</a>
</div>

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

<div itemscope itemtype="http://data-vocabulary.org/Organization"> 
    <span itemprop="name">L'Amourita Pizza</span>
    Adresse : 
     <span itemprop="address" itemscope 
      itemtype="http://data-vocabulary.org/Address">
    <span itemprop="street-address">2 rue du Plan</span>, 
      <span itemprop="locality">Strasbourg</span>, 
    <span itemprop="region">Alsace</span>.
    </span>
    Téléphone : <span itemprop="tel">03 88 00 00 00</span>.
    <a href="http://www.example.com" itemprop="url">http://pizza.example.com</a>.
</div>

Description de l'exemple

• Sur la première ligne, <itemscope itemtype="http://www.data-vocabulary.org/Organization"> indique que le code HTML inclus dans la balise <div> représente un élément. <itemscope> indique que le contenu de la balise <div> décrit un élément, et itemtype="http://www.data-vocabulary.org/Organization" indique que cet élément est une entreprise.
• L'exemple décrit les propriétés de la société, telles que son nom, son adresse et son numéro de téléphone. Pour associer des libellés aux propriétés d'une société, 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="tel">.
• Une propriété peut être composée d'un autre élément (autrement dit, un élément peut en contenir d'autres). Par exemple, les informations relatives à la société ci-dessus incluent une adresse (itemtype="http://www.data-vocabulary.org/Address") avec les propriétés street-address, locality et region.

Vous trouverez ci-dessous le même contenu HTML balisé à l'aide du microformat hCard. Le microformat hCard est utilisé pour baliser les coordonnées des personnes et des organisations.

<div class="vcard">
   <span class="fn org">L'Amourita Pizza</span> 
   Adresse : 
     <div class="adr"> 
        <span class="street-address">2 rue du Plan</span>, <span class="locality">Strasbourg</span>, <span class="region">Alsace</span>
     </div>  
<span class="geo">
        <span class="latitude">
           <span class="value-title" title="37.774929"></span>
        </span>
        <span class="longitude">
           <span class="value-title" title="-122.419416"></span>
        </span>
   </span>
   Téléphone : <span class="tel">03 88 00 00 00</span>
   <a href="http://pizza.example.com/" class="url">http://pizza.example.com</a> 
</div>

Description de l'exemple

• Sur la première ligne, class="vcard" indique que le code HTML inclus dans la propriété <div> décrit des coordonnées. Dans cet exemple, il s'agit des coordonnées d'un restaurant.

  Remarque : Le microformat utilisé pour décrire les coordonnées est appelé hCard. En revanche, dans le code HTML, il est appelé vcard. Il ne s'agit pas d'une erreur.

• Sur la deuxième ligne, class="fn org" indique que le code décrit une entreprise plutôt qu'une personne.
• Dans l'exemple, les propriétés de l'organisation, telles que son nom, son URL et son adresse, sont décrites. Pour associer des libellés aux propriétés relatives à l'organisation décrite par vcard, chaque élément contenant l'une de ces propriétés (<span> ou <div>) comporte un attribut class indiquant cette propriété.
• Les propriétés peuvent contenir d'autres propriétés. Dans l'exemple ci-dessus, la propriété adr décrit l'adresse du restaurant et inclut les sous-propriétés street-address, locality et region.
• Cet exemple contient également des modèles de classe "value" des microformats. Sauf cas exceptionnel (par exemple, dans le cas du balisage de la meilleure note possible sur les sites d'évaluation n'utilisant pas une échelle de notation à 5 points), Google n'affiche pas le contenu masqué. Toutefois, l'exemple ci-dessus montre une exception pour les informations de géolocalisation. Voir ci-dessous pour en savoir plus.

Contenu masqué

Il peut s'avérer utile de fournir des informations géographiques précises aux moteurs de recherche, même si vous ne souhaitez pas que celles-ci apparaissent sur votre page. Par exemple, si vous indiquez la latitude et la longitude d'un lieu, vous permettez à Google de le situer correctement sur le plan.

Considérez l'exemple suivant :

<span class="geo">
        <span class="latitude">
           <span class="value-title" title="37.774929"></span>
        </span>
   <span class="longitude">
           <span class="value-title" title="-122.419416"></span>
        </span>
</span>

Si vous incluez les informations de géolocalisation détaillées dans le bloc libellé class="geo", vous indiquez que l'analyseur d'extraits enrichis doit utiliser l'attribut title pour obtenir la latitude et la longitude de l'entreprise. De cette manière, vous communiquez des informations de géolocalisation aux moteurs de recherche et ce, sans afficher ces dernières sur votre page.

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

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Organization"> 
   <span property="v:name">L'Amourita Pizza</span> 
   Adresse : 
     <div rel="v:address">
      <div typeof="v:Address">
         <span property="v:street-address">2 rue du Plan</span>,
         <span property="v:locality">Strasbourg</span>, en
         <span property="v:region">Alsace</span>.
      </div>  
</div>  
<div rel="v:geo">
      <span typeof="v:Geo">
       <span property="v:latitude" content="37.4149"></span>
         <span property="v:longitude" content="-122.078"></span>
      </span>
   </div>  
Téléphone : <span property="v:tel">03 88 00 00 00</span>
   <a href="http://pizza.example.com/" rel="v:url">http://pizza.example.com</a>
</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 de l'espace de noms xmlns:v="http://rdf.data-vocabulary.org/#" à chaque fois que vous balisez des pages relatives à des personnes, des avis ou des lieux. Veillez à utiliser une barre oblique inverse suivie du signe # : xmlns:v="http://rdf.data-vocabulary.org/#".
• typeof="v:Organization", également présent sur la première ligne, indique que le contenu balisé représente une entreprise ou une organisation.
• Chaque propriété de l'organisation (telle que le nom et la région) est associée à un libellé property. Le nom de la propriété est précédé de la lettre v : (<span property="v:name">).
• Nous souhaitons inclure l'adresse du restaurant (typeof="v:Address") dans l'entité typeof="v:Organization". Ici, nous utilisons rel au lieu de property pour indiquer une relation entre L'Amourita Pizza (entité v:Organization) et cette adresse (entité v:Address). Ensuite, nous ajoutons <span typeof="v:Address"></div> pour inclure l'entité correspondant à l'adresse réelle.
• Pour indiquer une URL, utilisez rel au lieu de property, comme dans l'exemple suivant : <a href="http://pizza.example.com" rel="v:url">http://pizza.example.com</a>. "rel" est utilisé pour exprimer la relation entre deux entités. Dans cet exemple, il s'agit d'une entité entreprise et d'une entité page Web.

Contenu masqué

Il peut s'avérer utile de fournir des informations géographiques précises aux moteurs de recherche, même si vous ne souhaitez pas que celles-ci apparaissent sur votre page. Par exemple, si vous indiquez la latitude et la longitude d'un lieu, vous permettez à Google de le situer correctement sur le plan.

Considérez l'exemple suivant :

   <div rel="v:geo">
      <span typeof="v:Geo">
       <span property="v:latitude" content="37.4149"></span>
         <span property="v:longitude" content="-122.078"></span>
      </span>
   </div>

Dans ce cas, l'attribut content indique que l'analyseur d'extraits enrichis doit utiliser la valeur des attributs content pour obtenir la latitude et la longitude de l'entreprise.