• Strona główna
  • Artykuły
  • Ogólny
  • Jak dodawać fragmenty rozszerzone do recenzji i ocen bez żadnej wtyczki? Google Structured Schema.org znaczniki mikrodanych

Jak dodawać fragmenty rozszerzone do recenzji i ocen bez żadnej wtyczki? Google Structured Schema.org znaczniki mikrodanych

Opublikowany: 2020-04-21
Jak dodawać fragmenty rozszerzone do recenzji i ocen bez żadnej wtyczki? Google Structured Schema.org Markup

Czy kiedykolwiek zastanawiałeś się, how and why Google wyświetla oceny niektórych specjalnych postów z opiniami na stronie wyników wyszukiwania Google (SERP)?

W tym samouczku omówimy, jak add rich snippet do recenzji/oceny w formie schema.org , aby Google mogło zrozumieć szczegóły Twojej recenzji i wyświetlić ją na stronie wyszukiwania.

Crunchify – motywy Genesis – Strona Google kwalifikuje się do wyświetlania wyników z elementami rozszerzonymi

Sprawdź wynik na żywo: https://crunchify.me/2VAUKTK. Link do fragmentu rozszerzonego.

Zanim zaczniemy, zrozummy, czym jest schema.org?

Schemat to rodzaj microdata , który ułatwia wyszukiwarkom Google lub Bing bardziej effectively analizowanie i interpretowanie informacji na stronach bloga. Pomysł polega na tym, aby pomóc wyszukiwarkom zrozumieć wszystkie dane w structured format , tak aby wyszukiwarka wyświetlała również te trafne wyniki użytkownikom końcowym na podstawie zapytań.

Zacznijmy:

Punkt-1) Jak dodać dane strukturalne do swojego bloga w postaci schema.org?

W Crunchify używamy Genesis Framework i domyślnie jest on dostarczany ze wszystkimi formatami schema.org microdata . Wyprowadza mikrodane w kodzie Twojej witryny. Nie muszę niczego dodawać i na tym polega piękno Genesis Framework, z wyjątkiem opcji Review metadata , którą discuss below .

Punkt-2) Jak zweryfikować dane strukturalne swojej witryny?

Google Search Console domyślnie udostępnia opcję przeglądania uporządkowanych danych. Spójrz na poniższe schematy.

Google Search Console – Raport danych strukturalnych – Crunchify
Zweryfikuj wszystkie typy uporządkowanych danych Schema.org w Google Search Console

Aby zobaczyć te dane, musisz dodać swoją witrynę/blog do Search Console. Po zweryfikowaniu tożsamości witryny możesz od razu zobaczyć dane OR poczekać tydzień na automatically wygenerowanie tych danych .

Punkt-3 Jak sprawdzić, czy Twoje uporządkowane dane są prawidłowe lub mają jakiś problem?

  • W dodatkowej ostatniej kolumnie na powyższym diagramie Items with Errors Google udostępnia również dodatkowe narzędzie o nazwie Narzędzie do testowania danych strukturalnych.
  • Po prostu idź tam i kliknij Fetch URL .
  • Podaj adres URL i kliknij FETCH & VALIDATE .
  • Po prawej stronie – powinieneś zobaczyć wynik walidacji schema.org.
  • W przypadku awarii i złego schema.org – powinieneś zobaczyć komunikat w kolorze CZERWONYM .
Wskazówki dotyczące narzędzia do testowania uporządkowanych danych Google
Wynik testu uporządkowanych danych dla postu Crunchify

Expand above Review section i powinieneś zobaczyć wszystkie szczegółowe mikrodane do sprawdzenia. Możesz sam to sprawdzić. Here is a URL.

Ten samouczek zadziała, jeśli masz jakiekolwiek z poniższych pytań:

  • Włączanie fragmentów rozszerzonych dla recenzji i ocen
  • Uporządkowane dane do przeglądu
  • Dane strukturalne do oceny
  • Generator schematu oceny zbiorczej
  • Kreator schematu mikrodanych schema.org „Recenzja”
  • generator recenzji fragmentów bogatych
  • fragment rozszerzony google do sprawdzenia
  • narzędzie do podglądu fragmentów rozszerzonych
  • fragment sformatowany do wpisu na blogu WordPress
  • przepis na stronę z fragmentami rozszerzonymi
Crunchify — geneza — szczegóły schematu fragmentów recenzji

Krok 4 Dodajmy fragment Recenzji Schema.org

Oto kod HTML, który musisz umieścić w panelu edycji postów w 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 >

Zmodyfikuj odpowiednio wartości, a powyższy kod zostanie przekonwertowany na ładny widżet za pomocą prostych CSS tricks , jak widać na poniższym obrazku.

URL z przykładem recenzji na żywo: https://crunchify.com/crunchify-co-moved-to-genesis-framework-thesis-vs-genesis/

Genesis Framework Review autorstwa Crunchify - najlepszy motyw dla mikrodanych schema.org

I to wszystko. Po dodaniu powyższego kodu do posta na blogu wróć ponownie do Google Structured Data Validation tool i sprawdź adres URL posta :). Aktualizacja posta do SERP na podstawie algorytmu indeksowania może zająć do week .

Jakiego CSS używamy w Crunchify?

W Crunchify używamy poniższego CSS. Po prostu dodaj poniższy kod do pliku style.css swojego motywu, zmodyfikuj właściwości zgodnie z potrzebami i wszystko jest w porządku.

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

Jak mogę dodać powyższy plik CSS do strony obsługującej AMP?

Po prostu dodaj powyższą treść CSS pod <head> swojej strony pod tagiem 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 >

Daj mi znać, jeśli masz więcej pytań.

Nie zapomnij zdobyć kopii Genesis Framework.

Miłego blogowania.