Pour ceux qui ne savent pas exactement ce que sont les données structurées Schema.org et pourquoi elles sont devenues une partie essentielle de toute stratégie de référencement, veuillez lire mon article « How to use Schema.org structured data for companies and people« .
Et qu’en est-il de WordPress et Yoast ?
Eh bien, 37% de l’ensemble d’internet est actuellement alimenté par WordPress. Oui. Cela représente environ un demi-milliard de sites qui utilisent une version de WordPress, et la dernière version (5.4 au moment de la publication) a été téléchargée 31 millions de fois !
Demandez votre démo personnalisée
Qu’est-ce que Yoast SEO et pourquoi est-il utile pour les données de Schema.org ?
Yoast SEO est un plugin WordPress lancé en 2010 par Joost de Valk et a été téléchargé plus de 202 millions de fois. Il simplifie et automatise certaines tâches SEO de base (et plus avancées) sur les pages.
Les fonctions gérant le balisage Schema.org ont été initialement ajoutées en 2011, puis, en mai 2020, une énorme réécriture de code a été déployée avec une API complète visant à permettre aux développeurs d’injecter des données dans leur @graph Schema. C’est une excellente nouvelle, mais la plupart des SEOs travaillant avec WordPress ne sont pas au courant de son existence ou n’ont pas cherché à l’utiliser. Son utilisation est pourtant incroyablement simple !
Voyons donc à quoi ressemble la fonctionnalité Schema de Yoast sur une page WordPress. Voici le bloc conteneur de base :
Comme vous pouvez le voir, ce qui est intéressant ici, c’est que les données Schema sont divisées en 4 parties principales ( par exemple @type : Personne/Organisation etc) qui sont toutes au même niveau dans un conteneur appelé @graph. J’ai supprimé toutes les données sauf le @type, le @id et toutes les propriétés utilisées pour relier les blocs, pour vous montrer comment tout cela s’assemble.
Les blocs Schema sur les sites web ont souvent des éléments imbriqués les uns avec les autres avec, par exemple, le code de l’objet image primaryImageOfPage à l’intérieur du bloc WebPage, alors qu’ici c’est une pièce séparée. Cela s’explique par le fait que l’imbrication des blocs à l’intérieur des blocs peut rapidement devenir très lourd avec des répétitions de code.
Ici, les parties sont toutes liées en utilisant l’@id de chaque bloc, donc les blocs de l’image ci-dessus sont liés comme ceci : ImageObject est l’image principale de la page Web qui est une partie du site web dont l’éditeur est le bloc Personne/Organisation. C’est clair et logique !
Pour faire court, l’API nous permet essentiellement de « coudre » de nouvelles pièces et de les référencer à partir de n’importe quelle autre pièce via l’@id.
Cependant, l’ajout de nouveaux éléments qui ne sont pas encore générés nécessite un peu plus de code et la mise en place de conditions pour décider quels types de pages ont besoin de ces nouveaux éléments. Plutôt que de voir comment faire cela, nous allons simplement voir comment modifier les données d’un élément existant (regardez quels éléments sont déjà générés dans votre page), soit en changeant une des valeurs, soit en insérant de nouveaux types et propriétés.
Pour ce faire, nous allons créer un plugin WordPress très basique.
Mais d’abord, vous vous demandez peut-être : quel est l’intérêt ?
Pourquoi ajouter des données Schema.org au plugin Yoast SEO ?
L’architecture du plugin a été bien pensée et est conçue pour fonctionner dans le plus grand nombre de cas. Il fournit des classes qui se déclenchent automatiquement pour un large éventail de types de contenu si les bonnes conditions sont réunies.
La documentation nous indique que les types de contenu qu’il génère actuellement sont les suivants : Organisation, Site Web, Page Web, Fil d’Ariane, Recherche de site (SearchAction), Personne, Produit, Offre, Offre globale (AggregateOffer), Article, Comment (HowTo), Question, Revue, Commentaire, Image (ImageObject), Vidéo (videoObject), Entreprise locale (localBusiness) & Adresse (PostalAddress). Et il existe plusieurs extensions que vous pouvez ajouter pour des utilisations plus spécifiques, par exemple si vous utilisez WooCommerce.
Tout cela est merveilleux, mais lorsque vous regardez le résultat pour le type de personne, vous pouvez voir que seules les données essentielles les plus basiques y figurent :
(note : j’ai raccourci l’@id généré par le plugin)
Si vous avez lu mon précédent article sur le balisage Schema.org et sur les raisons pour lesquelles il est important pour améliorer l' »E-A-T » de votre site, vous aurez probablement lu comment vous pouvez utiliser une foule de propriétés pour ces types, dont certaines vous identifient plus précisément et fourniront des liens vers des données montrant votre expertise et votre autorité.
Par exemple, vous pouvez ajouter une propriété « AlumniOf » pour parler de la formation d’une personne ou une propriété « KnowAbout » pour donner quelques détails sur son ou ses domaines d’expertise. Pour une entreprise, vous pouvez fournir le numéro d’enregistrement officiel de l’entreprise sous la forme d’un identifiant.
Nous allons le faire en deux étapes simples :
- Créer un plugin WordPress ultra basique pour 1 fichier
- Commencer à ajouter les données que nous voulons produire via l’API Yoast Schema
Pourquoi faire un plugin ?
Bien qu’il soit possible d’ajouter le code dans le fichier functions.php de votre thème enfant, le placer dans un plugin est le chemin recommandé pour la simple et bonne raison que s’il y a des problèmes avec le code, vous pouvez simplement désactiver votre plugin personnalisé et le site reprendra par défaut le Schema de base produit par le plugin SEO de Yoast. De plus, si vous le mettez dans le thème enfant et que les fichiers sont modifiés, vous pourriez perdre toutes les précieuses données Schema que vous avez passé des heures à compiler !
Demandez votre démo personnalisée
Comment créer un plugin WordPress ultra basique
Rien de plus simple !
Pour créer un plugin fonctionnel, il suffit de créer un nouveau fichier PHP – je l’ai appelé schema-extender.php – et de le sauvegarder dans un nouveau dossier du même nom, comme ceci :
Ensuite, vous devez ajouter quelques informations dans le haut de schema-extender.php comme ceci :
/**
* Plugin Name: Yoast Schema Extender Simple Version 2
* Plugin URI: https://hugoscott.com/
* Description: A very basic plugin to extend Yoast Schema.org data.
* Version: 1.0
* Author: Hugo Scott
* Author URI: https://hugoscott.com/
**/
Si vous enregistrez ceci et téléchargez le dossier et le fichier dans le répertoire /wp-content/plugins/ de votre site wordpress, vous le verrez s’afficher dans la liste des plugins comme ceci :
Vous pouvez activer le plugin mais il ne fera rien pour l’instant car nous n’avons ajouté aucune fonction – c’est la prochaine étape !
La première ligne de code que je mets n’est pas indispensable mais elle affichera les données Schema dans un format plus lisible que la sortie minifiée par défaut, et vous pouvez toujours supprimer cette ligne plus tard :
add_filter( ‘yoast_seo_development_mode’, ‘__return_true’ );
Nous allons maintenant ajouter un filtre WordPress qui ajoutera une fonction personnalisée example_change_person (que nous allons écrire ensuite) au processus Yoast :
add_filter( ‘wpseo_schema_person’, ‘example_change_person’ );
Et puis, pour terminer, nous allons écrire la fonction simple example_change_person() qui est appelée par le filtre et qui va ajouter les éléments de données :
function example_change_person( $data ) {
// data
return $data;
}
Si vous enregistrez ceci et téléchargez le fichier sur le serveur, vous ne verrez toujours pas de différence dans la sortie Schema car nous n’avons pas encore ajouté de données dans le tableau $data. Pour ceux qui ne sont pas familiers avec le terme « array », il signifie simplement une sorte de « boîte » contenant un ensemble structuré de morceaux de données qui sont des paires avec une « valeur » et un nom (la « clé »).
Et c’est exactement de la même manière que le balisage schema.org fonctionne. Il est composé de paires avec un nom et une valeur, par exemple voici les données d’url pour le site Web dans la sortie Schema :
« url »: « https://hugoscott.com/ »,
Ici, le nom (ou « clé ») est « url » et la valeur est « https://hugoscott.com/« .
Chaque clé dans le tableau $data est utilisée pour le nom de la propriété, donc assurez-vous de l’orthographier correctement.
Si nous voulions ajouter les données ci-dessus dans le tableau $data, nous ajouterions simplement la ligne dans la fonction comme ceci :
$data[‘url’] = « https://hugoscott.com/ »;
Cependant, pour l’article sur les personnes, nous voulons ajouter une propriété « knowAbout« , alors ajoutons cela à la place :
$data[‘knowsAbout’] = « https://en.wikipedia.org/wiki/Balti_(food) »;
Enregistrez le fichier, téléchargez-le sur le serveur, rechargez la page et regardez le html source (ou vérifiez le dans le Google Structured Data Testing Tool) et vous verrez ceci :
Que dites-vous de cela ! Nous avons ajouté un peu de données très facilement. C’est fantastique, mais que faire si nous voulons ajouter des alumniOf qui ne soient pas une simple chaîne de texte mais un sous-bloc ?
L’avantage de la façon dont le plugin Yoast traite le tableau $data est qu’au lieu d’une chaîne de texte, nous pouvons inclure un sous-tableau pour qu’il s’affiche comme un sous-bloc Schema !
Imaginez que nous voulions faire cela :
Vous pouvez ajouter ces données dans un sous-réseau comme celui-ci :
Si la personne en question a plusieurs diplômes et que vous souhaitiez plusieurs sous-blocs AlumniOf, il suffit de les ajouter comme ceci :
Et il sera affiché comme ceci :
Il n’y a pas plus simple !
Un dernier mot
Merci d’avoir lu cet article. Il n’a fait qu’effleurer la surface de ce qui est possible avec l’API SEO de Yoast.
Les exemples que j’ai donnés sont excellents en tant que bits de données autonomes pour les personne et les organisations, mais si vous voulez aller plus loin – par exemple avec des pages modèles – vous pouvez ajouter des formulaires à votre plugin et enregistrer les données dans une table de base de données personnalisée, puis compiler le Schema dans le fichier modèle de votre thème et l’afficher en bas de page. Tout cela est possible, et vous pouvez utiliser la propriété @id pour lier n’importe quelle Schema dans le footer à un schéma dans le header !
L’API du plugin SEO de Yoast va considérablement évoluer dans un avenir proche, alors assurez-vous de garder un œil sur ses derniers développements.
Venez sur mon site pour plus d’informations ou si vous souhaitez m’engager pour le faire à votre place.
Merci
Pour terminer, je voudrais remercier Jono Alderson de Yoast pour avoir pris le temps de répondre à mes questions !
