1. Petit historique de l'optimisation SEO en HTML
2. Que sont les rich snippets ?
3. Identifier les données reconnaissables par le moteur de recherche
4. Choisir une technologie et un vocabulaire
5. Exemple en utilisant le vocabulaire personnes
6. Exemple en utilisant le vocabulaire de recettes
7. Doit-on utiliser les rich snippets ?

• Des métadonnées (meta tags keywords, description) pour les moteurs de recherche
• Web Sémantique - RDF
• Fils RSS
• Données visibles par les robots de recherche et les utilisateurs
• Microformat
• HTML Sémantique
• HTML5 - Microdata

Le Web sémantique est le Web des données. Le Web sémantique offre une plate-forme par laquelle les données peuvent être partagées et réutilisées par les applications, les entreprises et les communautés.

• Format universel d'échange et de description des données, en plus des documents
• Description de comment les données informatiques correspondent aux objets du monde réel

• URI
• Unicode
• XML
• Espaces de noms
• XML Query
• XML Schema
• Modèle et syntaxe RDF
• RDF Schema
• Ontologies (OWL)
• Règles
• Logique
• Preuve
• S i g n a t u r e
• Chiffre- ment
• Confiance

Sources : W3C + Wikipédia

• Auteurs, articles
• Critiques
• Offres, Recettes, Événements
• Personnes, Affiliations, etc

• Ajouter des annotations aux éléments HTML en utilisant des vocabulaires réutilisables
• La portée des annotations est définie par l'attribut itemscope
• L'espace de nom (namespace) est spécifié par l'attribut itemtype
• La clé est spécifiée par l'attribut itemprop
• La valeur va dépendre de l'élément HTML (href, src ou le texte englobé par l'élément)
• N'est pas réutilisable dans les langages autre que HTML

  <section itemscope itemtype="http://programmeurspolyglottes.net/sociallinks>
    <h1>Liens vers les profils de médias sociaux</h1>
    <section>
      <h1 itemprop="name">Benoit Piette</h1>
      <ul>
        <li><a itemprop="twitter" href="http://twitter.com/benoitpiette">Twitter</a>
        <li><a itemprop="identi.ca" href="http://identi.ca/benoitpiette">Identi.ca</a>
        <li><a itemprop="facebook" href="http://www.facebook.com/benoitpiette">Facebook</a>
        <li><a itemprop="linkedin"
                          href="http://ca.linkedin.com/pub/benoit-piette/6/2aa/571">LinkedIn</a>
      </ul>
    </section>
  </section>
                

• Web sémantique, plus simple que RDF en XML
• Basé sur sujet, objet et prédicat
• Utilise les espaces de noms XML donc problématique en text/html
• Utilise l'attribut property pour spécifier l'utilisation du texte à l'intérieur de l'élément HTML
• Utilise l'attribut rel pour spécifier l'utilisation de attribut href
• Utilisé par Facebook Opengraph et Drupal

  <section typeof="sl:Profiles" xmlns:sl="http://programmeurspolyglottes.net/sociallinks>
     <h1>Liens vers les profils de médias sociaux</h1>
     <section>
       <h1 property="sl:name">Benoit Piette</h1&>
       <ul>
         <li><a rel="sl:twitter" href="http://twitter.com/benoitpiette">Twitter</a>
         <li><a rel="sl:identi.ca" href="http://identi.ca/benoitpiette">Identi.ca</a>
         <li><a rel="sl:facebook" href="http://www.facebook.com/benoitpiette">Facebook</a>
         <li><a rel="sl:linkedin"
              href="http://ca.linkedin.com/pub/benoit-piette/6/2aa/571">LinkedIn</a>
       </ul>
     </section>
  </section>