Cara Zone

Portal online Tips dan tutorial

Dapatkan tutorial terupdate gratis dengan berlangganan artikel

Thursday, September 4, 2014

Cara Pasang Meta Tag Open Graph Facebook Untuk Blogger

Cara Pasang Meta Tag Open Graph Facebook Untuk Blogger
Memasang Meta Tag Open Grap Facebook pada blog kita sangatlah penting, karena kita tahu facebook merupakan media sosial yang paling besar di dunia, jadi tidak mengherankan jika anak yang berumur 13 tahun sudah memiliki akun Facebook.
Pihak Facebook telah menetapkan meta tag -nya tersendiri. Untuk Apa Facebook berbuat demikian ? Ini untuk memastikan setiap entri yang anda share di Facebook akan menjadi lebih efektif kerana mengikut penetapan yang disediakan oleh pihak Facebook.
Sebelum kita memabahas cara memasangnya, ada baiknya kami sampaikan manfaat memasang Open Graph Facebook pada Blog kita:

Contoh kasus, Apakah pernah anda menShare artikel pada blog sendiri ke Facebook tapi kadang gambar tidak muncul?, ataukah gambar yang anda inginkan untuk keluar di facebook tidak sesuai keinginan?, Itu semua karena Blog sobat belum dipasang dan diverifikasikan dengan Open Graph Fb.

Meta Tag Open Graph Protocol berguna untuk menampilkan gambar atau logo blog anda ketika di share, like. Jika artikel anda yang di posting tidak memiliki gambar, maka secara otomatis gambar yang ditampilkan nantinya adalah logo blog anda.

Selain itu anda akan mengetahui jenis artikel apa saja dalam blog anda yang paling banyak diminati, yang paling banyak di Like/share dan yang terkomentari, karena kita akan diberikan laporan harian,mingguan dan bulanan. Jadi dengan mengetahui itu semua, kita bisa menentukan artikel selanjutnya yang serupa dengan top artikel yang paling populer difacebook.

Kesimpulannya sebagai blogger kita tentu butuh trafik, nah jadi penting sekali memasangnya di blog kita.
Oh ya, Apa sobat pernah mencoba tutorial serupa tapi tidak berhasil? tenang gan, kami akan melengkapi tutirial ini full gambar juga video dan dijamin berhasil.

Sebelum memasang code open grap , coba sobat cek dulu apakah blog kita sudah terpasang open grap atau tidak, sobat bisa cek disini : object Debug

Caranya:
Silahkan Masukkan URL blog pada form yang sudah tersedia, lalu silahkan klick button Debug
Cara Pasang Meta Tag Open Graph Facebook Untuk Blogger
Jika belum terpasang hasilnya akan seperti ini :
Cara Pasang Meta Tag Open Graph Facebook Untuk Blogger

Jika sudah terpasang hasilnya seperti ini
Cara Pasang Meta Tag Open Graph Facebook Untuk Blogger

Berikut tips mudah Pasang protokol open graph fb pada blogspot

# Pertama
  • Login ke Akun Blog masing-masing
  • Pilih Blog yang akan Anda pasangkan Open Graph
  • Klik blognya Cara Pasang Meta Tag Open Graph Facebook Untuk Blogger
  • klik template Cara Pasang Meta Tag Open Graph Facebook Untuk Blogger
  • klik edit HTML Cara Memasang MetaTag Pada blogspot

#Kedua
Setelah terbuka Silahkan Lihat dan cari kode ini :

<b:include data='blog' name='all-head-content'/>

Supaya Lebih mudah silahkan copy Code diatas lalu klik ctrl + F pada keyboard lalu pastekan di form search

Contoh pada gambar ini:
Cara Memasang MetaTag Pada blogspot

Setelah ketemu silahkan lanjut ke tahap berikutnya yakni memasang Meta Tag Open Graph  dengan mengcopy dan pastekan kode-kode berikut tepat dibawah
<b:include data='blog' name='all-head-content'/>

Catatan:
Jika sobat sudah memasang Meta tag untuk blogspot, bisa juga dipasang dibawah meta-meta tersebut, sobat baca disini : Cara pasang meta tag

Berikut code Metanya :

<!-- open graph -->
<meta content='id_id' property='og:locale'/>
<meta content='en_US' property='og:locale:alternate'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='daenkrhapy' property='fb:admins'/>
<meta content='daenkrhapy' property='fb:profile_id'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='website' property='og:type'/>
<meta content='http://4.bp.blogspot.com/-lU0tH_Hvc0A/VAih-K1qCpI/AAAAAAAABMg/gDLJH5TYXFE/s320/ppcarazone.png" height="200" width="200"' property='og:image'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='Selamat datang di Cara Zone Tutorial Tips Trik, dan info menarik lainnya.' property='og:description'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title' property='og:description'/>
</b:if>
</b:if>

Keterangan :
Ganti : daenkrhapy dengan Id Facebook sobat masing-masing
Ganti : http://4.bp.blogspot.com/-lU0tH_Hvc0A/VAih-K1qCpI/AAAAAAAABMg/gDLJH5TYXFE/s320/ppcarazone.png
dengan Logo blog masing-masing (ingat ukuran maksimal 200 x 200
Ganti : Selamat datang di Cara Zone Tutorial Tips Trik, dan info menarik lainnya
dengan deskripsi blog masing-masing.

Silahkan Simpan

# Ketiga
Sekarang Sobat Login ke akun facebook masing-masing
Lalu silahkan menuju object Debug untuk mengetahui hasilnya, apakah sudah berhasil memasang dengan baik codenya atau belum silahkan kesini :
object Debug

Jika sudah terintegrasi maka hasinya akan seperti contoh gambar diatas.

# Keempat
Supaya kita nanti mendapat laporan dari Facebook insights, silahkan masukkan/add blog yang tadi dipasangkan meta tag open graph disini : Facebook insights

Gulir tombol kebawah sampai sobat menemukan Add Your Domain silahkan di Klick dan akan muncul popup
Isi dengan URL Blog sobat lalu klik Dapatkan Wawasan
Cara Pasang Meta Tag Open Graph Facebook Untuk Blogger

Jika tadi anda gagal dalam memasang Code Open Graph maka akan ada peringatan seperti ini :
Cara Pasang Meta Tag Open Graph Facebook Untuk Blogger

Silahkan diperiksa kembali meta yang ada pada template sobat, Jika sudah betul maka hasilnya akan Blog sobat akan tampil pada Domain Insights
Untuk mengetahui laporan, sobat hanya tinggal klik Blog sobat pada Domain Insights.

Untuk lebih detailnya sobat bisa tonton video berikut :

60 comments:
Silahkan komentar
  1. makasih Mas, Tutornya sangat2 membantu dan sudah saya coba di nolirik.blogspot.com

    ReplyDelete
    Replies
    1. Sama-sama gan, terimakasih kunjungan dan komentarnya

      Delete
  2. pada meta tag itu suruh isi ID facebook,masudnya nama apa nomer ID gan..?
    https://www.facebook.com/dimaszaid.abdullah

    ReplyDelete
    Replies
    1. nama facebook untuk saat ini lebih identik dgn ID, jadi mas masukkan nama URL Fb mas : dimaszaid.abdullah
      Terima Kasih atas kunjungan dan komentar serta pertanyaannya

      Delete
  3. mas ketika di share kok gak muncul deskripsi tentang articelnya yah

    ReplyDelete
    Replies
    1. Cara mengatasinya
      1. Login ke Blogger Dasbor > Rancangan > Edit HTML
      2. Centang Expand Template Widget
      3. Cari kode <data:post.body/>
      4. Simpan kode ini diatas <data:post.body/>
      <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.snippet'> <meta expr:content='data:post.snippet' name='description'/> </b:if> </b:if>

      Terimakasih

      Delete
    2. kalo <data:post.body/> di blog bisanya ada 4 nah pilih yang mana tuh?

      Delete
  4. Apa terlalu penting untuk melakukan tutorial ini gan?

    ReplyDelete
    Replies
    1. Sekarang Indikasi Seo Offpage yakni Social Signal, jadi jika bertujuan untuk menseokan Blog kita agar Social Signal dimata Search Engine bagus, maka sangat penting dilakukakan.
      Terima Kasih

      Delete
  5. sebelumnya minta maaf saya sudah mengikuti panduan di atas tapi kenapa saat di share ke facebook tidak muncul judul postingan saya dan gambarpun tidak sesuai... untu melihatnya bisa di share link yang saya buat untuk benrkomentar ini, adalah "membagi koneksi intenet menggunakan ad hoc'' dengan sepenuh hati mohon bantuannya.....

    ReplyDelete
    Replies
    1. Setelah kami cek template agan, agan belum pasang meta tag open grap.
      Kami juga sudah coba share artikel nya, dan yang dishare akan muncul artikel lain bukan artikel yang kita share.
      Coba deh pasang ulang dulu gan meta open grapnya
      Terima kasih

      Delete
    2. owwww terimah kasih gan saya coba dulu pasang lagi... apakah setelah pasang perlu di ping atau apalagi gan...

      Delete
    3. Boleh di ping boleh tidak, karena dalam waktu paling lambat 2 x 24 jam bot akan mengetahuinya.
      Terima Kasih

      Delete
    4. maaf gan masalah yang salah alami masih belum pulih juga padahal sudah saya coba lagi tutorial diatas mohon bantuannya gan..

      Delete
    5. Ya saya sudah cek gan,kemungkinan penyebab utama yakni template.
      Coba deh agan ganti template dengan template lain, tapi ingat backup dulu templatenya, supaya nanti agan mudah mengambil kode-kode meta yang sudah terpasang disana.
      cara kedua, coba deh ganti addthis dengan plugin Share this article lain, coba dulu menggunakan shareaholic

      Delete
  6. iya gan akan saya coba..
    maaf gan saya nggak begitu faham tentang addthis dan shareaholic

    ReplyDelete
  7. masih tetap gan... tapi untuk artikel yang lain bisa... sebagaian artikel yang tidak bisa.. mohon bantuannya gan...

    ReplyDelete
  8. gan mau nanya kalau di halaman pertama berhasil.. tapi di halaman ke 2 gk berhasil.. dan saya oun coba meta tag lagi tapi gk berhasil .. gimana nih solusinya :(
    ini blogger saya
    http://raflipico.blogspot.com/p/tentang-saya_4.html

    ReplyDelete
    Replies
    1. Pertanyaan agan membingungkan saya, maksudnya halaman ke 2 yang mana

      Delete
  9. minta tolong dong. kok di web saya klo di lik share mesti tumbnailnya cuma disamping kiri kecil burem lagi, gak bisa besar diatas tengah gitu? :( timeslib.com

    ReplyDelete
  10. gan, kan punya saya udah ada meta tag og nya, tp klo dishare mesti thumbnailnya keci e, gmna :( timeslib.com

    ReplyDelete
  11. gAn aku punya masalah serius gAn,
    kenapa ya setiap saya membuat sebuah artikel dan mempostkannya pertama kali, langsung "Page Not Found" saat mau membagikannya ke FB, dan anehnya Admin 2 saya tidak pernah mengalami hal demikian, dan hal itu terjadi utk Admin utama saja .mohon solusi .tq .. jika boleh minta tlong, kabarin juga ke pernandoharianja17@gmail.com ya mas .tq

    ReplyDelete
  12. Saya udah ikutin tutor dan menambahkan meta tagnya tapi kok masih gak bisa ya buay insights

    ReplyDelete
  13. masih gagal di tahap terakhir ... mohon solusinya gan ..

    ReplyDelete
  14. gagal sampai tahap akhir, mohon pencerahan, mengatasi ini bagaimana :) No admin data found at root webpage 'http://defantri.blogspot.com/'. Insights requires admin data at the root webpage for the domain 'defantri.blogspot.com'. Use https://developers.facebook.com/tools/debug to verify that we are able to extract the admin data from your root webpage.

    ReplyDelete
    Replies
    1. Kemungkinan besar agan belum mengubah meta yang ini
      meta content='daenkrhapy' property='fb:admins
      Jika belum silahkan ubah dengan Id Fb agan terima kasih

      Delete
    2. Terimakasih sudah berhasil, permasalahannya ada pada "og:type" nya.
      terima kasih sudah berbagi :)

      Delete
  15. senang sekali aku tertawa dan berbahagia karena baca artikel ini.
    berhasil,.. berhasi,.. berhasil :)

    ReplyDelete
  16. tutorialnya sudah dicoba, penempatan meta sudah benar namun saat debugnya selalu error, mengapa ?

    ReplyDelete
  17. ane tahu, Fb udah kebanyakan bug makanya selalu error

    ReplyDelete
  18. gan masih ga bisa niihh.... help me doong gan...

    ane udah coba ikuti semua yang agan tutorialin, tapi pas facebook insight, ada bacaan ngeselin kaya gitu.

    Ditunggu jawabannya gan

    ReplyDelete
    Replies
    1. sekarang sudah bisa gan, terima kasih buat artikelnya ^^

      Delete
  19. oke gan sudah bisa. sebelumnya terima kasih ^^

    ReplyDelete
  20. untuk og ini berpengaruh tidak untuk seo di google min ?

    ReplyDelete
    Replies
    1. Tidak terlalu berpengaruh, tapi bagus untuk Social signal
      Terima Kasih

      Delete
  21. mantap tutornya gan , tak coba dulu semoga berhasil

    ReplyDelete
  22. Waah tutorialnya sangat lengkap dan mudah di pahami, mantaap min lanjutkan..

    ReplyDelete
  23. punya saya masih belum bisa om,trus kalau mau share ke google+ juga muncul gambarnya yg lain-lain,,udah bingung saya om ini link nya : http://sales-electronics.blogspot.co.id mohon bantuannya y om ,makasih sebelumnya

    ReplyDelete
  24. hatur tengkyu om,artikelnya sangat membantu sekali, salam kenal dan ijin follow

    ReplyDelete
  25. Gan, saya sudah ikuti petunjuk dari agan tapi masih gak bisa, untuk ID facebook saya berupa nomor 100009763125230, mohon pencerahannya gan ?

    ReplyDelete
  26. sangat membantu mas, terimakasih penjelasanya

    ReplyDelete
  27. kalau pakai wordpress apa bisa pasang juga??

    ReplyDelete
  28. terima kasih mas untuk infonya saya sudah peraktekan di silakankredit.blogspot.com

    ReplyDelete
  29. btw itu kita harus bikin fanpage dulu ya? soalnya pas di bagian insight, ane gagal terus

    ReplyDelete
  30. i like your post,this is very interesting

    ReplyDelete
  31. terima ksih informasinya sangat bermanfaat

    ReplyDelete
  32. oh begitu caranya, wah bermanfaat sekali gan thanks ya udah dibolehin mampir

    ReplyDelete
  33. wihhh mantep banget lah, ditambah lagi dong gan informasinya, masih haus informasi nih

    ReplyDelete
  34. Makasih, sangat bermanfaat sekali, semoga sukses selalu ya?

    ReplyDelete
  35. berita yang sedang saya cari,,terimakasih

    ReplyDelete
  36. Terimakasih infonya , nanti mau saya coba...

    ReplyDelete
  37. Selama ini yang saya tahu yaitu mendebug alamat blogspot agar muncul maksimal di facebook saat share di facebook. Terimakasih banyak informasinya bila ada cara yang praktis yang di pasang di html agar dapat otomatis.

    ReplyDelete

Silahkan Follow atau Like FP Cara Zone
Join Our Newsletter