Des microformats pour améliorer votre référencement

microformat-referencement

Ce n’est pas un secret, Google aime les site légers, avec du contenu et codé correctement. Afin de donner plus d’informations à l’utilisateur qui effectue une recherche, si Google interprète correctement le contenu de vos pages, il pourra créer des extraits enrichis, c’est-à-dire des informations détaillées visant à aider les internautes lors de recherches spécifiques. Une photo et la note moyenne pour une recette, la liste des titres pour un album musical ou encore la note moyenne et l’ordre de prix pour un restaurant. Ces extraits enrichis aident les internautes à savoir si votre site est pertinent dans le cadre de leur recherche et peuvent entraîner une hausse des clics sur vos pages.

[symple_heading type= »h2″ title= »Quelques lignes de code. » margin_top= »20px; » margin_bottom= »20px » text_align= »left » font_size= » »]

Je vais vous montrer comment ajouter le formatage nécessaire à votre code pour implémenter des extraits enrichis, et ainsi utiliser les microformats pour améliorer votre référencement. Partons du principe que vous écrivez un magazine de recettes. Il existe un format pour les décrire, dont vous pouvez lire la description ici. Si vous déroulez la page jusqu’en bas, vous pouvez voir un exemple de code HTML assez basique :

	<div itemscope itemtype="http://schema.org/Recipe">
  <span itemprop="name">Mom's World Famous Banana Bread</span>
  By <span itemprop="author">John Smith</span>,
  <meta itemprop="datePublished" content="2009-05-08">May 8, 2009
  <img itemprop="image" src="bananabread.jpg" />

  <span itemprop="description">This classic banana bread recipe comes
  from my mom -- the walnuts add a nice texture and flavor to the banana
  bread.</span>

  Prep Time: <meta itemprop="prepTime" content="PT15M">15 minutes
  Cook time: <meta itemprop="cookTime" content="PT1H">1 hour
  Yield: <span itemprop="recipeYield">1 loaf</span>

  <div itemprop="nutrition"
    itemscope itemtype="http://schema.org/NutritionInformation">
    Nutrition facts:
    <span itemprop="calories">240 calories</span>,
    <span itemprop="fatContent">9 grams fat</span>
  </div>

  Ingredients:
  - <span itemprop="ingredients">3 or 4 ripe bananas, smashed</span>
  - <span itemprop="ingredients">1 egg</span>
  - <span itemprop="ingredients">3/4 cup of sugar</span>
  ...

  Instructions:
  <span itemprop="recipeInstructions">
  Preheat the oven to 350 degrees. Mix in the ingredients in a bowl. Add
  the flour last. Pour the mixture into a loaf pan and bake for one hour.
  </span>

  140 comments:
  <meta itemprop="interactionCount" content="UserComments:140" />
  From Janel, May 5 -- thank you, great recipe!
  ...
</div>
  1. Première étape, ligne 4, ajoutez dans la balise div, les informations suivantes :
    itemscope itemtype="http://schema.org/Recipe"
  2. Ligne 6, ajoutez :
    itemprop="name"
  3. À partir de la ligne 14, (après avoir modifié un peu le code pour être plus clair), entourez chaque ingrédient par la balise
    <span itemprop="ingredients"></span>
  4. Ligne 31, remplacez la balise
    <p>

    par

    <p itemprop="description">
  5. Ligne 42, ajoutez l’information itemprop="image"
  6. Enfin, ligne 44, entourez le texte « 4 personnes » par
    <span itemprop="recipeYield">4 personnes</span>

Le résultat :

    <div id="product-page">

      <div id="gallery-top"></div>
      <div class="region region-content block block-system block-odd block-count-4 block-region-content block-inner clearfix block-content content product-page" id="block-system-main">
        <div class="product-content" itemscope="" itemtype="http://schema.org/Recipe">
          <div class="product-inner">
          <img itemprop="image" src="http://www.greengiantfresh.fr/sites/default/files/salade_americaine-geant_vert-recette-.jpg" width="250" alt="" />
            <h1 class="product-title" itemprop="name">
              Salade a l'americaine
            </h1>
            <ul class="product-info">
              <li>
                <h3>
                  Ingrédients
                </h3>
                <ul>
                  <li itemprop="ingredients">145g de roquette G&eacute;ant Vert
                  </li>
                  <li itemprop="ingredients">1 boite de mais Geant Vert
                  </li>
                  <li itemprop="ingredients">Des de poulet nature ou panes
                  </li>
                  [...]
                </ul>
              </li>
              <li>
                <h3>
                  Préparation
                </h3>
                <p itemprop="description">
                  Sur un lit de salade, disposer des brins de carotte rapees, des grains de mais et des morceaux de coeurs de palmier<br />
                  Assaisonner d'une sauce vinaigrette preparee avec 1 yaourt brasse delaye dans 2 cuilleres a soupe de vinaigre de cidre, 1 cuillere a cafe de moutarde de Dijon, et 2 cuilleres à
                  soupe d'huile de noix<br />
                  Parsemer de quelques tomates cerise et de des de poulet pane. Degustez !
                </p>
              </li>
            </ul>
          </div><!-- product-inner -->
        </div><!-- product-content -->
        <div class="additional-product-info recipes">

          <ul>
            <li>
              <span itemprop="recipeYield">4 personnes</span>
            </li>
            <li>
              <a href="http://www.greengiantfresh.fr/produits/feuille-de-chene-et-coeur-de-laitue">PRODUIT</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

J’ai déplacé l’image au dessus du titre afin qu’elle s’affiche bien dans l’extrait sur Google.
Il existe de nombreux autres champs utiles pour votre recette. La note, par exemple, caractérisé par les « reviews » vous permettra d’afficher les étoiles correspondantes directement dans les résultats de Google.

Vous pouvez faire la comparaison entre les 2 pages :

Comme vous pouvez le voir, une image est par exemple maintenant présente. S’il n’y avait qu’un argument à avoir, il suffirait. Une belle image entraînera plus de clics. Si vous déroulez la page, vous pourrez voir les informations d’ingrédients, de préparation.

Vous avez des idées, des techniques? Laissez moi un commentaire!

Mat_

Au départ on sort avec un diplôme d’ingénieur de l’ESIL (devenu Polytech’Marseille) en Informatique, réseau et multimédia, spécialisé dans les Systèmes d’Informations et Services E-Business.
En même temps on bosse, on développe, on apprend. Et maintenant on entreprend.

Passionné de nouvelles technologies, et évangéliste de WordPress, j’aime découvrir, tester, rechercher.

Vous aimerez aussi...

Suivez Kune.fr sur les réseaux sociaux !

Kune.fr est votre site de ressources web. Vous y trouverez de nombreux outils utiles pour le web.
Alors n'hésitez plus, aimez notre page !

  • Ressources Wordpress, tutoriels, plugins et thèmes
  • Ressources design, packs d'icônes, kits UI ...
Fermer cette popup
%d blogueurs aiment cette page :