3 Cara Membuat Rating Bintang Rich Snippet dengan Schema.org

Hartono Lapan S Januari 06, 2018 Blogging Comment

Rating Bintang Rich Snippet dengan Schema.org

Saat Anda searching di internet pernahkah memperhatikan sebuah situs yang memiliki rating, deskripsi, produk, author dan lain sebaginya pasti Anda pernah melihatnya, dengan adanya hal tersebut menurut Anda bagaimana pasti akan tertarik dengan artikel tersebut karena memiliki skor rating yang bagus dibanding dengan yang lain. Jika sebuah website memiliki skor bintang maka pengjuung akan melihat bahwa situs tersebut memiliki citra yang baik dan mereka akan memilih situs tersebut di bandingkan yang tidak memiliki kelengkapan seperti yang saya sebutkan diatas.

Sebagai blogger tentu kita ingin memiliki trafik dan pengunjung potensial untuk mengeklik artikle atau tautan kita pada daftar pencarian. Nah dengan menggunakan fitur tersebut akan membuat blog atau website kita menjadi lebih profesional dan akan semakin terlihat oleh pengunjung. Nah lantas bagaimana kita bisa membuat yang demikian. Untuk lebih jelasnya yuk ikuti terus pembahasanya, kita mulai dari pengertian dulu.

Apa itu Rich Snippet? merupakan bagian dari struktur data yang dimiliki mesin pencari yang akan di tampilkan. Struktur data ini memiliki beberapa element seperti judul artikel, rating, author, deskripsi dan lain sebagainya. Tentu sebagai webmaster kita bisa menambahkannya untuk kelengkapan situs kita.

Dengan menambahkan Rich Snippet yang telah kita setting sedemikian rupa untuk memberikan kelengkapan blog. Dari beberapa master SEO memang mereka lebih menganjurkan untuk membuat dan menambahkan Rich Snippet ini dengan data selengkap mungin. Krena memang ini juga bagian dari pengoptimalan website yang di kelola. Lalu apakah serpengaruh dengan CTR atau trafik? Ya benar dari kelangkapan tersebut pengunjung akan lebih antusias dan melihat situs yang memiliki rating misal akan lebih memilih situs tersebut dibandingkan denga yang tidak menerpakanya.

Namun perlu di ingat ini bukan yang menjamin bahwa blog Anda memiliki peringkat atas karena memang ini hanya salah satu upaya untuk meningkatkan antusias pengunjung, jika ingin mendapatkan peringkat maksimal tentunya masih banyak yag harus di optimalkan dari segi SEO maupun dari segi kualitas artikel atau konten yang dimiliki karena memang Google lah yang memiliki wewenang yang akan memberikan peringkat situs Anda.

Tutorial seperti ini memang sudah menjadi pembahasan bertahun-tahun yang lalu, Tetapi tutorial yang kebanyakan sering menggunakan tipe item denga http://data-vocabulary.org, seperti: itemtype="http://data-vocabulary.org/Review-aggregate".

Membuat Rating Bintang Rich Snippet dengan Schema.org

Tutorial ini memang saya peruntukan untuk Blogger yang memang saya juga lebih familiar denga blogger ini. Kemudian dari sini saya akan memberikan 3 cara untuk membuat Rating Bintang Rich Snippet tersebut untuk itu silahkan Anda menyesuaikan sendiri dan memilih mana yang pas untuk Anda.

1). Cara pertama:

Untuk memulainya silahkan Anda masuk terlebih dahulu ke Blogger Anda:

Log in ke blogger dengan akun blogger anda.
Klik Theme -> Edit HTML.
Kemudian silahkan cari kode <head> atau <head> Kemudian paste kode tersebut pas di bawah kode yang telah Anda cari tadi berikut kodenya silahkan di copy dan pastekan:

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebPage",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "95",
"bestRating": "100",
"worstRating": "0",
"ratingCount": "46"
},
"review": {
"@type": "Review",
"url": "<data:blog.url/>",
"author": {
"@type": "Person",
"name": "Nama Anda",
"sameAs": "https://plus.google.com/XXXXX"
},
"publisher": {
"@type": "Organization",
"name": "<data:blog.title/>",
"sameAs": "<data:blog.homepageUrl/>"
},
"description": "<data:blog.pageName/>",
"inLanguage": "id",
"reviewRating": {
"@type": "Rating",
"worstRating": 0,
"bestRating": 5,
"ratingValue": 4.5
}
}
}
</script>

Perhatikan beikut ini:

Untuk bagian angka-angka yang tertera di atas merupakan kode yang bisa di seting manual, dalam artian rating yang akan di tampilkan mesin pencari tidak otomatis.
Coba perhatikan pada bagian yang ada (XXXXX pada https://plus.google.com/XXXXX) ganti lah dengan ID Google Plus Anda.
Kemudian pada bagian kode ini "name" : ("Nama Anda") silahkan ganti dengan nama Anda.

2). Cara Kedua:

Untuk yang kedua rich snippet ini dapat Anda simpan pada item type BlogPosting (itemtype='http://schema.org/BlogPosting'). Untuk lebih jelasanya coba perhatikan kode berikut ini:

<div class='review-wrapper' itemprop='aggregateRating' itemscope='' itemtype='http://schema.org/AggregateRating'>
<meta expr:content='data:blog.pageName' itemprop='name'/>
<meta expr:content='data:blog.url' itemprop='url'/>
<meta content='4.6' itemprop='ratingValue'/>
<meta content='1299' itemprop='ratingCount'/>
<meta content='0' itemprop='worstRating'/>
<meta content='5' itemprop='bestRating'/>
</div>
<div class='review-wrapper' itemprop='review' itemscope='' itemtype='http://schema.org/Review'>
<meta expr:content='data:blog.pageName + " adalah artikel yang bermanfaat dan menarik "' itemprop='description'/>
<meta expr:content='data:blog.url' itemprop='url'/>
<meta expr:content='data:post.timestampISO8601' itemprop='datePublished'/>
<meta content='id' itemprop='inLanguage'/>
<span style='display:none' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<b:if cond='data:post.authorProfileUrl'>
<span>
<a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author'>
<span itemprop='name'><data:post.author/></span>
</a>
</span> </b:if></span>
</div>

Cara penerapanya biar mudah perhatikan berikut ini:

<article class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
……………………….
……………………….
……………………….
……………………….
<div class='review-wrapper' itemprop='aggregateRating' itemscope='' itemtype='http://schema.org/AggregateRating'>
<meta expr:content='data:blog.pageName' itemprop='name'/>
<meta expr:content='data:blog.url' itemprop='url'/>
<meta content='4.6' itemprop='ratingValue'/>
<meta content='1299' itemprop='ratingCount'/>
<meta content='0' itemprop='worstRating'/>
<meta content='5' itemprop='bestRating'/>
</div>
<div class='review-wrapper' itemprop='review' itemscope='' itemtype='http://schema.org/Review'>
<meta expr:content='data:blog.pageName + " adalah artikel yang bermanfaat dan menarik "' itemprop='description'/>
<meta expr:content='data:blog.url' itemprop='url'/>
<meta expr:content='data:post.timestampISO8601' itemprop='datePublished'/>
<meta content='id' itemprop='inLanguage'/>
<span style='display:none' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<b:if cond='data:post.authorProfileUrl'>
<span>
<a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author'>
<span itemprop='name'><data:post.author/></span>
</a>
</span> </b:if></span>
</div>
</article>

3). Cara Ketiga:

Nah untuk yang bagian ketiga ini apabila pada tamplate yang Anda download sudah ada kode HTML yang telah terpasang item type sebagai berikut: ( itemtype='http://schema.org/WebPage' ) maka simpan kode berikut, tepat di bawah (diantara) elemen kode tadi.

<div class='review-wrapper' itemprop='aggregateRating' itemscope='' itemtype='http://schema.org/AggregateRating'>
<meta expr:content='data:blog.pageName' itemprop='name'/>
<meta expr:content='data:blog.url' itemprop='url'/>
<meta content='4.6' itemprop='ratingValue'/>
<meta content='1299' itemprop='ratingCount'/>
<meta content='0' itemprop='worstRating'/>
<meta content='5' itemprop='bestRating'/>
</div></b:if>
</div>

Cara penerapanya biar mudah perhatikan berikut ini:

<body itemscope='itemscope' itemtype='http://schema.org/WebPage'>
<div class='review-wrapper' itemprop='aggregateRating' itemscope='' itemtype='http://schema.org/AggregateRating'>
<meta expr:content='data:blog.pageName' itemprop='name'/>
<meta expr:content='data:blog.url' itemprop='url'/>
<meta content='4.6' itemprop='ratingValue'/>
<meta content='1299' itemprop='ratingCount'/>
<meta content='0' itemprop='worstRating'/>
<meta content='5' itemprop='bestRating'/>
</div>
</div>
……………………….
……………………….
……………………….
……………………….
……………………….
</body>

Setelah Anda menerapakan beberapa Rich Snippet di atas maka akan menjadi baigian wabpage Anda di mesin pencari. Silahkan pilih yang sekiranya pas dan mudah untuk di terapkan pada blog Anda.

Setelah Anda menerapkan kode-kode diatas dengan benar juga akan membutuhkan waktu untuk bisa tampil dan bahkan tidak bisa langsung tampil begitu saja di mesin pencari memang membutuhkan waktu bisa jadi sampai berbulan-bulan tergantung perayapan mesin pencari atau Bot Search Engine.

Perlu di ingat bahwa: Panduan ini tidak mutlak bisa di terapkan pada setiap blog karena memang belum tentu berhasil 100% ada beberapa faktor yang akan mempengaruhi dari segi search engine, dan juga tidak setiap halaman bisa menampilkan rating ini. Namun demikian apa salahnya jika kita mencobanya.

Sekian pembahasan kali ini tentang Rating Bintang Rich Snippet dengan Schema.org. Semoga artikel yang sedikit ini memberikan informasi yang bermanfaat untuk Anda. Jika ada kekurangan saya mohon maaf jika berkenan mau menambahi atau ingin berbagi dengan pengunjung yang lain silahkan berkomentar di bawah ini Terimakasih salam sukses untuk kita semua.

6 Jan 2018