Accueil / Articles PiApplications. / Le référencement des sites Web

Extensions SEO de schema.org.

Les documents HTML ne portent pas suffisamment d'information sémantique dédiée aux recherches. Pour palier à cet inconvénient, les sociétés Google, Microsoft, Yahoo et Yandex se sont regroupées pour fournir un standard d'enrichissement des documents HTML d'information à destination des moteurs de recherche.

 L'initiative schema.org définit un jeu de propriétés et de types auxquels doivent se conformer les valeurs des propriétés. On enrichit le document HTML en déclarant des propriétés qui soit reçoivent une valeur textuelle, soit décrivent les propriétés d'un autre type.

Il existe ainsi de nombreux schémas pour différents domaines comme :

Une page dédiée permet d'avoir une vue globale de l'ensemble des types.

Il existe 3 manières d'appliquer ces schémas à un document HTML :

  1. Metadata : enrichissement des balises par des attributs spécifiques. Le texte entre la balise d'ouverture et de fermeture représente la valeur d'une propriété.
  2. JSON-LD : il s'agit d'une extension de la syntaxe de script (façon JavaScript) qui fournit au moteur de recherche l'ensemble des informations qui lui sont utiles sans qu'il soit nécessaire de les combiner au code HTML.
  3. RDFa : (Resource Description Framework in attributes) est une recommandation du W3C qui permet d'ajouter des extensions aux attributs des balises HTML.

Lorsque le site existe déjà et d'une manière générale, le mode JSON-LD est souvent le plus simple car il découple le code HTML existant des informations à communiquer aux moteurs d erecherche.

Emploi de Metadata.

L'idée de base repose sur le fait que les navigateurs doivent ignorer les balises et les attributs au sein de ces dernières qu'ils ne reconnaissent pas. De telles balises ou attributs sont dits "transparents". Matadata ajoute des attributs qui viennent enrichir les balises existantes ce qui permet d'informer les moteurs de recherche des particularités du document en cours d'indexation.

L'attribut le plus important est itemscope. Cet attribut ne prend pas de valeur mais indique au moteur de recherche que cette balise et ses enfants contiennent des informations particulières. On fait généralement suivre cet attribut de itemtype={URL du schéma}. L'URL du schéma permet de préciser la nature de la branche étiquetée par itemscope. Par exemple, http://schema.org/Movie indique que cette branche traite de la description d'un film.

Chaque type décrit des propriétés. Si nous reprenons l'exemple de notre schéma http://schema.org/Movie, il définit la propriété actor qui permet de préciser que la balise considérée traite du nom de l'acteur.

Les propriétés sont ajoutées aux attributs de la balise sous la forme itemprop="{nom de la propriété}". Pour déclarer à un moteur de recherche qu'une balise précise le nom d'un acteur, il faudra donc ajouter comme attribut de cette balise : itemprop="actor".

Il est parfois nécessaire d'imbriquer les schémas. Par exemple, un élément peut être étiqueté comme "Movie" puis au sein de cette branche une propriété peut être déclinée dans un autre schéma comme "Person" :

<aside itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <article itemprop="director" itemscope itemtype="http://schema.org/Person">
    Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954)</span>
  </article>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</aside>

Dans cet exemple, on voit que la propriété "director" du schéma "Movie" est elle même déclinée en propriétés "name" et "birthDate" du schéma "Person".

La documentation de schema.org fournit d'autres précisions sur les types de données notamment comme le format de date etc.

Comme on le constate, l'emploi des schémas est assez simple. Néanmoins, il est indispensable de pouvoir vérifier la conformité de l'étiquetage. Actuellement, Google fournit des outils Web dans ce sens (soumis à création de compte et connexion).

Un point important est que faire pour donner au moteur de recherche des informations que le document ne contient  pas ? Dans notre exemple précédent, le document n'affiche pas la moyenne des votes du film ni son meilleur score. L'exemple qui suit montre comment en ajoutant le schéma AggregateRating et en utilisant les balises <meta> on peut parvenir à ce résultat :

<aside itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <article itemprop="director" itemscope itemtype="http://schema.org/Person">
    Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954)</span>
  </article>
  <span itemprop="genre" itemscope itemtype="http://schema.org/AggregateRating">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
  <meta itemprop="ratingValue" content="4" />
  <meta itemprop="bestRating" content="5" />
</aside>

Lorsque l'on veut préciser au moteur de recherche qu'une branche est en lien avec un autre document mais que l'on ne souhaite pas que ce lien apparaisse sous forme hypertexte, il est possible d'utiliser la balise <link> :

<aside itemscope itemtype="http://schema.org/Book">
  <span itemprop="name">The Catcher in the Rye</span>
  <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />
  by <span itemprop="author">J.D. Salinger</span>
</aside>

Enfin, plus vous donner d'information au moteur de recherche et plus vous avez de chances d'améliorer votre score dans l'index.

Exemple JSON-LD.

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "Azur Désinfection",
  "image": "http://www.azur-desinfection.fr/norat.jpg",
  "description": "Prestation de service pour la désinsectisation, la dératisation et le traitement des galles.",
  "mpn": "925872",
  "brand":{
    "@type": "Thing",
    "name": "Provider"
  },
  "aggregateRating":{
    "@type": "AggregateRating",
    "ratingValue": "4.4",
    "reviewCount": "89"
  },
  "offers":{
    "@type": "Offer",
    "priceCurrency": "EUR",
    "price": "100",
    "priceValidUntil": "2014-11-05",
    "itemCondition": "http://schema.org/UsedCondition",
    "availability": "http://schema.org/InStock",
    "seller":{
      "@type": "Organization",
      "name": "Azur Désinfection"
    }
  }
}
</script>

Comme on le voit sur cet exemple, les valeurs de propriétés peuvent faire référence à d'autres types en ouvrant un jeu d'accolades.

Exemple RDFa.

<div vocab="http://schema.org/" typeof="Product">                                                      
  <span property="brand">ACME</span>                                                                   
  <span property="name">Anvil</span>                                                         
  <img propertyu="image" src="anvi.jpg" alt="Anvil logo" />                       
  <span property="description">Parfait pour le voyageur d'affaires.                                                       
  </span>                                                                                              
  Product N°  : <span property="mpn">925872</span>                                                        
  <span property="aggregateRating" typeof="AggregateRating">                                           
    <span property="ratingValue">4.4</span> étoiles, en s'appuyant sur <span property="reviewCount">89            
      </span> avis                                                                                  
  </span>                                                                                              
                                                                                                       
  <span property="offers" typeof="Offer">                                                              
    Regular price : €179.99                                                                             
    <meta property="priceCurrency" content="EUR" />                                                    
    $<span property="price">79.99</span>                                                              
    (Fin des ventes <time property="priceValidUntil" datetime="2014-11-05">                                 
      5 Novembre!</time>)                                                                              
    Disponible chez : <span property="seller" typeof="Organization">                                     
                      <span property="name">Executive</span>                                   
                    </span>                                                                            
    Condition : <link property="itemCondition" href="http://schema.org/UsedCondition"/>Initialement détenu,
      dans d'excellentes conditions                                                                           
    <link property="availability" href="http://schema.org/InStock"/>Disponible ! Commandez maintenant!</span>        
  </span>                                                                                              
</div>

Bien que proche de Metadata, cette approche est plus "normative" mais plus difficile à mettre en œuvre.

(c) PiApplications 2016