ThéorieFonctionnalitésAvancé

Les extraits enrichis Blogger


Les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes !
Référez-vous à la nouvelle théorie du langage XML ou/et posez vos questions sur le forum pour en savoir plus.
Les extraits enrichis Blogger
Les blogs Blogger sont désormais équipés des microdonnées depuis le début de l'année 2012.
C'est l'occasion de faire le point sur les extraits enrichis intégrés dans les modèles : Les microformats, les microdonnées et les relations logiques de liens.
Comment ça fonctionne, Quels sont les extraits utilisés et où se cachent-t'ils dans le code des modèles Blogger ?
Cette publication doit faire l'objet d'une révision


Tour de présentation

Contrairement aux traditionnelles mentions META, les extraits enrichis peuvent être intégrés aussi bien dans le corps du code HTML <body/> que dans l'entête du code HTML <head/>.

Ils permettent d'indiquer aux robots des éléments susceptibles d'être affiché dans les résultats de recherche.

Actuellement, les formats intégrés dans les modèles par défaut, sont :

  • Les microdonnées
  • Les microformats
  • les relations logiques de liens


Éléments Microdonnées Microformats Relations logiques de liens
Titre de l'articleOUIOUI-
URL de l'articleOUINONOUI
Contenu de l'articleOUIOUI-
Date de publication de l'articleOUIOUI-
LocalisationNONNON-
Vignette de l'articleOUINON-
Libellés de l'articleNONNONOUI
Nom de l'auteur de l'articleOUIOUI-
Url du profil de l'auteur de l'articleOUINONOUI
Vignette du profil de l'auteur de l'articleOUINON-
Description du profil de l'auteur de l'articleOUINON-


Les extraits enrichis Blogger


Haut de page


Les microformats

Les microformats sont des conventions simples, que l'on appelle entités. Celles-ci sont utilisées pour décrire un type d'information spécifique.

En règle générale, les microformats utilisent l'attribut class dans les balises HTML (<span> ou <div>) pour pouvoir affecter des noms concis et descriptifs aux entités et à leurs propriétés.

Représentation HTML des microformats utilisés dans les modèles Blogger :


<div class='hfeed'>
  <div class='hentry'>
    <h3 class='entry-title'>TITRE_ARTICLE</h3>
    <div class='entry-content'>CONTENU_ARTICLE</div>
    <span class='published'>DATE_ARTICLE</span>
    <span class='vcard'>
      <span class='fn'>NOM_AUTEUR</span>
    </span>
  </div>
</div>


Dans l’outil testeur de Google, les microformats sont indiqués de cette manière :


Les microformats


Haut de page


Les microdonnées

La spécification HTML5 concernant les microdonnées est un moyen d'associer des libellés à des contenus de manière à décrire un type d'information spécifique.

Les microdonnées utilisent des attributs simples dans les balises HTML (souvent <span> ou <div>) pour pouvoir affecter des noms concis et descriptifs aux éléments et aux propriétés.

Représentation HTML des microformats pour les articles, utilisés dans les modèles Blogger :

<div itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
  <meta content='URL_VIGNETTE' itemprop='image_url'/>
  <meta content='ID_BLOG' itemprop='blogId'/>
  <meta content='ID_ARTICLE' itemprop='postId'/>
  <meta content='URL_ARTICLE' itemprop='url'/>

  <h3 itemprop='name'>TITRE_ARTICLE</h3>
  <div itemprop='description articleBody'>CONTENU_ARTICLE</div>
  <a itemprop='url' href='URL_ARTICLE'>
    <span itemprop='datePublished'>DATE_ARTICLE</span>
  </a>
  <span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
    <meta content='URL_PROFIL_AUTEUR' itemprop='url'/>
    <img src='URL_VIGNETTE_PROFIL_AUTEUR' itemprop='image'/>
    <a href='URL_PROFIL_AUTEUR'>
      <span itemprop='name'>NOM_AUTEUR</span>
    </a>
    <span itemprop='description'>DESCRIPTION_PROFIL_AUTEUR</span>
  </span>
</div>


Dans l’outil testeur de Google, les microdonnées sont indiquées de cette manière :


Les microdonnées


Représentation HTML des microformats pour l'accueil et les pages index, utilisés dans les modèles Blogger :

<div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
  <meta content='TITRE_BLOG' itemprop='name'/>
  <meta content='DESCRIPTION_BLOG' itemprop='description'/>
</div>

Ce schéma est mentionné juste après la balise <body>.


Haut de page


Relations logiques de liens

La relation logique s'introduit dans les balises de liens pour indiquer la nature du lien.

Sur Blogger, cette propriété est utilisée pour spécifier le profil de l'auteur, les pages liées aux index (libellés) et la page de l'article.


Profil de l'auteurrel='author'
Pages libellésrel='tag'
Page de l'articlerel='bookmark'


Haut de page


Dans le code HTML de Blogger

Cette section n'est plus à jour.
Vous pouvez vérifier la présence de ces données et compléter si besoin est.
Pour les modèles dynamiques et la version mobile par défaut, toutes les données sont inclues automatiquement.


  • Tableau de bord
  • Modèle
  • Modifier le code HTML

En rouge : Les microformats.
En bleu : Les microdonnées.
En vert : Les relations logiques de liens.


Mentions globales du blog : Après la balise body ou après le gadget NavBar.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
  <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
    <meta expr:content='data:blog.title' itemprop='name'/>
    <b:if cond='data:blog.metaDescription'>
      <meta expr:content='data:blog.metaDescription' itemprop='description'/>
    </b:if>
  </div>
</b:if>


Dans le gadget "Blog" :


Commande hfeed (2 fois : version web et version mobile)

<div class='blog-posts hfeed'>


Commandes hentry, itemtype et mentions meta (version web)

<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
  <b:if cond='data:post.firstImageUrl'>
    <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
  </b:if>
  <meta expr:content='data:blog.blogId' itemprop='blogId'/>
  <meta expr:content='data:post.id' itemprop='postId'/>


Commandes hentry, itemtype et mentions meta (version mobile posts)

<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
  <b:if cond='data:post.firstImageUrl'>
    <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
  </b:if>
  <meta expr:content='data:blog.blogId' itemprop='blogId'/>
  <meta expr:content='data:post.id' itemprop='postId'/>


Titre de l'article : entry-title et itemprop (2 fois : version web et version mobile posts)

<h3 class='post-title entry-title' itemprop='name'>


Titre de l'article : entry-title et itemprop (version mobile index)

<h3 class='mobile-index-title entry-title' itemprop='name'>


Contenu de l'article : entry-content et itemprop (version web)

<b:if cond='data:blog.metaDescription == &quot;&quot;'>
  <!-- Then use the post body as the schema.org description,
      for good G+/FB snippeting. -->
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
<b:else/>
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
</b:if>


Contenu de l'article : entry-content et itemprop (version mobile)

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Auteur de l'article : vcard fn, itemprop, rel (2 fois : version web et version mobile)

<span class='post-author vcard'>
  <b:if cond='data:top.showAuthor'>
    <data:top.authorLabel/>
      <b:if cond='data:post.authorProfileUrl'>
        <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
          <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
          <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
            <span itemprop='name'><data:post.author/></span>
          </a>
        </span>
      <b:else/>
        <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
          <span itemprop='name'><data:post.author/></span>
        </span>
      </b:if>
  </b:if>
</span>


Profil de l'auteur de l'article : itemprop, rel (version web)

<b:if cond='data:post.authorAboutMe'>
  <div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
    <b:if cond='data:post.authorPhoto.url'>
      <img expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>
    </b:if>
    <div>
      <a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
        <span itemprop='name'><data:post.author/></span>
      </a>
    </div>
    <span itemprop='description'><data:post.authorAboutMe/></span>
  </div>
</b:if>


URL de l'article et date de publication : published, itemprop, rel (2 fois : version web et version mobile)

<span class='post-timestamp'>
  <b:if cond='data:top.showTimestamp'>
    <data:top.timestampLabel/>
  <b:if cond='data:post.url'>
    <meta expr:content='data:post.url' itemprop='url'/>
    <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
  </b:if>
  </b:if>
</span>


Libellés de l'article : rel

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>


Pour ajouter d'autres éléments, comme par exemple des images, vidéos, etc, je vous renvoie vers le centre d'aide Google pour Webmasters.


Haut de page


Analyser son blog avec l’outil testeur Google

Pour vérifier si votre blog est bien équipé des extraits enrichis, entrez l'url d'un article de votre blog et cliquez sur "analysez".

Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte TC :
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

DéveloppementsMulti-versions
Facebook : Bouton J'aime [Like button]
Populaire
ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire
DéveloppementsFichiers XML
Résumés des articles avec images réactives [Pack 2016]
Populaire