Open Graph Blogspot – cara mengatasi masalah share gambar di Facebook

Bagi pengguna Blogspot, cara mengatasi masalah share gambar di Facebook yaitu dengan memasang kode Open Graph protocol.

Open Graph

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 == &quot;item&quot;'>
<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='&quot;en_US&quot;' 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.

Author: Jevuska

Rachmanuddin Chair Yahya a.k.a Jevuska is the founder of Jevuska.Com, a qualified web about offering medical articles, blogging, tips, and tutorial of WordPress. Having written for Jevuska since 2007.

13 thoughts on “Open Graph Blogspot – cara mengatasi masalah share gambar di Facebook”

  1. 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

  2. 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.

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

  3. 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 ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Use tag [php] to add code, e.g. [php]<?php echo $var; ?>[/php]