Cara Lengkap Memasang Open Graph Facebook di Blog

Cara Lengkap Memasang Open Graph Facebook di Blog

 

Setiap hari, akan ada ribuan bahkan mungkin sampai jutaan orang yang membagikan konten mereka melalui Facebook. Lalu, dari banyaknya konten itu, bagaimana cara supaya konten yang kita bagikan bisa menarik calon pembaca untuk mengunjungi blog kita?

 

Tentu jawabannya adalah tampilkan sesuatu yang berbeda.

 

Untuk menampilkan konten yang telihat berbeda dan menarik, biasanya membutuhkan pengetahuan dunia programming yang tinggi.

 

Mengapa harus kemampuan programming?

 

Karena, tidak semua blogger benar-benar memahami bagaimana cara mengoptimalkan konten yang mereka bagikan melalui facebook. Rata-rata, mereka hanya meletakkan link dan memberikan keterangan untuk mengunjungi blog mereka.

 

Sungguh, cara seperti itu sudah Pangeran lakukan, tapi masih saja tidak memberikan pengaruh. Nah, setelah kalian nanti menggunakan Open Graph Facebook ini, akan ada keajaiban penambahan jumlah pengunjung blog kalian.

 

Pange, Open Graph Facebook itu apa, ya?

 

Open Graph Facebook adalah sebuah code Meta Tag HTML khusus yang memberikan tampilan berbeda pada saat membagikan (share) link/url blog kalian ke Facebook.

 

Bingung?

 

Bahasa gampangnya, Open Graph Facebook itu code yang memberikan tampilan berbeda ketika kalian share link ke facebook. Daripada bingung, kita masuk ke contoh.

 

Ini adalah contoh tampilan share yang menggunakan code Meta Tag HTML Open Graph Facebook :

 

Cara Lengkap Memasang Open Graph Facebook di Blog

 

Nah, sekarang udah taukan apa yang disebut Open Graph Facebook? Atau mungkin masih bingung seperti mereka :

 

Pange, gimana caranya mengatasi gambar (thumbnail) yang nggak muncul saat dishare ke facebook?

 

 

 

Pange, gimana caranya mengatasi gambar (thumbnail) yang tidak sesuai dengan postingan saat dishare ke facebook?
 

 

Pange, cara memasang Open Graph Facebook itu gimana, sih?
 

 

Pange, gimana cara mengatasi ‘xxxx’ yang muncul di deskripsi saat share ke facebook?

 

Sebenarnya ada banyak sekali pertanyaan yang diajukan. Tapi, kalo ditulis semua, nanti panduan ini gak selesai. Yang jelas inti pertanyaannya sudah terwakilkan oleh 4 pertanyaan di atas.

 

Jika kalian mengalami hal yang sama, gak usah khawatir. Pangeran akan memberikan panduan ke kalian untuk memperbaiki semuanya. Simak pembahasannya di bawah ini :

 

Introduction About Open Graph Facebook

 

Mengenai pengertian sudah Pangeran jelaskan di awal tadi. Nah, sekarang Pangeran akan mengenalkan ke kalian lebih dalam tentang penggunaan Open Graph Facebook ini.

 

Pernahkah kalian ketika membagikan sebuah konten dari blog atau website ke facebook dalam tampilan seperti ini :

 

contoh blog yang memasang open graph facebook
Contoh A

 

contoh blog yang memasang open graph facebook
Contoh B

 

 

Menurut pendapat kalian, dari kedua tampilan share di atas, manakah yang lebih menarik dilihat oleh pembaca? Benar. Contoh A adalah tampilan share yang menggunakan Open Graph Facebook dan contoh B jadi kurang menarik perhatian pembaca, karena tidak menggunakan Meta Tag Open Graph Facebook.

 

Kenapa contoh A jadi lebih menarik?

 

Alasannya, karena pada share link Contoh A menampilkan :
  1. Gambar : Menyesuaikan dengan gambar yang digunakan pada konten/artikel yang dishare dan tentunya ini bisa menjadi alasan pembaca penasaran dengan isinya.
  2. Judul : Sesuai dengan judul artikel yang dishare
  3. Deskripsi : menampilkan deskripsi singkat yang mewakili isi artikel dan tentunya hal ini juga akan membuat pemaca penasaran lalu klik blog kalian.

 

Tiga alasan di atas itu yang membuat tampilan share contoh A menjadi jelas lebih menarik pembaca untuk mengklik konten yang kalian share dibandingkan contoh B.

 

Setelah memahami konsep dasarnya Meta Tag Open Graph Facebook, sekarang Pangeran akan lanjutkan tentang code Meta Tag apa saja yang bisa kalian gunakan. Berikut panduannya:

 

Meta Tag Open Graph Facebook

 

Pada panduan ini, diharapkan untuk kalian memahami masing-masing fungsi dari code Meta Tag, tujuannya supaya kalian bisa memilih apa saja yang ingin kalian tampilkan saat link blog kalian dishare ke facebook.

 

1. Tag Title (og:title)

 

Fungsinya untuk menampilkan judul dari artikel/konten yang kalian share. Berikut cara menulis tagnya :

<meta property="og:title" content="Untukmu. Mantan." />

2. Tag Type (og:type)

 

Fungsinya untuk menampilkan termasuk type apakah link yang kalian bagikan. Berdasarkan panduan Facebook for Developers, ada banyak sekali type yang bisa kalian gunakan. Tapi, pada blog atau website, disarankan untuk menggunakan type ‘article’. Type lainnya bisa kalian baca di sini. Berikut cara menulis tagnya :

<meta property="og:type" content="article" />

3. Tag Description (og:description)

 

Tag ini difungsikan untuk menampilkan deskripsi singkat yang mewakili keseluruhan dari blog kalian. Berikut cara menulis tagnya :

<meta property="og:description" content="Apa yang kalian pikirkan tentang seorang mantan?" />

4. Tag Image (og:image)

 

Fungsi tag ini digunakan untuk menampilkan gambar yang mewakili salah satu gambar pada postingan di blog kalian. Berikut cara menulis tagnya :

<meta property="og:image" content="http://tulisanmantan.com/images/2016/10/03/arts/foto-saat-masa-indah-bersama-mantan.jpg" />

5. Tag URL (og:url)

 

Tentunya tag ini difungsikan untuk menampilkan url/link dari konten atau artikel yang dishare. Berikut cara menulis tagnya :

<meta property="og:url" content="http://www.tulisanmantan.com/2016/10/03/arts/untukmu-mantan.html" />

6. Tag Site Name (og:site_name)

 

Fungsi tag ini digunakan untuk menampilkan nama dari blog kalian. Tag ini memang tidak muncul pada tampilan share. Tapi, akan dijadikan facebook sebagai data dari blog siapakah yg dishare. Jadi, tetep perlu. Berikut cara menulis tagnya :

<meta property="og:site_name" content="Tulisan Mantan"/>

7. Tag App ID (fb:app_id)

 

Tag ini digunakan untuk mengkaitkan akun aplikasi facebook kalian ke blog. Selain itu, dengan menerapkan tag ini, akan mudah untuk mengetahui interaksi dari link yang dishare. Berikut cara menulis tagnya :

<meta property="fb:app_id" content="ID_Aplikasi_Kalian"/>

8. Tag Admins (fb:admins)

 

Tag satu ini jelas sekali digunakan untuk mengkaitkan akun facebook kalian ke blog. Selain itu, dengan menerapkan tag ini, sama fungsinya dengan Tag ke-7. Berikut cara menulis tagnya :

<meta property="fb:admins" content="facebook_id_kalian"/>

Gimana? Pada pusing semua? Hehehehe. Biar gak pusing, mari kita melihat foto yang bikin mata kalian seger lagi.

 

foto jeruk segar
Berrrr……

 

Oke, sekarang coba kita gabungkan semua code di atas tadi menjadi satu code Meta Tag yang lengkap. Begini hasilnya :
<meta property="og:title" content="Untukmu. Mantan." />
<meta property="og:type" content="article" />
<meta property="og:description" content="Apa yang kalian pikirkan tentang seorang mantan?" />
<meta property="og:image" content="http://tulisanmantan.com/images/2016/10/03/arts/foto-saat-masa-indah-bersama-mantan.jpg" />
<meta property="og:url" content="http://www.tulisanmantan.com/2016/10/03/arts/untukmu-mantan.html" />
<meta property="og:site_name" content="Tulisan Mantan"/>
<meta property=" fb:app_id" content="ID_Aplikasi_Kalian"/>
<meta property="fb:admins" content="facebook_id_kalian"/>

 

Tapi, ada masalah baru yang akan kalian alami jika menggunakan tag di atas. Kenapa? Karena penerapan Meta Tag di atas harus diterapkan di setiap postingan blog.

 

Yakin tag di atas akan jadi ribet.Makanya biar nggak ribet, Pangeran udah siapkan cara memasang open graph facebook di blog yang bisa langsung diterapkan pada semua postingan.

 

Begini caranya :

Cara Memasang Open Graph Facebook di Blog

 

Sebelum menggunakan panduan ini, pastikan bahwa di template blog kalian belum terpasang Meta Tag ini. Jika sudah, edit sesuai panduan ini.

 

1. Login ke Blogger.com > Template > Edit HTML. Nih, biar gak bingung :

 

Cara Lengkap Memasang Open Graph Facebook di Blog

 

2. Cari kode <head> biar lebih mudah, klik pada kotak HTML-nya, baru tekan CTRL + F dan masukkan kode <head> lalu tekan Enter. Nih, contohnya :

Cara Lengkap Memasang Open Graph Facebook di Blog

3. Kemudian copy dan pastekan kode di bawah ini tepat di bawah kode <head> tadi.

<!-- [ Social Media meta tag ] -->
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>  
<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></b:if></b:if></b:if>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://4.bp.blogspot.com/-qIKgWm9rKO4/VuFwDDL1rnI/AAAAAAAAE9M/XUM4q06AwBs/s1600/tulisan%2Bwortel%2Btwitter%2Bcard.png' property='og:image'/>
<meta expr:content='data:blog.blogspotFaviconUrl' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
<b:else/>
<meta content='ISI DESKRIPSI ALTERNATIF DISINI' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='KODE-APLIKASI' property='fb:app_id'/>
<meta content='KODE-ADMIN' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
  1. Ganti teks warna biru dengan URL gambar yg ada kaitan dengan blog kalian. Caranya baca di sini.
  2. Ganti teks warna merah dengan deskripsi singkat blog kalian. Atau baca panduan membuat deskripsi yang menarik.
  3. Ganti tesk warna orange dengan kode aplikasi Facebook. Jika belum punya, baca panduan cara membuat aplikasi facebook
  4. Ganti teks warna kuning dengan ID_ADMIN kalian. Berikut cara mendapatkan ID Akun Facebook kalian :

a. Buka link ini : http://findmyfbid.com/

cara mengetahui id akun facebook kita

 

 

b. Masukkan URL facebook kalian (contoh : www.facebook.com/heru.arya.penulis) ke box seperti contoh berikut :

cara mengetahui id akun facebook kita

 

 

c. Klik Find Numeric ID dan copy code tersebut pada ID_ADMIN kalian. Begini hasilnya jika benar :

 

cara mengetahui id akun facebook kita

 

 

4. Lanjut dengan mencari kode </body> biar lebih mudah, klik pada kotak HTML-nya, baru tekan CTRL + F dan masukkan kode </body> lalu tekan Enter. Nih, contohnya :

 

Cara Lengkap Memasang Open Graph Facebook di Blog

 

 

5. Kemudian copy dan pastekan kode di bawah ini tepat di atas kode </body> tadi seperti gambar di atas.
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'KODE-APLIKASI',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>

 

  1. Ganti ID_Aplikasi dengan aplikasi facebook kalian (bukan ID akun kalian). Jika belum ada, baca panduan cara membuat aplikasi facebook.

 

6. Jika sudah, klik Simpan Template.Sampai di sini sudah bisa? Karena kita belum selesai. Jika semua panduan di atas sudah kalian terapkan, saatnya kita uji apakah Meta Tag yang sudah kalian gunakan berkerja atau tidak? Begini caranya :

 

1. Buka Link berikut : Tools Debugger

 

2. Copy link postingan (baru atau yang lama) ke kotak seperti contoh berikut dan klik DEBUG :

 

cara menguji open graph facebook di blog

 

 

3. Jika panduannya kalian ikut dengan benar, hasilnya seperti ini :

 

cara menguji open graph facebook di blog

 

Catatan :

Pada pengujian ini, mungkin kalian akan mengalami hal-hal yang di luar panduan ini. Misalnya ada beberapa Tag yang tidak terdeteksi. Kalian nggak usah panik, cara mengatasi cukup klik Scrape Again untuk mengulang pengujian. Nih, yang diklik : 

cara menguji open graph facebook di blog

Untuk menjawab pertanyaan bagaimana cara mengatasi foto, gambar atau thumbnail yang tidak sesuai saat dishare, kalian bisa melakukan cara di atas. Tapi, jika deskripsi blog kalian masih tidak sesuai dengan postingan, atasi dengan membaca panduan : cara menampilkan deskripsi blog yang benar

 

 

Cara Mengatasi ‘xxxx’ yang Muncul di Deskripsi Saat Share Ke Facebook

Ini adalah pertanyaan yang paling sering Pangeran dapatkan. Tapi, berhubungan menjelaskannya sulit, makanya Pangeran selalu bilang “Ditunggu ya, panduannya.” Alhamdulillah sekarang terwujud.Begini contoh deskripsi yang isinya ‘xxxxx’ :

Cara Mengatasi ‘xxxx’ yang Muncul di Deskripsi Saat Share Ke Facebook

Supaya tidak berlama-lama, langsung saja kita mulai panduannya.

 

1. Login ke Blogger.com > Template > Edit HTML. Nih, contohnya :

 

Cara Lengkap Memasang Open Graph Facebook di Blog

 

2. Cari kode <meta content='xxxxx' property='og:description'/> biar lebih mudah, klik pada kotak HTML-nya, baru tekan CTRL + F dan masukkan kode <meta content='xxxxx' property='og:description'/> lalu tekan Enter.  Jika tidak ketemu, coba cari  property='og:description'

 

3. Setelah ketemu. Ganti 'xxxxx' (tanda kutipnya jangan dihilangkan) tersebut dengan deskripsi alternatif jika pada postingan kalian lupa menambahkan deskripsinya. Contoh : Klik dan baca cerita lengkapnya.

 

 

4. Jika sudah, Simpan Template. Lalu, lakukan pengujian kembali seperti panduan sebelumnya.

 

Panduan Terkait

Cara Memasang Twitter Card di Blogger

Dengan menggunakan twitter card, kalian tidak perlu upload foto manual saat share link ke twitter. Cara ini juga dapat untuk meningkatkan klik menuju blog kalian. Segera terapkan di blog kalian. Gratis.

BACA PANDUANNYA >

—o0o—

 

 

Begitulah panduan mengatasi gambar (thumbnail) yang tidak muncul saat dishare ke facebook, mengatasi gambar (thumbnail) yang tidak sesuai dengan postingan saat dishare ke facebook, memasang Open Graph Facebook dan mengatasi ‘xxxx’ yang muncul di deskripsi saat share ke facebook.

 

Harapannya panduan ini bisa membantu teman-teman memperbaiki permasalahan share ke facebook. Jika di kemudian hari ada informasi baru, akan Pangeran tambahkan kembali.Seperti biasa. Terimakasih sudah membaca, semoga bermanfaat. Pangeran Wortel pamit. See you..

 

Image by : 
  • pexels.com
  • tulisanwortel.com

Pangeran Wortel

Blogger dari Kab. Bengkalis. Sukanya ngisi waktu luang untuk buat video, nulis di blog, desain feed instagram #bukanfakta dan kadang suka sendiri di pantai. Salam kenal..

24 thoughts to “Cara Lengkap Memasang Open Graph Facebook di Blog”

  1. Kalo di twitter ada juga gak sih tubhnailnya seperti diface book!… Tiap share ditwitter gak ada gambarnya soalnya!…

    kalo di facebook aku ternyata udah ada open graphnya ya, pasalnya tiap kali share udah ada gambarnya sendri!..

    Keren Infonya!…

    1. Ada bro, silahkan baca panduannya di atas tentang "Cara lengkap memasang meta tag twitter card di blogger"

      Wah.. Artinya templatenya bagus. Karena sudah menerapkan meta tag ini. Tapi, jangan lupa perhatikan jika ada yang rasanya tidak sesuai dengan isi konten yg dishare.

      Semoga bermanfaat, ya.. (y)

    1. hihi banyak yg gitu, kak. Jadi pusing kalo udah diajak bahas coding.

      Waduh… Sebelumnya maaf kalo wordpress belum bisa, kak. Karena, masih fokus ke Blogger dulu. Di worpress nanti akan Heru bahas juga, sih, tapi nunggu pindah ke sana. 😀

  2. Huhuhu… lengkap sekali pange, inilah yang gue cari-cari. Akhirnya, belum pernah gue baca panduan selengkap ini asli gak lebay, kodenya dijelasin satu-satu gitu, kurang jelas apa lagi.

    Nice artikel!

  3. Oh ini yang kayak twitter kemarin itu ya.
    aku fikir kalo di facebook bisa langsung manual ternyata ada prosesnya juga.

    btw aku ko lebih suka pake open graph yang bentuknya bisa di 'sweep kanan sweep kiri' gitu yah.

    contohnya kayak salah satu link di fanpage aku facebook.com/khairulleonpage

    Coba di cek deh, bukanya mau promo tapi aku emang ga bisa ngejelasinya kakayk gimana wqwq.

    1. Kalo yang seperti bg Leon bilang, itu hanya jumlah imagenya saja yang ditampilkan dalam jumlah banyak. Menggunakan cara ini juga, bisa kok. Sama aja. 🙂

      Iya, bg. Udah ngerti kok, maksudnya gimana. Terimakasih udah sharing, ya.. (y)

  4. Wah, kyaknya ini lumayan berkaitan ya sama kode html, java script dll. gitu…agak mabok saya ngikutin nya. Haha

    Tpi kdang juga sih klo sy share di facebook, laman nya gk sesuai trus yg mncul cman link, trus klo sya coba kedua kalinya, eh udah bagus…kok gitu ya?

    1. Hahahaha. Santai aja Rey… Dibaca pelan-pelan… Bisa kok.

      Nah, itulah problemnya Rey, belum dipasang open graph. Jadi, suka gak muncul. Ya, mungkin kalo kita yg share bisa 2x, tapi kalo org lain yg mau share, kan jadi kurang menarik kalo tanpa gambar.

    1. Secara konsepnya sama, Riska. Sama-sama memberikan tampilan yg menarik. Hanya saja, istilahnya kalo dari Facebook : Open Graph dan Twitter : Twitter card. 🙂

      Siap… Kalo berhasil jangan lupa testimoninya, ya.. Hehehe.

  5. Waah lama gak kesini makin rame aja Her blogmu dengan temepelanya, semakin menarik aja tampilanya.

    eh iya itu aku dulu juga gitu ninggal link di fb terus tulis keterangan buat ngunjungi, udah gitu aja. dan hasilnya nihil.

    kalo sekarang mah udah gak fb nan aku, udah nonaktif.
    Twitter juga nonaktif.

    Tapi dengan baca ini yang begitu lengkap aku jadi tau.
    nice, Her. berbagi pengetahuanya.

    1. Hehehehe. Alhamdulillah sedang perbaikan, di. Nah, makanya untuk promo harus membuatnya tampil beda.

      Wah.. sangat disayangkan di. Udah nggak main twitter sama fb, ya? Gue bisa apa kalo emang udah nggak aktif. 🙂

      Semoga bermanfaat, ya di. 🙂 Sipp…

  6. bang, gua sudah cobain panduan dari atas sampai bawah, tapi ketika gua debug link postingan gua kenapa deskripsi tidak sesuai dengan postingan ya bang? udah gua scrape again tapi tidak ada perubahan. mohon bantuannya bang her

Leave a Reply

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