• Startseite
  • Artikel
  • Allgemein
  • Wie füge ich Rich Snippets für Rezensionen und Bewertungen ohne Plugin hinzu? Google Structured Schema.org Mikrodaten-Markup

Wie füge ich Rich Snippets für Rezensionen und Bewertungen ohne Plugin hinzu? Google Structured Schema.org Mikrodaten-Markup

Veröffentlicht: 2020-04-21
Wie füge ich Rich Snippets für Rezensionen und Bewertungen ohne Plugin hinzu? Google Structured Schema.org-Markup

Haben Sie sich jemals gefragt, how and why Google Bewertungen für einige der speziellen Bewertungsposts auf der Google-Suchergebnisseite (SERP) anzeigt?

In diesem Tutorial werden wir besprechen, wie add rich snippet für Rezensionen/Bewertungen in Form von schema.org hinzufügen, damit Google Details zu Ihrer Rezension verstehen und auf der Suchseite anzeigen kann.

Crunchify – Genesis-Designs – Google Page ist für Rich-Ergebnisse berechtigt

Checkout-Live-Ergebnis: https://crunchify.me/2VAUkTK. Rich-Snippet-Link.

Bevor wir beginnen, wollen wir verstehen, was schema.org ist.

Schemata sind eine Art von microdata , die es den Suchmaschinen von Google oder Bing erleichtern, die Informationen auf Ihren Blog-Seiten effectively zu analysieren und zu interpretieren. Die Idee ist, Suchmaschinen dabei zu helfen, alle Daten in einem structured format zu verstehen, damit die Suchmaschine diese relevanten Ergebnisdaten auch den Endbenutzern basierend auf Suchanfragen anzeigt.

Lass uns anfangen:

Punkt-1) Wie fügt man seinem Blog strukturierte Daten in Form von schema.org hinzu?

Auf Crunchify verwenden wir Genesis Framework und es wird standardmäßig mit allen schema.org microdata geliefert. Es gibt Mikrodaten im Code Ihrer Website aus. Ich muss nichts hinzufügen und das ist das Schöne an Genesis Framework, außer der Option Review metadata , die wir weiter discuss below .

Punkt-2) Wie können Sie die strukturierten Daten Ihrer Website überprüfen?

Google Search Console bietet standardmäßig eine Option zum Anzeigen strukturierter Daten. Schauen Sie sich die folgenden Diagramme an.

Google Search Console – Strukturierter Datenbericht – Crunchify
Überprüfen Sie alle Arten von strukturierten Schema.org-Daten in der Google Search Console

Um diese Daten anzuzeigen, müssen Sie Ihre Website/Ihren Blog zur Search Console hinzufügen. Nachdem Sie die Identität Ihrer Website bestätigt haben, können Sie die Daten möglicherweise sofort sehen OR eine Woche warten, bis diese Daten automatically generiert werden .

Punkt-3 Wie können Sie überprüfen, ob Ihre strukturierten Daten gültig sind oder ob es Probleme gibt?

  • In der zusätzlichen letzten Spalte im obigen Diagramm Items with Errors stellt Google auch ein zusätzliches Tool namens Structured Data Testing Tool bereit.
  • Gehen Sie einfach dorthin und klicken Sie auf Fetch URL .
  • Geben Sie die URL an und klicken Sie auf FETCH & VALIDATE .
  • Auf der rechten Seite sollten Sie das Validierungsergebnis von schema.org sehen.
  • Im Falle eines Fehlers und eines schlechten schema.org sollten Sie eine ROTE Farbmeldung sehen.
Tipps zum Testtool für strukturierte Daten von Google
Testergebnis für strukturierte Daten für Crunchify Post

Erweitern Sie den Expand above Review section „Überprüfung“ und Sie sollten alle detaillierten Mikrodaten für Ihre Überprüfung sehen können. Du könntest es selbst überprüfen. Here is a URL.

Dieses Tutorial funktioniert, wenn Sie eine der folgenden Fragen haben:

  • Aktivieren von Rich Snippets für Rezensionen und Bewertungen
  • Strukturierte Daten zur Überprüfung
  • Strukturierte Daten für die Bewertung
  • Aggregierter Bewertungsschema-Generator
  • Schema-Ersteller für „Review“-Schema.org-Mikrodaten
  • Rich-Snippet-Bewertungsgenerator
  • Google Rich Snippet zur Überprüfung
  • Rich-Snippets-Vorschau-Tool
  • Rich Snippet für WordPress-Blogpost
  • Rezept für Rich-Snippets-Site
Crunchify - genesis - Details zum Snippet-Schema überprüfen

Schritt-4 Lassen Sie uns das Review Schema.org-Snippet hinzufügen

Hier ist ein HTML-Code, den Sie in Ihr Beitragsbearbeitungsfeld unter TEXT section einfügen müssen.

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 >

Ändern Sie die Werte entsprechend und der obige Code wird mit einfachen CSS tricks in ein nettes Widget umgewandelt, wie Sie es im folgenden Bild sehen.

URL mit Live-Überprüfungsbeispiel: https://crunchify.com/crunchify-co-moved-to-genesis-framework-thesis-vs-genesis/

Genesis Framework Review von Crunchify – bestes Thema für schema.org-Mikrodaten

Und das ist es. Sobald Sie den obigen Code zu Ihrem Blog-Beitrag hinzugefügt haben, kehren Sie erneut zum Google Structured Data Validation tool zurück und überprüfen Sie Ihre Beitrags-URL :). Es kann bis zu einer week dauern, bis Ihr Beitrag basierend auf dem Crawl-Algorithmus in SERP aktualisiert wird.

Welches CSS verwenden wir auf Crunchify?

Auf Crunchify verwenden wir untenstehendes CSS. Fügen Sie einfach den folgenden Code zur style.css-Datei Ihres Themas hinzu, ändern Sie die Eigenschaft nach Ihren Bedürfnissen und alles ist gut.

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

Wie kann ich die obige CSS-Datei zu einer AMP-fähigen Seite hinzufügen?

Fügen Sie einfach den obigen CSS-Inhalt unter <head> Ihrer Seite unter dem HTML-Tag <style amp-custom> hinzu.

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 >

Lassen Sie mich wissen, wenn Sie weitere Fragen haben.

Vergessen Sie nicht, sich Ihre Genesis Framework Copy zu besorgen.

Viel Spaß beim Bloggen.