• Homepage
  • Articoli
  • Generale
  • Come aggiungere rich snippet per recensioni e valutazioni senza alcun plug-in? Markup dei microdati di Schema.org strutturato di Google

Come aggiungere rich snippet per recensioni e valutazioni senza alcun plug-in? Markup dei microdati di Schema.org strutturato di Google

Pubblicato: 2020-04-21
Come aggiungere rich snippet per recensioni e valutazioni senza alcun plug-in? Markup strutturato di Google Schema.org

Ti sei mai chiesto how and why Google sta mostrando una valutazione per alcuni dei post di recensioni speciali nella pagina dei risultati di ricerca di Google (SERP)?

In questo tutorial discuteremo come add rich snippet per Revisione/Valutazione sotto forma di schema.org in modo che Google possa comprendere i dettagli della tua recensione e mostrarla nella pagina di ricerca.

Crunchify - Temi Genesis - La pagina Google è idonea per i risultati multimediali

Risultato del checkout in tempo reale: https://crunchify.me/2VAUkTK. Collegamento Rich Snippet.

Prima di iniziare, capiamo cos'è schema.org?

Lo schema è un tipo di microdata che rende più semplice per i motori di ricerca Google o Bing analizzare e interpretare le informazioni sulle pagine del tuo blog in modo più effectively . L'idea è quella di aiutare i motori di ricerca a comprendere tutti i dati in un structured format modo che il motore di ricerca mostri anche i dati dei risultati rilevanti agli utenti finali in base alle query di ricerca.

Iniziamo:

Punto-1) Come aggiungere dati strutturati al tuo blog sotto forma di schema.org?

Su Crunchify stiamo usando Genesis Framework e per impostazione predefinita viene fornito con tutti i formati di schema.org microdata . Genera microdati nel codice del tuo sito. Non devo aggiungere nulla e questa è la bellezza di Genesis Framework tranne l'opzione Review metadata di cui discuss below .

Punto-2) Come verificare i dati strutturati del tuo sito?

Per impostazione predefinita, Google Search Console offre un'opzione per visualizzare i dati strutturati. Dai un'occhiata ai diagrammi sottostanti.

Google Search Console - Rapporto sui dati strutturati - Crunchify
Verifica tutti i tipi di dati strutturati Schema.org in Google Search Console

Per vedere questi dati, devi aggiungere il tuo sito/blog a Search Console. Dopo aver verificato l'identità del tuo sito, potresti essere in grado di visualizzare i dati immediatamente OR attendere una settimana prima che questi dati vengano generati automatically .

Punto-3 Come verificare se i tuoi dati strutturati sono validi o presentano problemi?

  • Nell'ultima colonna aggiuntiva del diagramma precedente Items with Errors , Google fornisce anche uno strumento aggiuntivo chiamato Structured Data Testing Tool.
  • Basta andare lì e fare clic su Fetch URL .
  • Fornisci l'URL e fai clic su FETCH & VALIDATE .
  • Sul lato destro: dovresti vedere il risultato della convalida di schema.org.
  • In caso di errore e schema.org , dovresti vedere il messaggio di colore ROSSO .
Suggerimenti per lo strumento di test dei dati strutturati di Google
Risultato del test dei dati strutturati per Crunchify Post

Expand above Review section e dovresti essere in grado di vedere tutti i microdati dettagliati per la tua revisione. Potresti verificarlo da solo. Here is a URL.

Questo tutorial funzionerà se hai una delle seguenti domande:

  • Abilitazione dei rich snippet per recensioni e valutazioni
  • Dati strutturati per la revisione
  • Dati strutturati per la valutazione
  • Generatore di schemi di valutazione aggregati
  • Creatore dello schema per i microdati schema.org "Revisione".
  • generatore di recensioni di rich snippet
  • google rich snippet per la revisione
  • strumento di anteprima dei rich snippet
  • rich snippet per il post del blog di WordPress
  • ricetta per il sito di rich snippets
Crunchify - genesis - Rivedi i dettagli dello schema degli snippet

Passaggio 4 Aggiungiamo lo snippet Review Schema.org

Ecco un codice HTML che devi inserire nel pannello di modifica del post nella 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 >

Modifica i valori di conseguenza e sopra il codice verrà convertito in un bel widget con semplici CSS tricks come lo vedi nell'immagine sottostante.

URL con esempio di recensione dal vivo: https://crunchify.com/crunchify-co-moved-to-genesis-framework-thesis-vs-genesis/

Genesis Framework Review di Crunchify - miglior tema per microdati schema.org

E questo è tutto. Dopo aver aggiunto il codice sopra al tuo post del blog, torna di nuovo allo Google Structured Data Validation tool e controlla l'URL del tuo post :). Potrebbe essere necessaria fino a una week per aggiornare il tuo post alla SERP in base all'algoritmo di scansione.

Che CSS stiamo usando su Crunchify?

Su Crunchify, stiamo usando sotto CSS. Basta aggiungere il codice sottostante al file style.css del tuo tema, modificare la proprietà secondo le tue necessità e sei a posto.

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 ;
}

Come posso aggiungere il file CSS sopra alla pagina abilitata AMP?

Basta aggiungere sopra il contenuto CSS sotto <head> della tua pagina sotto il tag 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 >

Fammi sapere se hai altre domande.

Non dimenticare di ottenere la tua copia di Genesis Framework.

Buon blog.