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.

13 Replies to “Open Graph Blogspot – cara mengatasi masalah share gambar di Facebook”

  1. Artikelnya sih bagus, cuma sayang pas mau di copy “TAG…

    Artikelnya sih bagus, cuma sayang pas mau di copy “TAG KODEnya” susah, masa saya harus bongkar dengan cara CTL+U dulu.
    kenapa gan di iframe aja mas tag kodenya atau alihkan ke pastebin gitu

    • Double click untuk copy kodenya mas.

      Double click untuk copy kodenya mas.

  2. permisi mau nanya gan, ketika saya share postingan saya dr…

    permisi mau nanya gan, ketika saya share postingan saya dr blogspot ke google+, gambar yang nongol tidak saya inginkan. selama ini jika share postingan gitu yang muncul gambar yang pertama paling atas. tapi kali ini koq tidak. saya bingung jadinya. jadi, bagaimana caranya agar share postingan selalu menampilkan gambar yang paling atas? terimakasih gan.

    • Kalau pakai script di post ini bagaimana mas?

      Kalau pakai script di post ini bagaimana mas?

  3. kalau masalahnya cuma satu konten yang gak muncul itu gimana…

    kalau masalahnya cuma satu konten yang gak muncul itu gimana mas? tapi konten yang lainnya bisa !!

    • Kemungkinan ada masalah dengan opengraph di head, coba lakukan debug…

      Kemungkinan ada masalah dengan opengraph di head, coba lakukan debug terlebih dahulu dengan debug tool.

  4. kalo masalahnya di website bagaimana solusinya ??

    kalo masalahnya di website bagaimana solusinya ??

    • Tergantung platform website yang dipakai mas.. kalau WordPress, cukup pakai…

      Tergantung platform website yang dipakai mas.. kalau WordPress, cukup pakai jetpack dan tambahi beberapa kode jetpack di functions.php. Selengkapnya ada disitus jetpack.

  5. maaf mas saya mau bertanya. kl misalkan kita nge share…

    maaf mas saya mau bertanya. kl misalkan kita nge share post nih yaa gambar dan judul dari post sendiri itu sudah benar. tapi yg salah adalah tulisan tulisan info kecil yg biasa ada di bawah judul post an itu yang salah. bagaimana yaa cara membetulkan nya mas ?

    • section OG descriptionnya mas yang diperbaiki.

      section OG descriptionnya mas yang diperbaiki.

  6. kalau masalah terjadi dengan wordpress bagaimana mengatasinya mas?

    kalau masalah terjadi dengan wordpress bagaimana mengatasinya mas?

    • Pakai plugin mas.. misalnya jetpack.

      Pakai plugin mas.. misalnya jetpack.

Leave a Reply

*

*