Mengenal Facebook Open Graph Protocol

Picture ofMengenal Facebook Open Graph Protocol
sumber: ogp.me

Open Graph Protocol merupakan salah satu standar penulisan metadata halaman web. Open Graph digunakan oleh Facebook sebagai standar penulisan meta tag halaman web, sehingga lebih terkenal dengan Facebook Open Graph. Pemberian meta tag pada halaman web dimaksudkan agar memberikan hasil rendering yang baik ketika sebuah halaman web di-like, share oleh pengguna Facebook.

Penulisan tag Open Graph menggunakan format XHTML + RDFa. Berbeda dengan tag RDFa lain yang bisa disisipkan dalam elemen body html, tag-tag Open Graph hanya disisipkan dalam elemen head html.

Dalam sebuah halaman html biasanya ada meta tag seperti berikut ini:





Open Graph juga disisipkan dalam elemen head html, bedanya, kalau di meta tag html menggunakan name, kalau Open Graph menggunakan property.

Open Graph mempunyai beberapa tag:
og:title – Judul tulisan
og:type – jenis dokumen, bisa: article, website, blog, dll.
og:image – url gambar
og:url – url halaman

optional
og:description – deskripsi halaman
og:sitename – nama situs

contoh penggunaan Facebook Open Graph:



The Rock (1996)





Dari contoh di atas, ada penambahan html prefix: prefix=”og: http://ogp.me/ns#, ini dilakukan agar prefix og: dalam element meta dikenali sebagai tag Open Graph. Bisa juga menggunakan xmlns, seperti penulisan di website paradesain.net


.......

Apa gunanya menyisipkan meta tag Facebook Open Graph?

Penulisan standar diperlukan apabila halaman di-render oleh fasilitas social plugin Facebook seperti ketika ada yang me-like, share, dll. Facebok akan membaca informasi judul, jenis artikel, deskripsi tulisan, url dll, untuk kemudian ditampilkan ringkasannya dalam wall pemakai Facebook yang, misalnya, melakukan share artikel.

Contoh hasil rendering dihalaman Facebook:

Contoh hasil rendering halaman web di Facebook yang menggunakan Facebook Open Graph

Contoh hasil rendering halaman web di Facebook yang menggunakan Facebook Open Graph

Berdasarkan pengalaman, tanpa pemformatan khusus, Facebook bisa merender judul, foto, deskripsi dari meta tag html sebuah halaman website, tapi sering kalau di halaman ada beberapa gambar, maka gambar yang tampil bisa bukan gambar dari artikel yang dimaksud, inilah salah satu kegunaan penulisan Open Graph yang benar.

Dengan meta tag Open Graph yang benar, gambar yang tampil merupakan gambar dari artikel bersangkutan. Bisa disetting untuk gambar default, bagi tulisan yang tidak mempunyai gambar.

Update 2014:
– Untuk pengguna WordPress, plugin All in One SEO Pack sudah mendukung tag Facebook Open Graph, jadi tidak usah menyisipkan di bagian head lagi.



3 Responses to “Mengenal Facebook Open Graph Protocol”

  1. Apk Baru says:

    siip gan,, makasih banyak ya tipsnya,, nubi ijin nyobain sekalian belajar lah..

  2. baru tahu kalau ada open graph fb, pantesan klu share ke fb gambarnya suka ngacak, ijin nerapin ya boss

Leave a Comment

Click here to cancel reply.

©Copyleft 2007 - 2017 by paradesain.net :: Jasa Pembuatan Website. All Rights Reserved.
home / hubungi kami / rss / sitemap / valid xhtml / credit

Semua artikel dan dokumen PDF yang ditulis Paradesain.Net dan ditampilkan di website ini berlisensi Creative Commons Attribution 4.0 International License.