Memasang Facebook Open Graph Meta Data di Blogger

Facebook Open Graph adalah sebuah meta data dari facebook yang fungsinya untuk mengintregasikan plugin-plugin facebook yang ada di blog dan website, seperti tombol Like, Rekomendasi, dan masih banyak lagi.

Tetapi kadang sering muncul masalah waktu kita membagikan artikel ke facebook, gambar, judul artikel, deskripsi tidak muncul semestinya. Itu di akibatkan meta data dari facebook tidak membaca dengan benar dari artikel yang kita bagikan. Maka dari itu kita harus menambahkan open graph meta data facebook di blog/web kita secara manual. Berikut beberapa atribut dan property yang harus di tambahkan di dalam template:

og: title: Kondisi ini merupakan judul posting Anda, blog, dll
og: url: ini merupakan URL posting Anda, homepage, dll
og: image: kondisi ini merupakan gambar yang harus ditampilkan di Facebook.
og: type: Ini merupakan jenis halaman Anda. Sebagai contoh, pada homepage kita menggunakan "blog" dan pada halaman artikel kita menggunakan "artikel" atribut.

Berikut Langkah-langkahnya:

1. Cari kode <html di template blog kamu

2. Tambahkan namespace ini xmlns:og='http://ogp.me/ns#' di sebelahnya. Keseluruhannya akan menjadi seperti ini <html xmlns:og='http://ogp.me/ns#'

3. Cari kode <head>, dan paste kode berikut di bawahnya

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='URL logo blog kamu' property='og:image'/>
</b:if>

4. Simpan template

Kamu bisa mengeceknya di Facebook Debugger untuk mengetahui apakah meta data open graphnya sudah benar. Jika masih terdapat error, perhatikan baca keterangannya untuk memperbaikinya kembali.

Sekarang coba bagikan salah satu artikel blog kamu, apakah sudah benar gambar, judul, dan deskripsi artikelnya. Jika masih belum, coba cek di facebook debugger URL artikelmu. Setelah itu coba bagikan lagi, maka gambar, judul, deskripsi sudah muncul sebagaimana mestinya.

Terkadang kamu harus melakukan cek satu per satu url artikel di facebook debugger, karena dengan cara seperti itu alat facebook bisa dengan cepat memperbarui updateannya. Semoga tutorial ini bermanfaat dan bisa membantu masalah waktu share artikel ke facebook.