Vous ne le savez peut-être pas, mais je ne suis pas très technique. C’est probablement aussi votre cas (et oui c’est comme ça !).

Je ne suis pas non plus un développeur avec des compétences en SEO. Je ne sais même pas écrire du code et je commence tout juste à pouvoir le lire.

L’ajout de données structurées, ou encore d’un schéma de balisage, à mon site est l’une des choses les plus techniques que j’ai fait jusqu’à aujourd’hui.

Je l’ai fait parce que depuis des mois Laurent insiste toujours lourdement :

Mettez en place les données structurées. Ca va donner un coup de boost à vos efforts de référencement naturel (SEO). Vous allez améliorer votre classement dans les pages de résultats de recherche de Google.

J’avoue qu’il faut se faire un peu souffrance pour se lancer dans les données structurées.

Mais maintenant que mon schéma de balisage est mis en place, je vous affirme qu’il n’y a pas pas besoin de savoir comment coder. Par contre, avoir quelques rudiments en matière de développement Web simplifie l’implémentation du schéma de balisage.

Les données structurées : pas si compliqué que ça !

J’insiste sur le fait qu’il s’agit d’un aspect plutôt technique du référencement Web, qualifié même de SEO Technique par les experts.

Mais cela vaut vraiment le coup de s’y intéresser. Vous allez gagner en compétences, ce qui va aider votre site à gagner des places dans le classement des pages de résultats de Google.

Je sais que les termes « schéma de balisage » et « données structurées » paraissent compliqués d’autant plus que la plupart des centres d’aide sur le sujet sont en anglais.

En fait, ça semble complexe, mais je vous assure que tout le monde peut les mettre en place.

C’est le but que je me suis fixé en écrivant cet article : que vous puissiez mettre en place les données structurées sur votre site une fois avoir lu cet article.

Alors, rentrons dans le vif sujet et définissons les données structurées.

C’est quoi une donnée structurée ?

Comment Ajouter Des Données Structurées À Votre Site Web ?

Les données structurées, également appelées schéma de balisage, sont un type de code qui facilite l’exploration, l’indexation et l’affichage de votre contenu par les moteurs de recherche.

Les moteurs de recherche utilisent les données structurées pour mieux comprendre vos contenus Web. Sans ce schéma de balisage, les moteurs de recherche se contentent seulement afficher vos contenus Web.

Voici un exemple pour être plus claire.

Evidemment, vous avez mis vos informations de contact sur le site web de votre entreprise. J’imagine qu’elles se trouvent dans le pied de page de votre site Web :

  • Le nom de votre entreprise,
  • Son adresse postale,
  • Son numéro de téléphone,

Tout ceci est facilement compréhensible pour un être humain.

Par contre, les moteurs de recherche vont avoir plus de mal pour saisir ce que signifient ces données brutes.

Avec un schéma de balisage, vous indiquez aux moteurs de recherche que vos informations de contact sont effectivement des informations de contact et pas seulement de simples textes.

Cela se fait avec ce bout de code (source Schema.org) :

Comment Ajouter Des Données Structurées À Votre Site Web ?

Ooops, ça semble complexe n’est-ce-pas ?

Ne fuyez pas ! Je vous promets que cette complexité va disparaître au cours de cet article.

Vous l’avez compris avec les données structurées, vous aidez les moteurs de recherche à analyser votre contenu plus facilement.

C’est très important. En effet, si les moteurs de recherche explorent facilement votre site Web (ou plus facilement que celui de vos concurrents), votre référencement naturel (SEO) sera meilleur.

Les données structurées sont utiles pour vos internautes

J’ai souvent affirmé : “N’écrivez pas pour Google mais pour vos lecteurs !

Ca peut paraître surprenant mais les données structurées ont été conçues pour aider aussi les internautes.

Le schéma de balisage est l’équivalent d’une carte de visite super-détaillée qui affiche vos informations clairement.

Cela semble complexe …

Comment Ajouter Des Données Structurées À Votre Site Web ?

… mais au final c’est fait pour aider des gens comme vous et moi.

Quelques exemples vus par les internautes

Vous ne vous êtes jamais demandé comment Google faisait pour compléter les informations non renseignées dans votre Google My business. C’est en partie avec les données structurées.

Comment Ajouter Des Données Structurées À Votre Site Web ?

Vous avez surement déjà vu dans les pages de recherche des résultats avec une URL formatée avec des > :

Comment Ajouter Des Données Structurées À Votre Site Web ?

C’est encore les données structurées.

Mais cela ne s’arrête pas là, on peut arriver à baliser des informations telles que :

  • Le nom et le prix d’un produit,
  • Les revues associées.

Comment Ajouter Des Données Structurées À Votre Site Web ?

Les données structurées jouent sur le contenu des pages de résultats des moteurs de recherche. Elles fournissent des informations supplémentaires sur le contenu de la page.

Et, les internautes apprécient. Leur attention est renforcée par ces informations bien utiles présentes à côté des résultats de recherche sur Google. De cette manière, le taux de clics a tendance à augmenter et le taux de rebond à diminuer.

Donc, vous n’écrivez pas pour des machines. Vous simplifiez la vie des moteurs de recherche avec des détails supplémentaires sans modifier votre contenu de quelque façon que ce soit.

J’insiste : “DES” moteurs de recherches … En effet, les spécifications des données structurées ont été élaborées par Google, Microsoft et Yahoo. Donc, vous mettez votre schéma de balisage et il est opérationnel pour ces 3 moteurs de recherche ! D’une pierre, trois coups !

Attention : N’essayez pas de lire les spécifications des données structurées. Il y a des milliers de termes. C’est abscons, indigeste et rebutant !

C’est impossible de tout mémoriser.

Et je vous rassure tout de suite. Vous n’avez pas besoin d’apprendre par coeur toutes ces spécifications pour les utiliser sur votre site.

En fait, vous allez pouvoir commencer à utiliser des données structurées dès la fin de cet article.

Néanmoins, il y a quelques éléments de base à savoir. Ensuite, ça se fait les doigts dans le nez 🙂

Ce que vous devez savoir (et ce que vous ne devez pas)

Bonne nouvelle : vous n’avez rien à mémoriser. Juste à comprendre le principe. Ensuite, vous pouvez commencer à utiliser des données structurées dès aujourd’hui.

Evidemment, avec l’aide de Laurent et Mathieu, nous vous avons un peu débroussaillé le terrain.

Alors, on dit quoi ? Merci Audrey ! 🙂

Voici ce qu’il faut savoir :

1. Le format des données structurées à utiliser

Il existe 3 principaux formats de données structurées.

(Source Google)

Google préconise le JSON-LD. Ne vous posez pas de questions, c’est le format qu’il faut choisir.

Mais, c’est utile de savoir que les formats “microdata” et “RDFa” existent aussi. Des fois que, lors d’une recherche sur Google ou dans une extension WordPress, vous tombiez par hasard sur des données structurées. Assurez-vous juste qu’elles soient bien au format “JSON-LD” et pas dans un autre format.

2. Les 3 termes les plus courants du schéma de balisage

Comment Ajouter Des Données Structurées À Votre Site Web ?

Vous pouvez probablement vous passer de connaître les aspects suivants. Mais si vous prenez un peu de temps pour apprendre ces quelques termes, vous allez :

  • Gagner en compétence,
  • Eviter de faire des erreurs,
  • Et même pouvoir optimiser votre schéma de balisage.

J’ai récupéré les copies d’écrans ci-dessous sur la bible de Schema.org et repris leur exemple avec le film Avatar, ce qui explique l’image de la belle princesse Na’vi Neytiri ci-dessus.

A) itemscope : l’étendue de l’élément

L’étiquette “itemscope” est surement le terme le plus utilisé dans un schéma de balisage.

“Itemscope” sert à regrouper certaines parties d’une page Web en bloc pour indiquer aux moteurs de recherche qu’il concerne le même sujet.

Comment Ajouter Des Données Structurées À Votre Site Web ?

Dans la copie d’écran ci-dessus, vous avez un bout de code HTML classique qui décrit le film Avatar avec :

  • Son réalisateur James Cameron,
  • Le type de film (Science fiction),
  • Un lien vers la bande annonce.

Comment Ajouter Des Données Structurées À Votre Site Web ?

Dans la copie d’écran ci-dessus, le seul changement qui a été fait est le rajout de l’étiquette “itemscope” marquée en gras.

Avec ce tout petit changement, les moteurs de recherche savent que toutes les informations entre <div> et le prochain </div> traitent du même sujet.

Juste en ajoutant ces 9 lettres “itemscope”, ces quelques lignes sont devenues un même bloc pour Google, Bing et autre Yahoo.

B) Itemtype : le type d’élément

“Itemtype” caractérise le bloc de contenu étiqueté par un “itemscope”.

Pour notre exemple avec Avatar, “itemtype” indique aux moteurs de recherche que ce bloc parle d’un film.

Et voilà ce que ça donne :

Comment Ajouter Des Données Structurées À Votre Site Web ?

Il y a des centaines d’itemtype pour caractériser des recettes de cuisine, des voitures, des billets d’avion, … la liste est consultable ici.

C) itemprop : les propriétés de l’élément

“Itemprop” attribue une propriété à chacun des différents contenus d’un même bloc.

Toujours avec notre exemple avec le film Avatar, les “itemprop” indiquent aux moteurs de recherche que :

  • Avatar est le nom du film
  • James Cameron son réalisateur,

Comment Ajouter Des Données Structurées À Votre Site Web ?

C’est pourquoi, il existe des milliers de “itemprop” que vous pouvez utiliser.

Avec tous ces termes, vous entrez des détails extrêmes, ce qui est une bonne chose pour les moteurs de recherche et donc pour votre référencement.

En effet, les moteurs de recherche peuvent organiser votre contenu non seulement plus facilement, mais aussi plus précisément.

3. Les lignes directrices de données structurées de Google

Vu que ça plait aux internautes, Google cherche à faciliter et à généraliser l’utilisation des données structurées. Il a même publié un centre d’aide en français.

Vous voulez plaire à Google ! Alors implémentez un schéma de balisage.

Par contre, vous devez connaître les règles qu’il nous impose.

Évidemment, il s’agit de bien utiliser les bons termes pour décrire votre contenu.

En d’autres termes, n’utilisez pas “recipe” qui est l’itemtype pour décrire une recette de cuisine si vous parlez d’un film et vice et versa …

Il est hors de question d’utiliser des techniques de “Black Hat“ avec ces données structurées. J’imagine que Google verrait ça d’un très mauvais oeil.

Rappelez-vous, le but de l’utilisation de données structurées est d’aider les moteurs de recherche à mieux afficher votre contenu pour les internautes.

Aidez les moteurs de recherche et ils vous aideront en retour. Cela veut dire plus de visibilité et donc naturellement plus de trafic et, si votre site est performant, plus de clients et de prospects.

Avant de passer à l’implémentation, voici un jeu de diapositives par Sébastien Monnier (c’est le président du SEO Camp) qui résume bien ce tout ce que j’ai écrit jusqu’ici.

Comment ajouter des données structurées sur votre site

Comment ajouter des données structurées sur votre site

Passons maintenant au moyen pour ajouter un schéma de balisage à votre site.

Tout dépend de comment vous vous voulez vous y prendre. La mise en place des données structurées peut même être un processus assez long.

Cela dépend essentiellement de 3 facteurs :

  • Le système que vous utilisez pour publier votre site : WordPress, Joomla, Drupal, …
  • Le niveau de contrôle que vous voulez avoir,
  • Et enfin, le niveau de précision que vous souhaitez atteindre.

Je vais ci-dessous décrire 3 options pour mettre en œuvre le schéma de balisage :

  • L’ajout manuel,
  • L’outil d’aide au balisage fourni par Google,
  • Une extension WordPress “magique” qui le fait de manière transparente.

Option 1 : ajouter manuellement son schéma de balisage

Comment Ajouter Des Données Structurées À Votre Site Web ?

Je ne recommande pas cette option sauf si vous parlez couramment le langage php … Bref que vous maîtrisez le développement Web.

Cette option consiste à ajouter manuellement les données structurées dans le code source de votre site Web.

Attention : vous pouvez faire pas mal de dégâts si vous ne le faites pas correctement.

Mais saisir manuellement vos données structurées présente ses avantages :

  • D’une part, vous pouvez baliser autant de blocs/contenus que vous voulez,
  • D’autre part, vous pouvez vous assurer que tout est fait exactement comme vous le souhaitez.

Donc, c’est une option à considérer si et seulement si mettre la main dans le code ne vous fait pas peur.

Option 2 : utiliser l’outil d’aide au balisage de Google

Google fournit un outil d’aide au balisage de données structurées pour aider les webmasters à ajouter des balises de schéma à leurs sites sans trop de tracas.

L’outil d’aide au balisage de Google fonctionne pour n’importe quel site, peu importe :

  • Votre hébergeur,
  • Votre système de CMS,
  • Ou encore l’offre de produits et/ou de services présentée sur le site Web de votre entreprise.

C’est assez simple à utiliser et cela se fait en 3 étapes.

Etape 1 – Indiquer la page

Tout d’abord, accédez à l’outil d’aide au balisage de Google :

Comment Ajouter Des Données Structurées À Votre Site Web ?

Assurez-vous que vous êtes bien sur l’onglet Site.

En effet, il est aussi possible d’ajouter des données structurées à vos emails. C’est de cette manière que Google reconnaît qu’un email concerne un billet d’avion par exemple.

Choisissez ensuite le type de contenu parmi les 10 catégories proposées par Google sur lequel vous souhaitez ajouter des données structurées. Sans le savoir on est en train de choisir le “itemtype”.

Dans mon cas, il s’agit d’un article de blog.

Enfin, copiez-collez l’URL de la page que vous souhaitez marquer avec des données structurées. Collez-la dans la zone URL au bas de la page.

Dans mon cas, je vais illustrer mon propos avec “mon guide complet pour optimiser vos images sur WordPress”.

Si vous voulez baliser un bout de code HTML, choisissez l’onglet HTML et collez votre code dans la boîte prévue à cet effet.

Une fois ces champs renseignés, cliquez sur le bouton bleu « Commencer le balisage ».

Etape 2 – Baliser les données

Comment Ajouter Des Données Structurées À Votre Site Web ?

La page “Baliser les données” se découpe en 2 zones :

  • A gauche, votre contenu. C’est-à-dire votre page ou le code HTML que vous avez déclaré dans l’étape précédente,
  • A droite, “Mes éléments de données”. Bref tous les “itemprop” relatifs au type de contenu que vous avez choisi dont je vous ai parlés précédemment.

Pour baliser quelque chose :

  • Sélectionnez-le directement dans votre contenu à gauche à l’aide de votre souris, ce qui va le mettre en surbrillance en jaune.
  • Quand vous relâchez la souris, une petite fenêtre popup apparaît avec toutes les différentes données structurées possibles :

Comment Ajouter Des Données Structurées À Votre Site Web ?

Dans mon cas, puisque j’ai surligné le titre de mon article, je choisis la balise « Nom ».

Une fois sélectionné, la zone à droite « Mes éléments de données » se met à jour.

Comment Ajouter Des Données Structurées À Votre Site Web ?

Pour marquer une image, cliquez sur l’image et choisissez « Image » dans la boîte qui s’affiche.

Et ainsi de suite.

Ce sont les fonctions de base de l’outil d’aide au balisage. Le processus est identique quel que soit le type de contenu à baliser.

Si vous faites une erreur, cliquez sur la zone en surbrillance que vous voulez corriger, la fenêtre popup s’affiche. Tout en haut vous verrez “Effacer la balise”. C’est aussi simple que cela.

Au fur et à mesure, le volet « Mes éléments de données » se remplit avec tous les éléments que vous avez marqués.

Comment Ajouter Des Données Structurées À Votre Site Web ?

Ce n’est pas obligatoire de marquer tous les éléments de la zone de droite, mais je vous recommande de le faire de manière exhaustive.

De cette façon, votre balisage est le plus complet possible. Et ça donne plus de poids au référencement naturel de cette page.

Une fois que vous avez terminé de baliser votre page, cliquez sur le bouton rouge « CRÉER LE HTML » en haut à droite.

Etape 3 – Afficher le code HTML

Comment Ajouter Des Données Structurées À Votre Site Web ?

C’est la dernière étape.

Attention : Par défaut, le format proposé est microdonnées. Assurez-vous de choisir le format “JSON-LD” qui est le format préféré pour Google.

Copiez et collez le code généré.

Petit conseil : Laisser l’onglet ouvert dans votre navigateur. Ca évite de refaire tout le processus si vous devez copier à nouveau ce code HTML parce que le contenu de votre presse papier a été vidé. Ca sent le vécu 🙂

C’était finalement assez facile jusqu’à présent. Maintenant ça va se compliquer un peu.

Etape 4 – Ajouter le balisage à votre site

En effet, vous devez ajouter ce balisage sur votre site Web. C’est la partie la plus difficile.

Pour les pages statiques, c’est plutôt facile de copier le balisage sur votre site. Cliquez sur le bouton « Télécharger » dans le coin supérieur droit.

Comment Ajouter Des Données Structurées À Votre Site Web ?

Ensuite, allez dans le code source de cette page. Supprimez le code existant et collez ce nouveau code à sa place.

Par contre, si le site Web de votre entreprise possède des pages non statiques, c’est plus difficile. Et malheureusement, c’est le cas pour la plupart des systèmes de gestion de contenu (CMS).

Pire encore, WordPress ajoute une difficulté supplémentaire.

En effet, WordPress découpe votre contenu. Vous accédez bien au corps du texte dans votre éditeur de contenu. Mais l’en-tête est dans un autre fichier.

Problème, une partie du balisage doit être placé dans l’en-tête.

Cela signifie que vous allez devoir l’insérer manuellement le code dans le fichier de votre thème.

Et je préfère vous prévenir, vous pouvez facilement casser votre site Web si vous ne le faites pas correctement.

Même si vous avez des sauvegardes de votre site, si votre site est cassé, vous allez souffrir pour le remettre d’aplomb.

Pour cette raison, je vous recommande de faire appel à un développeur si vous prenez cette option.

Un second problème avec l’outil d’aide au balisage de Google, c’est que vous devez faire le processus décrit plus haut pour toutes vos pages … une par une …

Heureusement avec WordPress, dès que ça se complique, il y a toujours un développeur qui se jette sur l’occasion pour proposer une extension.

Option 3 : utiliser une extension WordPress

Si, comme moi, vous êtes l’une des millions de personnes qui utilisent WordPress pour votre site Web, l’utilisation d’une extension pour mettre en place un schéma de balisage pour votre site va tout simplifier.

Il existe plusieurs plugins dédiés que vous pouvez utiliser.

J’ai testé “WP SEO Structured Data Schema”. Je n’ai pas retenu cette extension. Car, a priori, il faut saisir à nouveau toutes les données article par article, page par page, un peu comme avec l’outil d’aide au balisage de Google. Pour être franche, je n’ai pas trouvé l’option de configuration si elle existe.

Bref, elle ne m’a pas plu, donc Poubelle !

Après quelques recherches sur internet, j’ai finalement jeté mon dévolu sur “Schema App Structured Data”.

Comment Ajouter Des Données Structurées À Votre Site Web ?

En effet, ce plugin génère un schéma de balisage sur tout votre site Web.

Et vous pouvez aussi modifier manuellement le balisage vous-même page par page.

Installer Schema App Structured Data

Il s’agit d’une installation classique pour une extension.

Depuis la colonne de gauche de votre console d’administration de WordPress, cliquez sur Extensions > Ajouter

Recherchez le plugin en recherchant « Schema App Structured Data ».

Cliquez sur « Installer maintenant ».

Enfin, cliquez sur « Activer le plugin ».

Configurer Schema App Structured Data

Vous retrouvez “Schema App” dans la rubrique “Réglages”. Son écran de configuration est assez basique.

Tout d’abord, “Schema App” vous demande d’ouvrir un compte. C’est gratuit. Et ça finalise l’installation du plugin. Il suffit juste ensuite de copier l’ID que l’extension vous donne.

Ensuite je vous conseille, de bien renseigner :

  • Si vous êtes un particulier ou une entreprise,
  • Le nom de votre organisation,
  • Votre logo en respectant bien les dimensions préconisées.

Ensuite il y a une option pour afficher une commande dans le menu de WordPress, puis les options de votre schéma de balisage :

  • Inclure votre fil d’ariane (breadcrumb) dans votre schéma – je vous conseille de l’activer pour avoir ce type d’affichage.
  • Show website : pour rajouter un champ de recherche lorsqu’un internaute tape votre nom de domaine. Très utile si comme moi vous avez beaucoup de contenus.
  • L’image par défaut au cas où Il n’y ait pas de photo dans certains de vos articles,

Utiliser Schema App Structured Data

Maintenant, lorsque vous éditez un article ou une page, tout en bas en-dessous de la zone d’édition, vous voyez une boîte « Schema App Structured Data” :

Comment Ajouter Des Données Structurées À Votre Site Web ?

Vous notez également en haut à gauche de la boîte spécifie JSON-LD. C’est exactement ce que Google et vous voulez.

L’extension se débrouille pour ajouter les meilleurs types de données structurées.

Mais c’est là que les connaissances de base sur les données structurées peuvent vous être utiles. Eh oui maintenant, vous pouvez lire ce balisage et éventuellement y apporter des modifications.

Pour modifier le balisage généré automatiquement, cliquez sur l’icône en forme de crayon en bas à droite. C’est tout simple.

Pour vérifier ce que Google en pense, vous pouvez tester une de vos URLs dans son outil de test des données structurées.

Un rapport sur les éventuelles erreurs est  aussi accessible depuis la Google Search Console à la rubrique :

Apparence dans les résultats de recherche > Données structurées

« Schema App Structured Data” est l’extension qu’il vous faut.

Et si vous n’êtes pas perfectionniste, elle fait son boulot toute seule sans jamais avoir à vous en préoccuper. C’est un gain de temps non négligeable sur ces aspects très techniques.

Donc si vous utilisez WordPress, je recommande vivement d’utiliser “Schema App Structured Data”. Seul petit hic, elle n’est (encore) pas en français.

Note : J’utilise la version gratuite de cette extension. Il existe aussi une version payante. Je verrai dans le futur si j’ai en besoin.

Note : depuis la version 11, Yoast gère pour vous les données structurées, du moins leur version basique ce qui est le minimum nécessaire. Rien à faire, juste à bien renseigner les champs de configuration de Yoast et le tour est joué… C’est totalement transparent.

Conclusion sur les données structurées

Si les “données structurées” vous faisaient peur en début de cet article, j’espère vous avoir rassuré.

Le schéma de balisage est beaucoup plus simple qu’il n’y paraît. Et croyez-moi, c’est une excellente pratique que vous devez mettre en place dès aujourd’hui.

Croyez-moi, j’ai souvent tenté d’ignorer les données structurées malgré les sous-entendus répétitifs de Laurent et Mathieu. Je le regrette aujourd’hui.

Oui le référencement technique peut faire peur surtout quand on ne maîtrise pas le code. Parfois, cela peut même prendre du temps à mettre en œuvre.

Mais si votre site est là pour longtemps, cela vaut le coup de se plonger dans les données structurées et de baliser votre site.

Je sais que cela aide le référencement du site Web de votre entreprise sur le long terme.

Au risque de me répéter : Le Marketing Digital et en particulier le référencement naturel de qualité n’est pas un sprint, c’est un marathon. Vous devez accepter d’investir pour le futur.

Cela ne veut pas dire que vous devez attendre des années pour constater les effets sur votre référencement naturel. Mais il n’y a pas de succès immédiat dès que l’on parle de référencement naturel.

Cette règle s’applique également aux données structurées. Si vous prenez le temps de l’implémenter sur votre site, vous verrez de résultats probants sur le long terme.

Alors quelle résolution pour cette rentrée ? Voulez-vous implémenter un schéma de balisage sur le site Web de votre entreprise ?