META OPEN GRAPH

Meta Open Graph.

• Meta ini berfungsi untuk menandai element-element tertentu pada situs / blog untuk ditampilkan saat dibagikan di Facebook.
• Jika meta tag pada umumnya adalah dioptimasi untuk mesin pencarian Google, maka meta og (Open Graph) ini dioptimasi untuk Facebook.
• Elemen yang umumnya akan dideteksi adalah :
  Gambar utama, Judul situs, judul postingan dan deskripsi seperti pada contoh gambar dibawah ini.
• Pada gambar ini menunjukkan bagaimana tampilan situs atau blog jika dibagikan ke Facebook.

.

• Oleh karena itu, bagi yang ingin situs / blog nya tampil menarik di Facebook wajib menambahkan elemen-elemen yang disebutkan tadi sebagai meta Open Graph.
• Dibawah ini rangkaian kode meta tag yang bisa kamu sesuaikan dengan blog / situs, copy edit lalu pastekan kedalam template lalu simpan.

Copy, paste dan edit kode Meta berikut ini:

<!-- Facebook Open Graph -->
<meta content='MASUKKAN ID PROFIL FB' property='fb:admins'/>
<meta content='MASUKKAN ID HALAMAN / FANSPAGE (Bisa lebih dari 1 ID)' property='fb:pages'>
<meta content='MASUKKAN ID APLIKASI FB' property='fb:app_id'/>
<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.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta expr:content='data:blog.pageName' property='og:image:alt'/>
<b:else/>
<meta content='http://MASUKKAN URL GAMBAR DISINI/' property='og:image'/>
    <meta content='png' property='og:image:type'/>
    <meta content='ISI DENGAN UKURAN TINGGI GAMBAR - TANPA px' property='og:image:width'/>
    <meta content='ISI DENGAN UKURAN PANJANG GAMBAR - TANPA px' property='og:image:height'/>
<meta content='MASUKKAN JUDUL GAMBAR' property='og:image:alt'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='MASUKKAN DESKRIPSI DISINI' property='og:description'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
</b:if>
<!-- End Facebook Open Graph -->

Apabila setelah di uji dengan debugger terdapat kesalahan atau ditemukan meta ganda,
silahkan dihapus dan gunakan meta pokoknya saja dibawah ini :

<!-- Facebook Open Graph -->

    <meta content='ID PROFIL FB' property='fb:admins'/>

    <meta content='ID HALAMAN FB' property='fb:pages'/>

    <meta content='ID APLIKASI FB' property='fb:app_id'/>

    <meta expr:content='data:blog.title' property='og:site_name'/>

    <meta content='website' property='og:type'/>

<!-- End Facebook Open Graph -->

Petunjuk :

1. Letakkan diatas kode /head
2. Masukkan content: sesuai yang diinginkan.
3. Lalu Uji tampilan halaman yang akan dimunculkan pada saat membagikan URL / link tautan ke Facebook :
   
4. Lihat tutorial penggunaan klik tombol dibawah ini: