Cara Membuat Google Rich Snipet Pada Blogspot - Selain untuk mengoptimasi Blog Anda di mesin pencarian google, Icon rating tanda Bintang juga membuat tampilan menjadi lebih menarik, sehingga membuat pengunjung tertarik untuk melihat isi dari artikel tersebut..
Gimana cara dalam Buat google rich snipet ini??? marii kita simak bersama-sama tulisan dibawah ini dengan cara seksama dan dalam tempo yang sesingkat-singkatnya..
Berikut adalah langkah untuk icon rating tanda bintang :
#1. Pertama,sobat harus memiliki akun Google Plus (Google+),mudah kok sob,tinggal daftar aja di SINI
Syarat ini adalah untuk mendapatkan nomor ID dari akun Google+ sobat,yang nantinya akan kita gunakan sebagai verifikasi dari Google Rich Snippets yang akan kita bahas kali ini.
Setelah kalian memiliki akun Google+,coba kalian pergi ke menu Profil lalu simpan no ID yang tampil dari akun Google+ sobat,no ID ini akan tampil di address bar browser yang sobat gunakan,lihat gambar (gb.1) sob:
gb.1
Setelah itu,untuk sementara simpan dahulu ya gan no ID gOOgle+ milik sobat.Sebagai contoh no ID Google+ milik saya sendiri adalah118207325935415873536
#2. Sekarang,pergilah ke Dashboard blogger milik sobat,lalu pilih Tata Letak dan klik tab Edit HTML kemudian jangan lupa contreng tulisan Expand Widget Templates dan cari kode(gunakan Ctrl+F untuk mempermudah pencarian)
Setelah kode tersebut sobat ketemukan,kini letakkan kode dibawah ini tepat dibawah kode<head>tersebut:
<link href='https://plus.google.com/no_id_sobat' rel='publisher'/>
misal dengan ID Google+ yang saya miliki akan menjadi seperti ini atau bisa lihat (gb.2):
<link href='https://plus.google.com/118207325935415873536' rel='publisher'/>
lihat gambar:
gb.2
Simpan template sobat.
#3. Langkah selanjutnya,masih dalam halaman yang sama,pergilah ke Dashboard blogger milik sobat,lalu pilih Tata Letak dan klik tab Edit HTML kemudian jangan lupa contreng tulisan Expand Widget Templates dan cari kode<body>dan tepat dibawahnya letakkan kode berikut atau lihat (gb.3):
<div>
<div itemscope='' itemtype='http://data-vocabulary.org/Review'>
atau lihat gambar:
gb.3
Kemudian cari kode</body>dan tepat diatasnya letakkan kode penutup berikut atau lihat (gb.4):
</div></div>
lihat gambar:
gb.4
Simpan templates sobat.
#4. Pergilah ke Dashboard,lalu pilih Tata Letak dan klik tab Edit HTML kemudian jangan lupa contreng tulisan Expand Widget Templates.Gunakan Ctrl+F dalam keyboard dan tuliskan kode berikutpost-title entry-title,akan terlihat seperti gambar dibawah (gb.5) ini:
gb.5
Hal ini akan menemukan secara otomatis kode yang kita cari,untuk barisan kodenya biasanya akan terlihat seperti ini:
<h3 class='post-title entry-title'><b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Sekarang,sisipkan kode berikut antara barisan kode tersebut:
<span itemprop='itemreviewed'><span itemprop='description'></code> dan <code></span></span>
Sehingga akan menjadi seperti ini atau lihat (gb.6):
<span itemprop='itemreviewed'><span itemprop='description'>
<h3 class='post-title entry-title '><b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</span></span>
</b:if>
Dari gambar yang berhasil saya print screen akan seperti ini:
gb.6
Simpan templates sobat.
#5. Pergilah ke Dashboard,lalu pilih Tata Letak dan klik tab Edit HTML kemudian jangan lupa contreng tulisan Expand Widget Templates lalu cari kode<data:post.body/>atau<p><data:post.body/></p>
Setelah ketemu,letakkan persis dibawahnya barisan kode google rich snippets breadcrumbs ini:
Description: <span itemprop="description"><data:post.title></data:post.title></span>
Rating: <span itemprop="rating">3.5</span>
Reviewer: <span itemprop="reviewer"><data:post.author></data:post.author></span>
ItemReviewed: <span itemprop="itemreviewed"><data:post.title></data:post.title></span>
atau bisa lihat (gb.7)
gb.7
Bagaimana jika saya menemukan kode<data:post.body/>lebih dari satu? tidak mengapa sob,tinggal letakkan kode google rich snippets breadcrumbs tersebut tepat dibawah masing-masing kode<data:post.body/>yang ada di template blog milik sobat.
Simpan templates.
#6. Langkah berikut ini adalah yang terpenting karena mempengaruhi dalam kesuksesan cara mem-verifikasi Google Rich Snippets yang akan kita bahas ini.
Pergilah ke akun Google+ milik sobat,dan pilih menu Profil maka akan sobat lihat di sebelah kanan atas tombol 'Edit Profil',Klik tombol 'Edit Profil' tersebut dan klik link 'Kontributor Untuk' (gb.a)
Lihat gambar berikut ini:
gb.a
Selanjutnya,klik link 'Tambahkan Tautan....' (gb.b)
gb.b
Isi label dan url,label bisa sobat kasih nama sesuai keinginan sedangkan url sobat tuliskan alamat blog yang sobat miliki lalu klik tombol 'Simpan',lihat gambar (gb.c)
gb.c
#7. Langkah terakhir,sobat kunjungiRich Snippets Testing Toollihat gambar berikut (lihat gb.d):
gb.a
Isikan url blog milik sobat untuk mengetes hasil Google Rich Snippets yang baru saja kita ciptakan,jika sukses akan tampil seperti gambar dibawah ini gan:
Hhhhh...Selesai sudah..ahirnya jadi jugaa usaha untuk membuat icon bintang-bintang ituu..kwkwkkw
Semoga Kalian juga berhasil seperti punya Sayaa..
Good Luck.!
0 komentar:
Posting Komentar
Sebagai Pengunjung yang baik berikanlah komentar anda untuk membantu meningkatkan trafic blog ini.Terima Kasih :)