Senin, 07 November 2016

Kamu Harus Tahu Open Graph, Biar Blog Makin Keren


Hah, apa itu open graph? OK. Kali ini kita akan bahas salah satu aspek yang masih jarang disinggung di dunia SEO Indonesia. Ada yang pernah share link ke Facebook atau media sosial lain? Pasti pernah, lah.

Tapi kalian heran gak, sih. Bagaimana bisa dalam sekian detik Facebook bisa menampilkan preview gambar, di antara sekian banyak gambar dari halaman yang kamu share ?
Jawabannya adalah karena Open Graph.

Open Graph merupakan salah satu spesifikasi mengenai penerapan struktur data website, sehingga lebih mudah beradaptasi dengan media sosial, kita-kira begitulah saya mengartikan Open Graph. Saat ini sudah banyak template yang mendukung Open Graph meta tag. Tapi anehnya, ketika saya mengetik kata open graph di google, hasilnya tidak sebanya hasil pencarian kata SEO.

Memang, sebenarnya open graph tidak berhubungan langsung dengan masalah SEO, akan tetapi, dengan menerapkan open graph, website kita akan terlihat menarik ketika di share di media sosial. Salah satu contohnya adalah Facebook. Open graph merupakan aspek yang diperhatikan oleh Facebook. Dengan informasi metadata open graph, Facebook dapat mencari informasi dasar dari blog kita; url, gambar, deskripsi, dan lainnya dengan lebih cepat.

So, bagaimana cara menerapkan open graph di website kita?
Open graph berada di antara tag <head>; sekilas mirip seperti meta tag pada umumnya. Yang jadi pembeda adalah, open graph menggunakan field 'property', bukan 'name' seperti meta tag pada umumnya.

Menurut spesifikasi, ada 4 field wajib yang harus ada dalam setiap page.
  • og:title untuk menunjukkan judul halaman,
  • og:type untuk menunjukkan jenis halaman,
  • og:url untuk menunjukkan link halaman yang sedang diakses, dan
  • og:image menunjukkan url gambar yang merepresentasikan konten halaman.
  • og:description Tidak wajib, tapi penting untuk menunjukkan sedikit ringkasan isi konten.

Contohnya implementasinya seperti ini:

<meta property="og:title" content="Info lomba" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.lomba.asia/123/lomba-panjat-pinanfg" />
<meta property="og:image" content="http://info.lomba.asia/wp-content/uploads/2016/11/POSTER-LKTI-FIX-360x240.jpg" />

Tanpa open graph, link yang kita share di facebook tidak akan menampilkan preview gambar. Jika kalian masih belum yakin, coba luangkan waktu untuk memeriksa template kalian. Dan coba share dengan menambahkan/mengurangi beberapa tag open graph.

Jadi, benefitnya cuma menampilkan gambar saat di share?
Tidak, ada tag opsional lain yang dapat membuat link yang kalian share terlihat lebih spesifik, misalnya menampilkan preview video dan musik. Untuk melihat tag seluruhnya, silahkan kunjungi link berikut.

http://ogp.me/

Sekian tulisan dari saya, semoga bermanfaat.
Load disqus comments

0 comments