Un guide rapide pour implémenter Schema Markup sur WordPress

Vous avez lancé un site Web avec une belle apparence et de grandes fonctions. Alors, quelle est la prochaine étape ? Rendez-le SEO-friendly pour classer son contenu sur le moteur de recherche afin d'apporter du trafic organique. Cela peut sembler une tâche un peu difficile car il y a de nombreux éléments techniques que vous devez comprendre bien qu'ils ne soient pas faciles à digérer. Mais si vous êtes sérieux au sujet du référencement de votre site Web, vous devrez avoir une vue globale de tous les sujets liés au référencement. L'un de ces sujets consiste à implémenter le balisage de schéma.

Scheme Markup et les données structurées jouent un rôle important dans le référencement depuis des années et il semble que les principaux moteurs de recherche comme Google, Bing, Yahoo, etc. les recommandent. Mais qu'est-ce qu'un balisage de schéma exactement et quel est son impact sur le processus de référencement de votre site ? Après avoir lu cet article, vous saurez exactement de quoi il s'agit, comment cela affecte le référencement et les moteurs de recherche, comment l'implémenter correctement pour obtenir de meilleurs classements.

Qu'est-ce que les données structurées et le balisage de schéma ?

Les données structurées sont un format d'information qui peut être compris universellement. Il contient différents éléments qui permettent aux moteurs de recherche de dire facilement de quoi parle la page.

Alors que Schema Markup est essentiellement un code qui place votre site Web sur le moteur de recherche. Son objectif principal est de rendre le moteur de recherche plus informatif pour les utilisateurs.

Il peut être ajouté à votre page Web sous forme de code pour définir différents éléments tels que des dates, des images, des heures d'ouverture et bien d'autres.

Avantages du balisage de schéma dans le référencement

En ce qui concerne le référencement, les données structurées représentées dans le Schema Markup affichent les résultats du moteur de recherche de manière plus détaillée et informative. Cela rend non seulement le site Web plus convivial pour le référencement, mais peut également afficher des résultats riches pour attirer plus de trafic sur le site Web.

Différents types de résultats enrichis affichés dans le moteur de recherche

Précédemment, nous avons discuté des avantages du Schema Markup pour afficher des résultats riches sur le moteur de recherche. Voici quelques-uns des résultats riches qui seront affichés dans le moteur de recherche si Schema Markup est implémenté sur votre site Web.

Extraits riches

Les extraits enrichis sont les résultats qui contiennent des informations supplémentaires telles que des notes, des avis, des images et bien d'autres lors de l'affichage dans les résultats de recherche. Cela aidera les utilisateurs à en savoir plus sur la page/la publication et offrira plus de chances d'obtenir des clics.

Cartes riches

Les cartes riches sont le nouveau format d'affichage du résultat dans les moteurs de recherche. Tout comme les extraits enrichis, les cartes enrichies utilisent le balisage de schéma pour afficher les résultats de la recherche dans un format plus attrayant et visuellement attrayant. Il se concentre sur la fourniture d'une meilleure expérience de recherche mobile et est livré avec des options de balayage tactiles.

Graphique des connaissances

Un Knowledge Graph est une base de connaissances utilisée dans les moteurs de recherche pour rendre les informations encore plus détaillées en affichant des images, un emplacement, des informations de contact, une description, des profils de réseaux sociaux.

Extrait en vedette

Les Featured Snippets sont le format du moteur de recherche pour fournir aux utilisateurs des réponses directes à leurs questions. Ils ne contiennent aucune information supplémentaire comme des extraits enrichis, mais fournissent une réponse concise à l'utilisateur sans avoir à cliquer sur des résultats spécifiques.

Comment puis-je commencer à implémenter Schema Markup sur ma page Web ?

Vous pouvez implémenter Schema Markup de différentes manières. En voici quelques-uns ci-dessous :

Ajouter un schéma à l'aide de microdonnées :

Les microdonnées sont un ensemble de balises introduites avec HTML5 dans le but de fournir un moyen simple d'annoter des éléments HTML avec des balises lisibles par machine. Il est assez facile à utiliser un balisage bon pour les débutants à mettre en œuvre. Mais l'inconvénient est que vous devrez baliser chaque élément individuellement dans le corps de la page Web, ce qui peut devenir désordonné.

Mais avant de commencer, vous devrez déterminer le type d'élément défini par votre page Web. Cela vous aidera à déterminer le type de balises que vous devez utiliser.

Ici, nous supposerons que vous possédez une boutique en ligne appelée HashThemes et que sa page d'accueil peut ressembler à ceci :

 <div>
<h1>Thèmes de hachage</h1>
<h2>Le meilleur vendeur de thèmes WordPress !</h2>
<p>Adresse :</p>
<p>Dhobighat</p>
<p>Lalitpur, Népal</p>
<p>E-mail : [email protected]</p>
<p><a href="https://hashthemes.com/wordpress-theme/">Cliquez ici pour voir nos meilleurs thèmes WordPress !</a></p>
<p>Nous sommes ouverts : </p>
<p>Lun-Ven 10h - 18h</p>
</div>

Tout d'abord, vous devrez identifier les sections de la page Web. C'est tout ce qui se trouve entre les balises <div>. Donc, nous ajoutons

 <div itemscope>

En ajoutant la balise de portée d'élément, nous pouvons spécifier le code HTML contenu dans le bloc de balises <div> entre pour faire référence à des éléments particuliers.

Maintenant, nous allons utiliser l'attribut de type d'élément pour spécifier le type d'éléments sur votre page.

 <div itemscope itemtype = "http://schema.org/wordpressthemes">

Maintenant, allez à la page d'accueil et étiquetez la partie de la page Web qui porte le nom de votre site Web. Ici, nous allons ajouter une balise prop d'élément qui étiquette les propriétés des éléments.

 <h1 itemprop="name">Thèmes de hachage</h1>

Allez-y et ajoutez également des balises au reste des pages.

Parfois, vous n'aurez peut-être pas besoin de baliser toute la ligne, mais une partie de la ligne où la propriété est référencée, comme sur la ligne d'adresse e-mail.

 <h2 itemprop="description">Le meilleur vendeur de thèmes WordPress !</h2>
<p>Adresse :</p>
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<p itemprop="streetAddress">Dhobighat</p>
<p itemprop="addressLocality">Lalitpur, Népal</p></span>
<p>E-mail : <span itemprop="email">[email protected]</span></p>
<p><a itemprop="store" href="https://hashthemes.com/wordpress-theme/">Cliquez ici pour voir nos meilleurs thèmes WordPress !</a></p>
<p>Nous sommes ouverts :</p>
<p itemprop="openingHours">Lun-Ven 10h - 18h</p>
</div>

Vous pouvez également utiliser l'outil d'aide au balisage des données structurées de Google pour faciliter le balisage de vos pages Web.

Ajout de balisage à l'aide de RDFa

Resource Description Framework in Attributes (RDFa) est une extension de HTML5 conçue pour vous aider à baliser les données structurées. Il s'agit d'une recommandation du W3C et peut être utilisée pour combiner plusieurs vocabulaires de données structurées afin d'ajouter des données structurées qui vont au-delà de Schema.org

Si vous savez comment utiliser le balisage des microdonnées avec Schema.org, RDFa ne sera pas différent. Il intègre le HTML existant dans le corps du contenu.

Prenons l'exemple du site de commerce électronique ci-dessus :

 <div>
<h1>Thèmes de hachage</h1>
<h2>Le meilleur vendeur de thèmes WordPress !</h2>
<p>Adresse :</p>
<p>Dhobighat</p>
<p>Lalitpur, Népal</p>
<p>E-mail : [email protected]</p>
<p><a href="https://hashthemes.com/wordpress-theme/">Cliquez ici pour voir nos meilleurs thèmes WordPress !</a></p>
<p>Nous sommes ouverts : </p>
<p>Lun-Ven 10h - 18h</p>
</div>

Ici, nous spécifierons le vocabulaire de la balise avec l'URL http://schema.org/. Le type de page est défini par le type de balise.

 <div vocab="http://schema.org/" typeof="store">

Nous avons maintenant indiqué aux moteurs de recherche de quoi parle la page. Il est maintenant temps de définir les propriétés à l'aide des attributs de propriété.

 <h1 property="name">Thèmes de hachage</h1>

Le type d'attribut peut également être utilisé pour définir davantage la propriété, comme pour définir PostalAddress.

 <div property="address" typeof="AdressePostale">

Le type d'attribut équivaut au type d'élément dans les microdonnées, tandis que la propriété équivaut à l'attribut de prop d'élément.

 <h2 property="description">Le meilleur vendeur de thèmes WordPress !</h2>
<p>Adresse :</p>
<div property="address" typeof="AdressePostale">
<p property="streetAddress">Dhobighat</p>
<p property="addressLocality">Lalitpur, Népal</p>
</div>
<p>E-mail : <span property="email">[email protected]</span></p>
<p><a property="store" href="https://hashthemes.com/wordpress-theme/">Cliquez ici pour voir nos meilleurs thèmes WordPress !</a></p>
<p>Nous sommes ouverts :</p>
<p property="openingHours">Lun-Ven 10h - 18h</p>
</div>

Balisage de page Web à l'aide de JSON-LD

JavaScript Object Notation for Linked Data (JSON-LD) est un encodage de données liées utilisant JSON. Il s'agit d'une recommandation du W3C et a été ajouté comme format recommandé pour Schema.org en 2013.

Le principal avantage de l'utilisation de JSON-LD pour Schema Markup est qu'il limite les codes les plus pertinents à l'en-tête de la page et maintient la balise supplémentaire hors du corps principal de votre contenu. Cela rend les codes plus propres et plus faciles à lire.

La notation JSON – LD est contenue dans un bloc de script. Donc, pour démarrer le processus, nous saisissons la ligne de script pour montrer que nous utilisons le format JSON-LD :

 <type de script="application/ld+json">

Le code JSON-LD doit également être contenu entre accolades (accolades) ou il ne sera pas appliqué à la page ou analysé par les moteurs de recherche. C'est ce qu'on appelle la structure d'objet en Javascript. Ainsi, le contour du code ressemblera à ceci:

 <type de script="application/ld+json">
le code va ici
</script>

Maintenant, vous devrez utiliser le contexte défini par le vocabulaire aux données liées à Schema.org.

Une virgule doit également aller pour chaque ligne du code.

 "@context": "http://schema.org",

Pour les autres types de format schema.org, vous devrez définir le type de contenu que vous allez baliser. Cela équivaut à l'attribut de type d'image des microdonnées et au type d'attribut de RDFa.

Nous utiliserons le site Web simple que nous avons mentionné ci-dessus comme exemple :

 "@type": "Magasin",

Nous définissons maintenant le nom du magasin et sa description. Si vous utilisez des microdonnées ou RDFa pour définir ces éléments, ils doivent être présentés sur la page d'accueil du site Web elle-même. Mais dans le cas de JSON-LD, vous pouvez définir les éléments sans avoir à être présent sur la page.

 "name": "HashThemes",
"description": "Le meilleur vendeur de thèmes WordPress !",

Il est maintenant temps de définir l'adresse. Une adresse va avoir une propriété supplémentaire encore plus précise comme l'adresse et la localité. Nous allons donc les mettre entre accolades.

 "adresse": {
"@type": "AdressePostale",
"addressLocality": "Lalitpur, Népal",
"streetAddress": "Dhobighat",
},

Maintenant, nous allons placer les heures d'ouverture du magasin. Nous conserverons l'heure d'ouverture dans le tableau et spécifierons les jours dans des combinaisons à deux lettres. De plus, l'heure doit être au format 24 heures.

 "Horaires d'ouvertures": [
"lu-ven 10:00-18:00"
],

Enfin, nous allons ajouter une adresse e-mail et l'URL du thème. Les deux sont assez simples.

 "email": "[email protected]"
"store": "https://hashthemes.com/wordpress-theme/"
Et à la fin, notre balisage ressemblera à ceci :
<type de script="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Magasin",
"name": "HashThemes",
"description": "Le meilleur vendeur de thèmes WordPress !",
"adresse": {
"@type": "AdressePostale",
"addressLocality": "Lalitpur, Népal",
"streetAddress": "Dhobighat",
},
"Horaires d'ouvertures": [
"lu-ven 10:00-18:00"
],
"email": "[email protected]"
"store": "https://hashthemes.com/wordpress-theme/"
}
</script>

Vous pouvez utiliser l'outil de test de données structurées de Google pour vérifier la syntaxe des erreurs.

Comment implémenter Schema Markups sur votre site WordPress ?

La mise en œuvre du Schema Markup peut se faire de différentes manières. Vous pouvez les suivre pour rendre votre site Web convivial pour le référencement et améliorer le classement de votre contenu dans le moteur de recherche. En voici quelques uns:

Choisir un thème WordPress avec intégration intégrée avec Schema Markup :

Comme vous le savez, WordPress est la plateforme la plus populaire qui se compose d'un grand nombre de modèles pour créer des sites Web attrayants en un rien de temps. Cependant, seuls quelques thèmes sont intégrés aux codes Schema Mark Up. Ainsi, si vous choisissez un thème WordPress pour démarrer votre présence sur le Web ou donner une cure de jouvence à votre site Web existant, assurez-vous de vérifier si le thème contient au moins des fonctionnalités de schéma communes. Le schéma commun comprend l'en-tête, le pied de page et les options de navigation pour permettre aux moteurs de recherche de comprendre la structure de votre site Web.

Marquage d'autres données de schéma avec des plugins WordPress

Comme mentionné ci-dessus, vous aurez peut-être du mal à trouver un thème WordPress avec une intégration complète avec les codes Schema MarkUp. Ainsi, comme alternative, vous pouvez choisir les plugins WordPress disponibles pour ajouter la fonctionnalité Schema sur votre site Web. Yoast SEO et Schema Pro sont les quelques plugins qui vous aideront à mettre en œuvre le Schema MarkUp sur votre site Web.

Éléments à retenir lors de la mise en œuvre des Schema MarkUps

Maintenant que vous savez comment vous pouvez implémenter le Schema Markup sur votre site Web WordPress, voici quelques éléments dont vous voudrez peut-être vous souvenir lors de la mise en œuvre du Schema Markup :

L'intégration du balisage de schéma peut ne pas garantir un bon classement

Le Schema Markup ne garantit pas à lui seul un bon classement de votre contenu Web. Il existe de nombreux autres facteurs tels que l'autorité du contenu, la qualité du contenu, l'analyse des mots clés, la pertinence, etc. qui affectent le classement. Alors, gardez à l'esprit que Schema Markup n'est qu'un des facteurs qui peuvent vous aider à améliorer le classement de votre contenu.

Le balisage de schéma prend du temps à se concrétiser

Si vous vous demandez si Schema Markup entrera en vigueur immédiatement, vous vous trompez. Il faudra des mois pour voir l'extrait enrichi dans les résultats de recherche.

Vérifiez le Schema MarkUp donné par le thème WordPress et utilisez le plugin pour améliorer les fonctionnalités en conséquence

La plupart des thèmes WordPress ne prennent que des schémas communs comme l'en-tête et le pied de page, la navigation. Bien qu'il puisse y avoir un modèle avec d'autres fonctionnalités d'implémentation liées au schéma. Vous pouvez accéder à l'outil de test de données structurées de Google pour analyser la mise en œuvre du schéma de votre site Web et choisir le plug-in en conséquence.