Formation Optimiser son référencement sur le web (SEO) : Ajouter des données structurées

Nous venons de voir comment créer un bon contenu dans une page web. Il s’agit de la communication d’humain à humain.

Maintenant voyons comment communiquer des informations utiles aux robots pour leur faciliter la compréhension du contenu d’une page et ainsi optimiser la visibilité de nos pages dans les moteurs de recherche.

Présentation

En SEO, les données structurées sont des informations transmises aux moteurs de recherche leur permettant de comprendre plus efficacement certaines données de la page. Avec des données structurées votre page aura plus de chance de se retrouver dans des extraits enrichies (ou Rich Snippets en anglais), qui sont ce genre de petites sections à part que l’on peut retrouver dans certaines recherches :

Les résultats se trouvant dans ce genre de sections sont des pages exclusivements pourvus de Données Structurées et permettent de mettre en valeur des résultats que les moteurs de recherches jugent très utiles au vu de la recherche effectuée.

Une bonne maîtrise des Données Structurées vous permettra donc de placer vos pages dans des sections, des extraits de recherches très valorisés et très mises en avant. Ce sont donc des éléments à ne pas négliger.

Quelques recommandations de google :

Des données complètes… : Google décrit dans sa documentation qu’il faut inclure toutes les propriétés obligatoires pour que votre page apparaisse dans les résultats enrichis de Google

…Mais surtout précises et visibles ! : Attention cependant, Google explique qu’il aime avoir le plus de données possibles mais qu’il préfère tout de même un peu moins de données mais très justes et précises plutôt qu’une myriade de données incomplètes ou imprécises. Il en va de même pour la visibilité des données. Celles-ci doivent être visibles et accessibles à l’internaute.

Comment ajouter des données structurées ?

Les données structurées des moteurs de recherche utilise le vocabulaire Schema.org que vous pouvez retrouver sur schema.org.

Schema.org a été fondé par Google, Microsoft, Yahoo et Yandex et développé en Open Source par la communauté du web afin de rendre la vie plus facile aux webmasters et aux développeurs web en uniformisant ce vocabulaire compris par la majorité des moteurs de recherche.

Je dis bien la majorité et non la totalité car vous avez par exemple Baidu (le moteur de recherche chinois dont je vous parlais dans la première partie de ce cours) qui n’utilise pas schema.org mais un homologue dans ses Webmaster Tools.

Ici je vous montrerai exclusivement le fonctionnement du vocabulaire Schema.org.

Il existe 3 manières différentes pour ajouter des données structurées : les microdatas, les RDFa (Resource Description Framework in Attributes) et le JSON-LD (qui est de loin la plus pratique et la plus recommandée).

Les Microdatas

Les microdatas sont à utiliser dans les balises HTML directement dans le code de votre page via des divers attributs. Les 3 attributs principaux à connaître au minimum sont :

• itemscope : qui définit le scope des informations qui seront fournies dans les éléments enfants.
• itemtype : qui définit le type de données
• itemprop : définit une propriété. Les propriétés varient seulement le type d’item. Par exemple pour le type “Book” vous aurez des propriétés spécifiques tel que “author”, “illustrator”, “bookEdition”, “numberOfPages” etc…

Les microdatas fonctionnant par scopes vous pouvez vous retrouvez avec plusieurs autres items englobés dans votre item principal. Si nous reprenons l’exemple des livres vous pouvez ajouter un item de type “Person” à votre propriété “author” ou “illustrator” et définir par la suite des propriétés propres à cet item de type “Person”.

<div itemscope itemtype="http://schema.org/Book">
    <h1><span itemprop="name">Le Héros aux mille et un visages</span></h1>
    <p>Auteur :
        <span itemprop="author" itemscope itemtype="http://schema.org/Person">Joseph Campbell
            <meta itemprop="name" content="Joseph Campbell">
            (<span itemprop="birthDate">1904</span>-<span itemprop="deathDate">1987</span>).
        </span>
    </p>
    <p>Langue : <meta itemprop="inLanguage" content="fr" />Français</p>
    <p>Traduit par :
        <span itemprop="translator" itemscope itemtype="http://schema.org/Person">Henri Crès
            <meta itemprop="name" content="Henri Crès">
        </span>
    </p>
    <p>Genre : <span itemprop="about">Mythes et légendes</span></p>
    <p>Nombre de pages : <span itemprop="numberOfPages">640</span> pages</p>
</div>

Vous pouvez remarquer qu’il est possible d’insérer des propriétés grâce à la balise meta lorsque l’on ne veut pas afficher sur la page le contenu de la balise. Cela permet de rendre un peu plus lisible cette méthode notamment quand il s’agit d’un enchaînement de scopes comme pour “author” dans notre exemple :

<meta itemprop="name" content="Joseph Campbell">

Le RDFa

Le RDFa (Resource Description Framework in Attributes) est sensiblement proche des microdatas dans son utilisation. Il se place directement dans le code HTML de votre page avec des attributs dans vos balises.

<div vocab="http://schema.org" typeof="Book">
    <h1><span property="name">Le Héros aux mille et un visages</span></h1>
    <p>Auteur :
        <span property="author" vocab="http://schema.org" typeof="Person">Joseph Campbell
            <meta property="name" content="Joseph Campbell">
            (<span property="birthDate">1904</span>-<span property="deathDate">1987</span>).
        </span>
    </p>
    <p>Langue : <meta property="inLanguage" content="fr" />Français</p>
    <p>Traduit par :
        <span property="translator" vocab="http://schema.org" typeof="Person">Henri Crès
            <meta property="name" content="Henri Crès">
        </span>
    </p>
    <p>Genre : <span property="about">Mythes et légendes</span></p>
    <p>Nombre de pages : <span property="numberOfPages">640</span> pages</p>
</div>

Pour faire simple et concis en comparant avec les microdatas :

• • il n’y a pas de itemscope
• • itemtype est remplacé par vocab et typeof
• • itemprop est remplacé par property

JSON-LD

Le JSON-LD est de très loin la manière la plus simple et recommandée d’utiliser le vocabulaire schema.org ! En effet, au lieu de se casser la tête à devoir placer des attributs directement dans des balises vous pouvez simplement définir un objet javascript dans le de votre page ! Cette méthode améliore grandement la clarté des infos transmises et la maintenabilité de votre site/page.

Voici le même exemple que les précédents (un livre) mais cette fois-ci en JSON-LD :

<script type="application/ld+json">
{
    "@context": "https://schema.org/",
    "@type": "Book",
    "name": "Le heros aux mille et un visages",
    "inLanguage": "fr",
    "numberOfPages": "640",
    "author": {
        "@type": "Person",
        "name": "Joseph Campbell",
        "birthDate": "1904",
        "deathDate": "1987"
    },
    "translator": {
        "@type": "Person",
        "name": "Henri Crès"
    },
    "about": {
        "@type": "Thing",
        "name": "Mythes et légendes"
    }
}
</script>

Tester ses données structurées avec l’outil Google

Maintenant que nous avons vu comment créer des données structurées il faut les tester !

Pour cela Google vous laisse à disposition son superbe outil de test des données structurées.

Cet outil vous permettra de corriger vos erreurs et de vérifier ce que Google recevra comme information et comment il les interprétera.

Il met en avant :

• des erreurs (en rouge) que vous devez impérativement corriger. Il peut s’agir d’une erreur syntaxique ou bien d’un élément manquant et impératif pour l’utilisation d’une donnée du type souhaitée.
• Il met également en avant les avertissements (en orange) qui sont principalement des conseils pour compléter un minimum la donnée.

Si vous n’êtes pas en mesure de remplir toutes les conditions minimales pour la réalisation de votre donnée remettez en question la pertinence de celle-ci.

Donc en conclusion n’oubliez pas d’ajouter des données structurées seulement si vous le pouvez.