SEO + HTML5
HTML5 - sémantique

Formation HTML5: SEO + HTML5 -- Table des matières

  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 ?

Il était une fois ...

Une définition du Web Sémantique

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.

Sources : W3C + Wikipédia

Les extraits enrichis

Texte enrichi par du balisage sémantique utilisant un vocabulaire reconnu qui permet d'afficher de l'information contextuelle dans des résultats de recherche.

Identifier les données reconnaissables par le moteur de recherche

Google accepte actuellement les extraits enrichis pour les personnes, les événements, les avis, les produits, les recettes et les rubriques d'un fil d'ariane.
http://support.google.com/webmasters/bin/answer.py?hl=fr&answer=1211158&topic=1088472&ctx=topic

Choisir une technologie et un vocabulaire

Microdata


  <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>
                

HTML5 + RDFa


  <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>
                

Autres éléments HTML5

Avec <link> ou <a>

Des exemples du code et comment tester

Doit-on utiliser les rich snippets ?