Comment ajouter des extraits enrichis pour les avis et les évaluations sans plugin ? Balisage des microdonnées Google Structured Schema.org

Publié: 2020-04-21
Comment ajouter des extraits enrichis pour les avis et les évaluations sans plugin ? Balisage Google Structured Schema.org

Vous êtes-vous déjà demandé how and why Google affiche une note pour certains des articles d'examen spéciaux dans la page de résultats de recherche Google (SERP) ?

Dans ce didacticiel, nous allons discuter de la façon d' add rich snippet pour Review/Rating sous la forme de schema.org afin que Google puisse comprendre les détails de votre avis et l'afficher dans la page de recherche.

Crunchify - Thèmes Genesis - La page Google est éligible aux résultats enrichis

Résultat en direct de la caisse : https://crunchify.me/2VAUkTK. Lien Rich Snippet.

Avant de commencer, comprenons ce qu'est schema.org ?

Le schéma est un type de microdata qui permet aux moteurs de recherche Google ou Bing d'analyser et d'interpréter plus effectively les informations sur les pages de votre blog . L'idée est d'aider les moteurs de recherche à comprendre toutes les données dans un structured format afin que le moteur de recherche affiche également ces données de résultats pertinentes aux utilisateurs finaux en fonction des requêtes de recherche.

Commençons:

Point-1) Comment ajouter des données structurées à votre blog sous la forme de schema.org ?

Sur Crunchify, nous utilisons Genesis Framework et il est livré par défaut avec tous les schema.org microdata . Il génère des microdonnées dans le code de votre site. Je n'ai rien à ajouter et c'est la beauté de Genesis Framework, à l'exception de l'option Review metadata dont nous allons discuss below .

Point-2) Comment vérifier les données structurées de votre site ?

Google Search Console offre par défaut une option pour voir les données structurées. Jetez un œil aux diagrammes ci-dessous.

Google Search Console - Rapport de données structurées - Crunchify
Vérifier tous les types de données structurées Schema.org dans Google Search Console

Pour voir ces données, vous devez ajouter votre site/blog à la Search Console. Une fois que vous avez vérifié l'identité de votre site, vous pourrez peut-être voir les données immédiatement OR attendre une semaine pour que ces données soient générées automatically .

Point-3 Comment vérifier si vos données structurées sont valides ou ont un problème ?

  • Dans la dernière colonne supplémentaire du diagramme ci-dessus Items with Errors , Google fournit également un outil supplémentaire appelé Outil de test de données structurées.
  • Allez-y et cliquez sur Fetch URL .
  • Indiquez l'URL et cliquez sur FETCH & VALIDATE .
  • Sur le côté droit - vous devriez voir le résultat de la validation schema.org.
  • En cas d'échec et de mauvaise schema.org - vous devriez voir un message de couleur ROUGE .
Conseils de l'outil de test des données structurées de Google
Résultat du test de données structurées pour Crunchify Post

Expand above Review section et vous devriez pouvoir voir toutes les microdonnées détaillées pour votre examen. Vous pourriez le vérifier par vous-même. Here is a URL.

Ce tutoriel fonctionnera si vous avez l'une des questions ci-dessous :

  • Activation des extraits enrichis pour les avis et les évaluations
  • Données structurées pour examen
  • Données structurées pour la notation
  • Générateur de schéma d'évaluation agrégé
  • Créateur de schéma pour les microdonnées "Review" schema.org
  • générateur d'avis d'extraits enrichis
  • google rich snippet pour examen
  • outil de prévisualisation des extraits enrichis
  • extrait riche pour l'article de blog WordPress
  • recette pour site d'extraits enrichis
Crunchify - genesis - Examiner les détails du schéma des extraits

Étape 4 Ajoutons l'extrait de code Review Schema.org

Voici un code HTML que vous devez mettre dans votre panneau d'édition de message sous la TEXT section .

1
2
3
4
5
6
7
8
9
10
< div class = "crunchify-rating" itemscope itemtype = "http://schema.org/Review" >
     < span itemprop = "itemReviewed" itemscope itemtype = "http://schema.org/Thing" style = "font-size: 14px;" > < a itemprop = "url" href = "https://crunchify.me/genesis" target = "_blank" > < span itemprop = "name" > < strong > Genesis WordPress Theme Framework Review < / strong > < / span > < / a > < / span >
     < p > < / p >
     < strong > Description : < / strong > < span itemprop = "description" > One of the best WordPress Theme Framework which we use on Crunchify . com . Default comes with Google ' s rich schema . org snippet microdata . < / span >
     < span itemprop = "author" itemscope itemtype = "http://schema.org/Person" > < strong > Written by : < / strong > < span itemprop = "name" > App Shah < / span > < / span >
     < span itemprop = "reviewRating" itemscope itemtype = "http://schema.org/Rating" > < strong > Rating : < / strong > < span itemprop = "ratingValue" > 5 < / span > out of < span itemprop = "bestRating" > 5 < / span > < / span >
     < span itemprop = "publisher" itemscope itemtype = "http://schema.org/Organization" >
         < meta itemprop = "name" content = "Crunchify, LLC." / >
     < / span >
< / div >

Modifiez les valeurs en conséquence et le code ci-dessus sera converti en un joli widget avec de simples CSS tricks comme vous le voyez dans l'image ci-dessous.

URL avec exemple de révision en direct : https://crunchify.com/crunchify-co-moved-to-genesis-framework-thesis-vs-genesis/

Genesis Framework Review par Crunchify - meilleur thème pour les microdonnées schema.org

Et c'est tout. Une fois que vous avez ajouté le code ci-dessus à votre article de blog, revenez à nouveau à Google Structured Data Validation tool et vérifiez l'URL de votre article :). Cela peut prendre jusqu'à une week pour que votre publication soit mise à jour dans le SERP en fonction de l'algorithme de crawl.

Quel CSS utilisons-nous sur Crunchify ?

Sur Crunchify, nous utilisons le CSS ci-dessous. Ajoutez simplement le code ci-dessous au fichier style.css de votre thème, modifiez la propriété selon vos besoins et tout va bien.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
. crunchify - rating {
overflow : hidden ;
margin - bottom : 35px ;
border - radius : 3px ;
box - shadow : 0 0 2px 0 rgba ( 0 , 0 , 0 , . 12 ) , 0 2px 2px 0 rgba ( 0 , 0 , 0 , . 24 ) ;
font - size : 16px ;
color : #333;
padding : 30px 60px 5px ;
background : #fff;
border - left : 2px solid #157BDA;
}
. crunchify - rating : before {
content : "Rating" ! important ;
font - size : 16px ;
text - transform : uppercase ;
color : #fff;
float : left ;
margin : 2px 15px 15px 0 ;
background : #157BDA;
padding : 0px 20px ;
border - radius : 30px ;
}

Comment puis-je ajouter le fichier CSS ci-dessus à la page compatible AMP ?

Ajoutez simplement le contenu CSS ci-dessus sous <head> de votre page sous la balise HTML <style amp-custom> .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
   < head >
     . . .
     <style amp-custom>
      /* any custom styles go here. */
.crunchify-rating {
overflow : hidden ;
margin-bottom : 35px ;
border-radius : 3px ;
box-shadow : 0 0 2px 0 rgba ( 0,0,0,.12 ) , 0 2px 2px 0 rgba ( 0,0,0,.24 ) ;
font-size : 16px ;
color : #333 ;
padding : 30px 60px 5px ;
background : #fff ;
border-left : 2px solid #157BDA ;
}
.crunchify-rating:before {
content : "Rating" !important ;
font-size : 16px ;
text-transform : uppercase ;
color : #fff ;
float : left ;
margin : 2px 15px 15px 0 ;
background : #157BDA ;
padding : 0px 20px ;
border-radius : 30px ;
}
     </style>
     . . .
   < / head >

Faîtes moi savoir si vous avez d'autres questions.

N'oubliez pas d'obtenir votre copie du framework Genesis.

Bon blog.