Tag: Open Graph

Open Graph Blogspot - cara mengatasi masalah share gambar di Facebook

Masalah share konten web ke jejaring sosial (social media) artinya kita membicarakan yang namanya OGP (Open Graph protocol). Bagi webmaster, masalah yang biasa terjadi pada saat sharing postingan seperti:

  • Gambar tidak muncul.
  • Bukan gambar yang diinginkan.
  • Judul atau title konten tidak ada.
  • Deskripsi konten tidak ada.

Masalah ini sering terjadi di Facebook, karena mereka punya protokol tersendiri untuk open graph, namanya Social Graph, yang diperkenalkan oleh founder Facebook sendiri, Mark Zuckerberg.

Open Graph Blogspot

Khusus untuk Blogspot, jika Anda mengalami masalah seperti yang disebutkan di atas saat share gambar di Facebook, maka cara mengatasi masalah tersebut yaitu dengan memasang kode OGP berikut, tempatkan sebelum kode </head> dalam template editor blog Anda.

<meta expr:content='data:blog.metaDescription' name='description' property='og:description'/>
<meta expr:content='data:blog.pageTitle' name='keywords'/>
<meta content='FB_APP_ID' property='fb:app_id'/>
<meta content='FB_ADMIN_ID' property='fb:admins'/>
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta content='http://NAMABLOG.BLOGSPOT.COM/p/about.html' property='article:author'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='URL_GAMBAR_DEFAULT_JIKA TIDAK_ADA_GAMBAR_DALAM_POSTINGAN_DENGAN_UKURAN_DIMENSI_MINIMAL_200x200.jpg' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalHomepageUrl' property='og:url'/>
<meta content='blog' property='og:type'/>
<meta content='URL_GAMBAR_DEFAULT_HALAMAN_DEPAN_DENGAN_UKURAN_DIMENSI_MINIMAL_200x200.jpg' property='og:image'/>
</b:if>
<meta expr:content='"en_US"' property='og:locale'/>

Sumber script bloggerhow.com.

Untuk mendapatkan ID aplikasi Facebook (FB_APP_ID) baca di sini. Sedangkan ID admin Facebook (FB_ADMIN_ID) baca di sini.

Di Blogger, OGP judul atau title konten diambil dari title postingan, deskripsinya diambil dari meta description, gambarnya dari link rel image_src atau jika dengan menggunakan kode di atas diambil dari ukuran thumbnail gambar postingan. Khusus untuk masalah sharing gambar di Facebook, Social Graph mempersyaratkan ukuran dimensi gambar jangan terlalu kecil, minimal 200X200 pixel, masing-masing untuk lebar (width) dan tinggi (height). Gunakan tool Debug Open Graph Facebook di sini untuk memeriksa apakah ada kesalahan di setiap protokol. Tool ini sekaligus membersihkan cache dari konten yang telah di-share sebelumnya.

Tips Posting Gambar

Share gambar di FB profile & page berbeda dari segi tampilan. Jadi untuk pengguna Blogger/Blogspot (sebenarnya untuk semua platform situs sih), usahakan saat memposting gambar memperhatikan ukuran dimensi gambar minimal 200×200 px. Jika ukuran gambar dalam postingan yang kita inginkan tidak memungkinkan, usahakan gambar tersebut diberikan tautan ke gambar dengan dimensi yang lebih besar. Selain Facebook, Twitter dan Google plus sudah mengimplementasikan bahasa protokol open graph ini. Semoga tutorial ini bermanfaat.


 Share