Topik pembahasan kali ini mengenai Meta Tag Open Graph Protocol, bagi yang mungkin baru pertama kali membaca atau mendengar Meta Tag Open Graph Protocol ini sedikit saya beri penjelasan yaitu sebuah kode meta tag yang berguna untuk membantu mesin media sosial menampilkan informasi konten yang lebih informatif pada saat dibagikan atau dipublikasi. Konten lebih informatif ini yang dimaksud sanggup menampilkan judul, gambar, dan deskripsi halaman yang kita bagikan atau share di media sosial dengan kata lain tampilan konten tidak monoton yang hanya beruba judul atau bahkan tulisan link saja.
Berpengaruh dengan traffic atau pengunjung apa nggak? Menurut saya pasti berpengaruh terutama konten yang terlihat menarik dan informatif di sebuah sosial media juga akan mengundang rasa penasaran calon pengunjung untuk berkunjung.
Baca juga : Microdata Schema dan Open Graph Protocol Penunjang SEO Blogger
Cara Menambahkan Meta Tag Open Graph Protocol
Ikuti langkah - langkah dibawah ini untuk menambahkan kode Meta Tag Open Graph Protocol pada halaman blogspot.Khusus untuk template yang tidak menggunakan kode <b:include data='blog' name='all-head-content'/> pada bagian <head>, cukup mengikuti langkah 1,2,3 saja.
Sedangkan untuk template yang menggunakan kode <b:include data='blog' name='all-head-content'/>, tidak perlu melakukan langkah 3 atau dilompatin saja untuk langkah nomor 3.
Baca juga : Apa itu All Head Content
INGAT UNTUK MELAKUKAN BACKUP TEMPLATE TERLEBIH DAHULU SEBELUM MELAKUKAN PERUBAHAN.
DWYOR (Do With Your Own Risk), KEGAGALAN ATAU KESALAHAN YANG TERJADI ADALAH TANGGUNG JAWAB MASING - MASING PEMILIK BLOGSPOT.
- Buka halaman Blogger dan login akun Blogger.
- Pilih Edit Template kemudian Edit HTML
- Cari kode </head> dan copy kode Open Graph dibawah ini, letakkan diatas kode </head>
Kode Open Graph dibawah ini khusus untuk template yang tidak menggunakan kode <b:include data='blog' name='all-head-content'/> pada bagian <head>
<!-- Open Graph Meta Tags BEGIN -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='website' property='og:type'/>
<meta content='URL FANPAGE ATAU PROFILE FB' property='author'/>
<meta content='URL FANPAGE' property='publisher'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='data:post.snippet' name='og:description'/>
<meta content='URL LOGO BLOG' property='og:image'/> <!-- Rekomendasi 1200x630 -->
<meta content='URL LOGO BLOG' property='og:image'/> <!-- Rekomendasi 200x200 squared -->
<!-- Open Graph Meta Tags END --> - Sama seperti langkah 3, tapi kode Open Graph dibawah ini dikhususkan hanya untuk template yang menggunakan kode <b:include data='blog' name='all-head-content'/> pada bagian <head>
<!-- Open Graph Meta Tags BEGIN -->
<meta content='website' property='og:type'/>
<meta content='URL FANPAGE ATAU PROFILE FB' property='author'/>
<meta content='URL FANPAGE' property='publisher'/>
<meta content='URL LOGO BLOG' property='og:image'/> <!-- Rekomendasi 1200x630 -->
<meta content='URL LOGO BLOG' property='og:image'/> <!-- Rekomendasi 200x200 squared -->
<!-- Open Graph Meta Tags END --> - Selesai.
Proses penambahan kode Meta Tag Open Graph Protocol diatas masih belum sempurna tanpa adanya URL atau LINK sebuah gambar logo blog kita masing - masing, perhatikan tulisan URL LOGO BLOG nah isi URL LOGO BLOG ini dengan URL logo blog kita sendiri agar saat kita proses Debug (sebagai contoh menggunakan tools Sharing Debugger Facebook atau kunjungi URL ini https://developers.facebook.com/tools/debug/.) halaman blog beranda kita bisa memunculkan logo tersebut.
Mengenai ukuran gambar sangat disarankan menggunakan gambar berukuran 1200px X 630px untuk mendapatkan hasil yang lebih menarik, dikarenakan dengan ukuran tersebut tampilan gambar pada saat kita share akan tampak lebih besar. Tapi tidak menutup kemungkinan apabila kita tetap menginginkan ukuran gambar kotak atau squared picture bisa menggunakan ukuran 200px X 200px (jangan dibawah 200 pixel karena gambar tidak akan muncul saat kita proses debug maupun kita share di media sosial), umumnya ukuran 200px X 200px ini lebih cocok digunakan untuk simbol atau favicon halaman blogspot.
Baca juga : Apa itu CSS
Lebih jelasnya contoh tampilan gambar besar 1200px X 630px dan gambar kotak 200px X 200px, bisa perhatikan contoh gambar dibawah ini.
Sampai disini dulu artikel mengenai Cara Menambahkan Meta Tag Open Graph Protocol, semoga artikel ini bermanfaat bagi kita pemilik blog yang ingin mengembangkan halaman blog kita.
Terima kasih
Baca juga : Meta Tag Dasar Penunjang SEO Halaman Blogspot
Artikel ini ditulis oleh :
Amateur Blog Design
thanks gan berhasil, sangat bermanfaat infonya
ReplyDeleteOke siap gan, sama - sama gan saling berbagi info bermanfaat seputar blogging juga..
DeleteKomplit ya penjelasannya. Openid grap ini apa berfungsi untuk semua jenis template?
ReplyDeleteOpengraph berguna untuk semua halaman HTML termasuk wordpress, blogger, dan halaman web sebuah company profile pun bisa..
DeleteHanya saja kalau untuk blogger ada sedikit perubahan kode..
Inti dari opengraph adalah memberi data informasi meta tag, suapaya di blogger bisa otomatis mengenali informasi judul, deskripsi, gambar thumbnail kita harus menggunakan expr:content="konten"
Kalau panduan standart dari opengraph yang umum kan menggunakan content="konten"
Seperti itu gan..
tanya gan. bukannnya tanpa meta tag ini kalo kita share di medsos juga udh ada deskripsi nya?
ReplyDeletetrus klo dipake kira" ngaruh ga sama elemen lain di blog?
Tanpa kode opengraph bisa muncul dikarenakan pada template agan sudah memiliki kode opengraph tersebut gan..
DeleteKalau kita memncoba membuat template blogger tersendiri, sebetulnya di widget id="blog1" belum mendukung kode opengraph gan..
ini fungsinya untuk apa ya gan ?
ReplyDeletemangstab gan, tak coba dulu
ReplyDeleteklo blogger lebih rumit ya gan, saya pribadi pake wordpress mudah banget nyususun meta deskripsi
ReplyDeleteBlog saya udah otomatis mas, oh ini caranya toh, sangat bermanfaat sewaktu-waktu kalau belum ada bisa diterapkan. Makasih mas bantuannya.
ReplyDeletewah sangat bermanfaat gan infonya thanks sudah di share
ReplyDeletebermanfaat sekali gan, ana langsung praktekkan nih...memang penting meta tag ini
ReplyDeleteAkhirnya nemu juga tutor kaya gini thanks min
ReplyDeleteweh keren aku mai coba lah. kadang gambarnya yg muncul ngawur. thanks yah
ReplyDeleteIya gan mungkin kode opengraph yang ada pada template kurang tepat..
DeleteKalau template yang baru - baru dan selalu update biasanya pasti ada pembenahan juga koq untuk kode opengraph yang ada di template itu..
izin bookmark gan
ReplyDeleteOk siap gan..
Deleteoke mantap bro... tapi kalo misalkan kita share di medsos terutama facebook... bukannya ada keterangannya ya...
ReplyDeleteTergantung kode meta yang ada di template gan..
DeleteSemua balik lagi ke kode meta opengraph nya, kalau og:image nya terpasang di foto profile author ntar yang muncul bisa - bisa foto yang digunakan untuk author..
bukannya lebih bagus kalau kita share yang tampil adalah gambar yangs esuai dengan artikel terebut? lebih beragam bukan? saya pakai share bawaan tempalte dan hasilnya seperti itu, tapi ada jjuga baberapa template blog yang share nya ga work seperti itu
ReplyDeleteKalau kita share URL konten ya betul gambar yang muncul adalah gambar yang ada didalam konten gan, sesuai dengan pendapat agan yaitu gambar yang relevan dengan isi konten..
DeleteContoh share di atas yang saya berikan, mungkin perlu diperhatikan lebih detil lagi bahwa contoh tersebut adalah contoh URL beranda atau URL halaman utama sebuah blog yang memuat beebrapa konten (bukan halaman per konten)
Nah sangat tidak mungkin kalau URL beranda yang dishare kemudian memuat seluruh gambar setiap konten yang muncul di halaman beranda gan..