• Beranda
  • Artikel
  • Umum
  • Bagaimana Menambahkan Cuplikan Kaya untuk Ulasan dan Peringkat tanpa Plugin apa pun? Markup Mikrodata Google Structured Schema.org

Bagaimana Menambahkan Cuplikan Kaya untuk Ulasan dan Peringkat tanpa Plugin apa pun? Markup Mikrodata Google Structured Schema.org

Diterbitkan: 2020-04-21
Bagaimana Menambahkan Cuplikan Kaya untuk Ulasan dan Peringkat tanpa Plugin apa pun? Markup Skema.org Google Terstruktur

Pernahkah Anda bertanya-tanya how and why Google menunjukkan peringkat untuk beberapa posting ulasan khusus di Halaman Hasil Pencarian Google (SERP)?

Dalam tutorial ini kita akan membahas bagaimana add rich snippet untuk Review/Rating dalam bentuk schema.org agar Google dapat memahami detail review Anda dan menampilkannya di halaman pencarian.

Crunchify - Tema Genesis - Halaman Google memenuhi syarat untuk hasil yang kaya

Lihat hasil langsung: https://crunchify.me/2VAUkTK. Tautan Cuplikan Kaya.

Sebelum kita mulai, mari kita pahami apa itu schema.org?

Skema adalah jenis microdata yang memudahkan mesin pencari Google atau Bing untuk mengurai dan menafsirkan informasi di halaman blog Anda secara lebih effectively . Idenya adalah untuk membantu mesin telusur memahami semua data dalam structured format sehingga mesin telusur juga menampilkan data hasil yang relevan tersebut kembali ke pengguna akhir berdasarkan kueri penelusuran.

Mari kita mulai:

Point-1) Bagaimana cara menambahkan data terstruktur ke blog Anda dalam bentuk schema.org?

Di Crunchify kami menggunakan Genesis Framework dan secara default hadir dengan semua format schema.org microdata . Ini menampilkan microdata dalam kode situs Anda. Saya tidak perlu menambahkan apa pun dan itulah keindahan Genesis Framework kecuali opsi Review metadata yang akan kita discuss below ini.

Poin-2) Bagaimana cara memverifikasi data terstruktur situs Anda?

Google Search Console secara default menyediakan opsi untuk melihat data terstruktur. Perhatikan diagram di bawah ini.

Google Search Console - Laporan Data Terstruktur - Crunchify
Verifikasi semua jenis data terstruktur Schema.org di Google Search Console

Untuk melihat data ini, Anda harus menambahkan situs/blog Anda ke Search Console. Setelah Anda memverifikasi identitas situs Anda, Anda mungkin dapat langsung melihat data OR menunggu selama seminggu untuk membuat data ini dibuat automatically .

Butir-3 Bagaimana cara memverifikasi apakah data terstruktur Anda valid atau memiliki masalah?

  • Di kolom terakhir tambahan dalam diagram di atas Items with Errors , Google juga menyediakan alat tambahan yang disebut Alat Pengujian Data Terstruktur.
  • Pergi saja ke sana dan klik Fetch URL .
  • Berikan URL dan klik FETCH & VALIDATE .
  • Di sisi kanan – Anda akan melihat hasil validasi schema.org.
  • Jika terjadi kegagalan dan schema.org buruk – Anda akan melihat pesan warna MERAH .
Kiat Alat Pengujian Data Terstruktur Google
Hasil Uji Data Terstruktur untuk Postingan Crunchify

Expand above Review section dan Anda seharusnya dapat melihat semua mikrodata terperinci untuk tinjauan Anda. Anda bisa memeriksanya sendiri. Here is a URL.

Tutorial ini akan berfungsi jika Anda memiliki pertanyaan di bawah ini:

  • Mengaktifkan Cuplikan Kaya untuk Ulasan dan Peringkat
  • Data Terstruktur untuk Ditinjau
  • Data Terstruktur untuk Peringkat
  • Generator Skema Peringkat Agregat
  • Pembuat skema untuk microdata schema.org 'Tinjau'
  • pembuat ulasan cuplikan kaya
  • cuplikan kaya google untuk ditinjau
  • alat pratinjau cuplikan kaya
  • cuplikan kaya untuk posting blog WordPress
  • resep untuk situs cuplikan kaya
Crunchify - genesis - Tinjau detail skema cuplikan

Langkah-4 Mari tambahkan cuplikan Review Schema.org

Berikut adalah kode HTML yang perlu Anda masukkan ke dalam panel edit posting Anda di bawah 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 >

Ubah nilai sesuai dan kode di atas akan dikonversi menjadi widget yang bagus dengan CSS tricks sederhana seperti yang Anda lihat pada gambar di bawah ini.

URL dengan contoh tinjauan langsung: https://crunchify.com/crunchify-co-moved-to-genesis-framework-thesis-vs-genesis/

Genesis Framework Review oleh Crunchify - tema terbaik untuk microdata schema.org

Dan itu saja. Setelah Anda menambahkan kode di atas ke posting blog Anda, kembali ke Google Structured Data Validation tool lagi dan periksa URL posting Anda :). Mungkin perlu waktu hingga satu week untuk memperbarui posting Anda ke SERP berdasarkan algoritma perayapan.

CSS apa yang kami gunakan di Crunchify?

Di Crunchify, kami menggunakan CSS di bawah ini. Cukup tambahkan kode di bawah ini ke file style.css tema Anda, ubah properti sesuai kebutuhan Anda dan Anda semua baik-baik saja.

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

Bagaimana saya bisa menambahkan file CSS di atas ke Halaman yang diaktifkan AMP?

Cukup tambahkan konten CSS di atas di bawah <head> halaman Anda di bawah 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 >

Beri tahu saya jika Anda memiliki pertanyaan lagi.

Jangan lupa untuk mendapatkan Genesis Framework Copy Anda.

Selamat ngeblog.