Une introduction au balisage de données structurées

Le terme Données structurées fait référence à des informations formatées de manière compréhensible pour tous. Les moteurs de recherche tels que Google, Bing et Yahoo utilisent des données structurées (mises en œuvre dans des pages Web) pour affiner les résultats de la recherche, filtrer avec une plus grande précision et améliorer la manière dont les résultats sont affichés. Tout cela permet aux utilisateurs de trouver plus facilement les informations qu’ils recherchent..

Pourquoi avons-nous besoin de données structurées??

Les données structurées deviennent une partie de plus en plus importante de l'écosystème Web. - Google

Les pages Web ont une signification inhérente que les utilisateurs comprennent quand ils les lisent. Les moteurs de recherche, en revanche, ont une compréhension limitée du contenu des pages Web. Par exemple, supposons que vous ayez une page Web sur «jaguar». Un moteur de recherche peut explorer la page, mais ne sait pas nécessairement ce que signifie le mot "jaguar". «Jaguar» peut désigner l'animal ou le fabricant de la voiture..

Les moteurs de recherche ont donc du mal à afficher les résultats de recherche pertinents pour un utilisateur. Les humains peuvent déduire la signification d'un mot du contexte de la page Web, mais les moteurs de recherche ont des difficultés à le faire..

Avec des données structurées, vous pouvez aider les moteurs de recherche à comprendre votre contenu et à l'afficher de manière utile et pertinente..

Comment les données structurées sont-elles utilisées??

Les données structurées présentent un avantage majeur: la visibilité. Les moteurs de recherche peuvent utiliser les informations stockées dans des données structurées pour générer des extraits enrichis. Les extraits enrichis fournissent à l'utilisateur des informations détaillées relatives à leurs requêtes spécifiques..

Vous avez probablement déjà rencontré des exemples de ces extraits enrichis. Si ce n'est pas le cas, consultez le SERP de Google pour les lasagnes. Je suis sûr que vous remarquerez les images à côté de certains résultats de recherche. Ces images ont été ajoutées grâce aux microdonnées. Ils peuvent être utilisés pour fournir aux moteurs de recherche des informations supplémentaires sur la page Web, dans ce cas une image, mais vous pouvez également ajouter une note, le temps de cuisson, la quantité de calories, etc..

Ces extraits riches font ressortir certains résultats, générant souvent un taux de clics (CTR) plus élevé. Certains sites Web ont signalé une augmentation de 30% du CTR après la mise en œuvre de données de balisage structurées. Ça sonne bien, hein?

Types de balisage de données structurées

Il existe trois types de balisage de données structurées:

  • Microdonnées
  • Microformats
  • RFDa

Avant de commencer à explorer ces types de balisage, gardez à l’esprit que vous ne pouvez pas utiliser plus d’un type de données structurées sur une seule page Web, car cela risquerait de brouiller les moteurs de recherche. Nous devons donc choisir entre ces trois options. Mais lequel convient le mieux à notre site Web? Jetons un coup d'oeil à chacun d'eux individuellement.

Si vous voulez tout savoir (et je veux dire absolument tout) sur les différences techniques entre RDFa, microdonnées et microformats, je vous suggère de lire Une comparaison Uber de RDFa, Microdonnées et Microformats de Manu Sporny, Présidente du groupe au World Wide Web Consortium qui a créé RDFa.

Microdonnées

Les microdonnées sont probablement le type de données structurées le plus populaire, en grande partie grâce au site Web Schema.org. Sur ce site, une initiative des trois plus grands moteurs de recherche (Google, Bing et Yahoo), vous trouverez une collection partagée de schémas (microdonnées) que vous pouvez utiliser..

Le balisage des microdonnées comprend 3 éléments: articlescope, type d'élément et itemprops. L'attribut itemscope contient des informations sur l'élément. En ajoutant itemscope à votre code HTML, vous indiquez que le contenu de l'élément choisi concerne un élément particulier..

Concert Foo Fighters

Ajoutez l'élément itemtype pour identifier le type de contenu. Utilisez cet attribut immédiatement après l'itemscope.

Concert Foo Fighters

Dans cet exemple, itemscope informe les moteurs de recherche que l'élément contenu dans la div est en fait un événement. Itemtypes sont toujours ajoutés en tant qu'URL. Vous pouvez trouver une liste complète de tous les types d’articles sur Schema.org.

Maintenant que les moteurs de recherche savent que notre page concerne un événement, nous pouvons lui fournir des informations supplémentaires sur cet événement. Pour cela nous utilisons le itemprop attribut.

Si nous voulons identifier le lieu du concert des Foo Fighters, nous ajoutons simplement itemprop = "emplacement" à l'élément contenant le nom de l'emplacement (encore une fois, visitez schema.org pour obtenir la liste complète de toutes les propriétés que vous pouvez associer à un type d'élément).

Concert Foo Fighters. Le concert aura lieu à Madison Square Garden.

Parfois, vous devrez ajouter des éléments supplémentaires pour pouvoir ajouter des détails itemprop. Nous utilisons les balises, car, par défaut, elles n’influencent pas la présentation du texte en ligne par un navigateur.

Dates et heures

Les dates et les heures peuvent être difficiles à interpréter. La date du 08/10/12 par exemple, est-ce que cela signifie le 8 octobre 2012? Ou le 10 août 2012? Ou le 12 août 2008? Déroutant, n'est-ce pas? Les moteurs de recherche ont le même problème.

Afin de leur fournir l'heure et la date correctes, nous devons ajouter un attribut 'datetime'. Cet attribut spécifie une date au format AAAA-MM-JJ.

Le code ci-dessus est pour la date 1 avril 2011.

L'attribut datetime peut également être utilisé pour spécifier une heure. Les temps sont précédés de la lettre T et peuvent être fournis avec une date.

Le code ci-dessus affiche la date et l'heure suivantes: 8 mai 2011, 19h30. Si nous ajoutons la balise de date et heure à notre exemple précédent, nous pourrions obtenir quelque chose comme ceci:

Concert Foo Fighters. Le concert aura lieu à Madison Square Garden sur .

Avec ces balises simples, nous pouvons dire aux moteurs de recherche que le 8 mai 2011 à 19h30, un concert de Foo Fighters aura lieu au Madison Square Garden. Nous pouvons utiliser d'autres attributs pour baliser des pages Web sur des livres, des films, des organisations, des recettes, etc..

Informations implicites

Les informations ne sont pas toujours visibles pour les utilisateurs et les moteurs de recherche. Certaines informations peuvent être incorporées dans un objet multimédia ou ne pas être explicitement indiquées sur une page. Dans ce cas, vous pouvez utiliser des balises META pour spécifier ces informations..

Disons que nous avons une vidéo sur notre page et que nous voulons que la durée de la vidéo apparaisse comme un extrait enrichi. Comme la durée de la vidéo n’est pas fournie sous forme de texte sur notre page, nous devons utiliser une balise META pour ajouter cette information. Par exemple:

Le code ci-dessus indique aux moteurs de recherche que la vidéo dure 2 minutes et 40 secondes (n'oubliez pas que nous utilisons le format ISO8601 pour les dates et les heures). Cette information apparaîtra comme un extrait riche dans les résultats de la recherche.

Microformats

Les microformats étendent les balises HTML conventionnelles avec des informations sémantiques. Afin d'ajouter des données structurées à une page Web avec des microformats, vous utiliserez principalement l'attribut de classe. Cela fait des microformats le moyen le plus simple et le plus propre d’ajouter des données structurées..

Les types les plus populaires de microformats sont hCard, hCalendar et hReview. hCard est utilisé pour les personnes, les entreprises et les organisations. hCalendar peut être utilisé pour ajouter des informations sur les événements. Et avec hReview, vous pouvez consulter des restaurants, des livres, des films, etc..

Disons que nous avons une page pour un match de football. Tout d’abord, nous devons dire aux moteurs de recherche que cette page Web concerne un événement en faisant référence à hCalendar dans .

 

Nous devons ensuite indiquer aux moteurs de recherche quelle partie de notre page Web traite de l'événement. Pour cela nous utilisons la classe vevent.

Tout ce que contient notre

donne au moteur de recherche plus d’informations sur l’événement (mais vous pouvez aussi utiliser d’autres tags tels que ou

si nécessaire). Si nous voulons ajouter le titre de notre événement, nous utilisons la propriété summary. Le résumé est une propriété requise pour un événement.!

Real Madrid - FC Barcelone

En utilisant la propriété location, nous pouvons spécifier où la correspondance aura lieu.

Real Madrid - FC Barcelone à Camp Nou

Avec ce code, nous indiquons aux moteurs de recherche que le match entre le Real Madrid et le FC Barcelone aura lieu au Camp Nou. Une autre propriété requise pour hCaldendar est dtstart. Il décrit la date et l'heure de l'événement.

Real Madrid - FC Barcelone à Camp Nou sur

Ces balises fournissent aux moteurs de recherche plus d'informations sur le match de football entre le Real Madrid et le FC Barcelone, telles que le lieu, la date et l'heure..

Pour plus d'informations sur les microformats, consultez le wiki microformats.

RFDa

RFDa utilise un certain nombre de propriétés pour identifier des entités (telles qu'une personne ou un événement). Il utilise des balises HTML, telles que

et , décrire des entités. Les fonctionnalités plus avancées de RFDa peuvent être difficiles pour les webmasters qui ne sont pas des experts en données structurées..

RFDa a quatre attributs de base: type de téléphone, Type de, propriété et Ressource.

Le premier attribut, voctype, définit le vocabulaire que nous allons utiliser pour nos données structurées. Grâce à cet attribut, les moteurs de recherche savent où trouver les informations sur ces données structurées..

Bonjour, je m'appelle John Doe!

Avec le code ci-dessus, nous spécifions que le vocabulaire de nos balises RFDa peut être trouvé sur schema.org (par exemple). Il existe plusieurs autres vocabulaires, tels que LOV et Dublin Core. Nous devons maintenant spécifier le type de données. S'agit-il d'informations sur une personne, un événement, un restaurant…? Pour cela, nous utilisons l'attribut typeof.

Bonjour, je m'appelle John Doe!

Les moteurs de recherche savent que nous parlons d'une personne, mais ils ne savent pas grand chose de lui. En ajoutant des propriétés, nous pouvons leur donner plus d'informations sur cette personne..

Salut je m'appelle John Doe!

Le code ci-dessus nous indique que cette page Web concerne une personne nommée John Doe. Nous pouvons ajouter un identifiant unique à ces données structurées pour identifier cette personne en ajoutant l'attribut de ressource.

Salut je m'appelle John Doe!

Cet identifiant unique est utile si nous souhaitons parler de John Doe sur un autre site Web. En ajoutant l'id à la fin de l'URL de cette page Web (par exemple, http://example.com/employees#john), nous disposons d'une référence pour toutes les informations sur John Doe..

Pour plus d'informations sur la mise en œuvre de RFDa, consultez la documentation RDFa sur w3.org.

Pourquoi je préfère les microdonnées

Je préfère utiliser des microdonnées pour mettre en œuvre des données structurées. Je ne dis pas du tout que les microdonnées sont la meilleure option (il y a des avantages et des inconvénients pour chaque type mentionné), mais pour moi, les microdonnées offrent le plus d'avantages..

Par rapport aux microdonnées, RDFa a un peu de mal à apprendre s’agissant des entités imbriquées. Et la mise en œuvre de RFDa dans des pages non-XHTML peut être problématique en raison de certains attributs et valeurs..

L'inconvénient des microformats est que, si vous voulez l'adapter à un site web, vous aurez probablement
renommer beaucoup de classes CSS et

et Mots clés.

Pour moi, les microdonnées représentent le meilleur des deux mondes. c'est simple et facile à mettre en œuvre. Les microdonnées sont également recommandées par Google. Par conséquent, les personnes qui souhaitent suivre les directives de Google peuvent choisir de microdonnées plutôt que les microformats et les RFDa.

Tester votre balisage

Vous avez passé d'innombrables heures à ajouter des données structurées à votre site Web. Mais comment savoir s'il est correctement implémenté? C'est dans cet outil que l'outil de test Rich Snippet de Google est très utile. Sur ce site Web, vous pouvez prendre une URL ou un morceau de code HTML et tester le balisage de données structurées. Cela peut vous donner une idée de la façon dont la page apparaîtra dans les résultats de la recherche..

Outils

Nous terminons cet article par un ensemble d’outils qui pourraient vous être utiles lorsque vous ajoutez des données structurées à votre site Web..

  • Schema.org Creator est un moyen facile de générer des microdonnées. Choisissez un type de contenu (personne, événement, compte rendu, etc.), remplissez les champs obligatoires et avec le clic d'un bouton, vous avez le code HTML correct.
  • Si vous avez un blog ou un site Web Wordpress, vous pouvez utiliser ce plugin Wordpress très pratique. Le plugin Schema Creator, développé par Raven, facilite vraiment l’ajout de données structurées à vos pages Web. L'un des avantages de ce plugin est qu'il utilise des codes courts. Donc, vous n'avez pas à ajouter des microdonnées manuellement.
  • Microformat a plusieurs créateurs pour hCard, hCalendar et hReview. Utilisez ces outils pour générer rapidement des microformats pour votre site web.
  • RDFa Play est probablement le meilleur outil si vous souhaitez implémenter RFDa. Il vous permet d'éditer et de déboguer votre code. De plus, il est même livré avec un visualiseur de données!

Conclusion

À l'avenir, nous verrons des données beaucoup plus structurées. Il permet aux moteurs de recherche d'interpréter le contenu plus efficacement et de générer des extraits riches. Tout cela se traduit par un taux de clics naturellement plus élevé pour les pages où des données structurées sont implémentées..

Faites-nous savoir vos pensées dans les commentaires; profiterez-vous des données structurées de sitôt? Avez-vous déjà de l'expérience dans ce domaine??