Cara Memasang Kode Meta Tag Facebook Open Graph Di Blog

Cara Memasang Kode Meta Tag Facebook Open Graph

Ketika membagikan URL blog di Facebook, URL itu akan diubah menjadi tampilan ringkas atau intisari dari blog tersebut. Didalamnya terdapat komponen-komponen dari blog yang bersangkutan berupa judul, thumbnail (gambar), deskripsi, URL blog, dan nama author. Untuk mendapatkan tampilan ringkas yang sesuai dengan isi blog ketika dibagikan di Facebook, kamu perlu memasang meta tag Facebook Open Graph. Apa sih Facebook Open Graph itu? Bagaimana cara memasang Facebook Open Graph yang baik dan benar agar tampilannya bagus ketika dishare di Facebook? Simak baik-baik ya. Lagi-lagi blog Igniel akan berbagi sedikit informasi mengenai ilmu Facebook.


Apa Itu Kode Meta Tag Facebook Open Graph?

Facebook Open Graph adalah sederetan kode khusus berupa meta tag HTML yang berfungsi membaca komponen-komponen halaman ketika URL dari halaman tersebut dibagikan di Facebook untuk nantinya ditampilkan menjadi konten. Komponen yang ditampilkan berupa judul, thumbnail (gambar), deskripsi, URL blog, dan nama author. Kode Facebook Open Graph ini dapat dipasang di semua platform blog seperti Blogspot, Wordpress, dan lain sebagainya.


Kenapa Harus Memasang Meta Tag Facebook Open Graph?

Kamu butuh memasang Facebook Open Graph untuk menarik minat pengunjung. Dia akan membuat intisari blog kamu terlihat lebih cantik ketika dibagikan ke dinding Facebook (social media share). Tanpanya adanya kode ini, Facebook tidak akan mampu menampilkan intisari blog kamu dengan benar. Dijamin deh, pengunjung tidak akan tertarik ketika menemukan konten seperti ini. Berikut perbandingan antara blog yang memasang dan tidak memasang kode meta tag Facebook Open Graph.

Cara Memasang Kode Open Graph Facebook


Daftar Kode Meta Tag Facebook Open Graph

Berdasarkan dokumen developers Facebook yang ada di Webmaster, ada 5 kode inti yang harus kamu pasang. Saya jelaskan satu-satu ya berdasarkan hasil translate dari page tersebut. Tidak 100% translate sih, saya ambil kesimpulannya saja.

  1. og:url
    URL canonical dari blog kamu.
  2. og:title
    Judul dari artikel.
  3. og:description
    Ringkasan dari isi artikel, biasanya terdiri dari 2 sampai 4 kalimat. Ditampilkan dibawah judul dari post Facebook.
  4. og:image
    Gambar atau thumbnail. Biasanya diambil dari gambar pertama yang ada di dalam artikel.
  5. fb:admins
    Nama author. Berupa sebuah URL yang dapat di-klik untuk menuju ke profil Facebook dari author bersangkutan.

Ada juga beberapa kode meta tag opsional yang dapat dipasang. Kode lengkapnya ada di bawah ini, termasuk cara pasangnya.


Cara Memasang Meta Tag Open Graph Facebook di Blog

Kita masuk ke bagian inti dari tutorial kali ini. Jangan ada langkah yang terlewat agar hasilnya maksimal.

  1. Masuk ke menu Template lalu klik tombol Edit HTML.
  2. Cari kode </head>. Untuk memudahkan mencari kode tersebut, gunakan CTRL + F.
  3. Masukkan kode berikut SEBELUM / DIATAS </head>

<!-- [ Facebook Open Graph Meta Tag by igniel.com ] -->
<b:if cond='data:view.isHomepage'>
<b:if cond='data:view.isPost'>
<b:if cond='data:view.isPage'>
<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 content='blog' property='og:type'/>
<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/-ie52Oh_wT-s/WHHi75UACjI/AAAAAAAAEYE/PnOATooq-Y4v_HVhR_AakM0G2d699uWIwCLcB/s1600/ignielcom.png' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='https://www.facebook.com/106660612706164' property='article:author'/>
<meta content='https://www.facebook.com/106660612706164' property='article:publisher'/>
<meta content='106660612706164' property='fb:admins'/>
<meta content='1804789006468790' property='fb:app_id'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>

Penjelasan

  1. Jika kamu membagikan URL artikel, misalnya https://www.igniel.com/2017/01/cara-pasang-facebook-open-graph-baik-benar.html, secara otomatis gambar akan diambil dari artikel tersebut. Tapi jika kamu membagikan URL homepage blog seperti https://www.igniel.com, maka yang muncul adalah gambar yang harus kamu tentukan sendiri. Ganti https://4.bp.blogspot.com/-ie52Oh_wT-s/WHHi75UACjI/AAAAAAAAEYE/PnOATooq-Y4v_HVhR_AakM0G2d699uWIwCLcB/s1600/ignielcom.png dengan URL gambar favicon / icon blog.
  2. Ganti 106660612706164 dengan ID atau username profil pribadi Facebook, atau Fanspage juga bisa. Saran saya, pakailah ID karena dia bersifat tetap. Sedangkan username dapat diubah. Siapa tahu kamu ganti username, tapi lupa mengedit meta tagnya di blog. Kan berabe juga.
  3. Ganti 1804789006468790 dengan ID dari aplikasi Facebook kamu. Belum pernah bikin, atau malah belum pernah denger tentang aplikasi Facebook ini? Baca dulu tutorialnya di artikel tentang cara membuat aplikasi Facebook sendiri.

Begini tampilan akhir jika kamu berhasil memasang kodenya.

Cara Pasang Meta Tag Open Graph Facebook Untuk Blogger


Kenapa Gambar Saya Tidak Muncul?

Jika kamu merasa sudah menulis kode diatas dengan benar tapi gambar tidak muncul, kemungkinan besar resolusi gambarnya kurang besar. Facebook mengharuskan ukuran minimal 200 x 200 pixels. Edit lagi ya artikelnya. Buat gambarnya sesuai ketentuan Facebook.


Semua Sudah Benar. Kenapa Hasil Share di Facebook Masih Tidak Sesuai?

Itu karena Facebook butuh waktu untuk membaca ulang struktur blog kamu. Untuk cara cepatnya, ikuti langkah berikut.

  1. Masuk ke Sharing Debugger.
  2. Masukkan URL homepage atau URL artikel.
  3. Klik tombol Debug.
  4. Klik tombol Scrape Again.
  5. Dan sim salabim! Coba share ulang URL kamu dan cek apakah sudah benar.
Cara Memasang Kode Open Graph Facebook

Sekian artikel blog Igniel mengenai cara pasang kode meta tag Open Graph Facebook di blog. Jangan lupa bagikan artikel ini agar teman-teman Blogger yang lain tahu. Thank you~

https://developers.facebook.com/docs/sharing/webmasters
SHARE Pin Share
Artikel Terkait
62 komentar
  1. Nice info gan..btw template agan namanya apa ya??

    BalasHapus
    Balasan
    1. Belum dikasih nama. Template dapet bikin sendiri.

      Hapus
    2. Templatenya rada mirip kyk pnya arlina yah igniel,...
      Atau arlina itu emang kamu?? hehehehe

      Hapus
  2. boleh juga tutornya mbak, di bookmark dulu belom sempet ngetes.

    BalasHapus
  3. usefull.. thanks a lot

    BalasHapus
  4. wah lengkap banget tutorialnya gan

    BalasHapus
  5. repot gan pake xtgem seo dan kreasi sendiri.

    BalasHapus
    Balasan
    1. Ini hanya cara resmi yang dianjurkan Facebook. Kalau manjur dengan berkreasi sendiri lebih oke gan.

      Hapus
  6. mbak sudah di debug kok keluarnya begini ya Objects of this type do not allow properties named 'article:publisher' . Musti diapain kah?

    BalasHapus
    Balasan
    1. Coba klik "Scrape Again" nya 2 kali. Disini saya test nanti warningnya ilang.

      Hapus
    2. Makasih reply nya. Sudah bisa mbak, tapi itu nanti misal mau share artikel yang lain harus melalui debuger lagi ya? Ini saya coba artikel yang lain tidak melalui debuger hasil tampilannya beda lagi dengan yang tadi via debuger.

      Hapus
    3. Artikel lama sebelum blognya dipasangi meta tag ini, harus di debug dulu.

      Sedangkan artikel baru setelah blognya dipasangi meta tag ini, nggak usah di debug lagi.

      Hapus
  7. Mbak igniel saya mau tanya cara buat kotak script gimana?

    BalasHapus
    Balasan
    1. Coba googling dengan keyword "syntax highlighter untuk blogspot"

      Hapus
  8. Dan gimana sih mbak cara buat author box sama kayak punyanya mbak? Apa juga bisa dikasih dibawah posting/artikel?

    BalasHapus
    Balasan
    1. Nanti saya coba bikin tutorialnya.

      Hapus
    2. Soalnya saya nemu tutorialnya mbak walaupun agak berbeda tapi masih bisa dikatan persis mbak

      Hapus
  9. Widget Author Box ala Igniel dengan Resume Skill Singkat
    http://www.igniel.com/2017/05/widget-author-box-igniel-resume-skill.html

    BalasHapus
  10. obat nya ketemu disini, udah sembuh sekarang-blog saya, berkat klinik igniel :D

    BalasHapus
  11. kok tetap gak bisa ya... ane udah share link blog di FB tapi gak muncul gambarnya

    BalasHapus
    Balasan
    1. Bisa kok kalo step diatas udah diikuti dengan benar.

      Hapus
  12. kl di wordpress bisa gak gan? dan dimana diletakkan?

    BalasHapus
    Balasan
    1. Disimpen sebelum "/head"
      Sebenernya bisa banget, tapi kode diatas khusus buat tag kondisional Blogspot. Untuk WP tag kondisionalnya beda lagi. Jadi kode diatas nggak bisa disimpen di WP kecuali tag kondisionalnya kamu edit sendiri.
      --------
      Tag kondisional itu yang "b:if"

      Hapus
  13. saya sudah coba cara diatas dan tampilan untuk share ke facebook udah bagus tapi yang jadi masalah kok pas share di google+ malah urlnya yang muncul bukan judul terus deskripsinya juga ilang.. cara ngatasinya gimana yah?

    BalasHapus
  14. Artikel nya sangat membantu . Blognya tampilannya bagus eh. Berapa lama buatnya kakak.

    BalasHapus
    Balasan
    1. Dari awal blog berdiri sampe sekarang belum beres-beres. Karena pasti ada yang dirombak lagi.

      Hapus
  15. Ijin coba ya mba maksih udah berbagi...

    BalasHapus
  16. Gimana ditempelkan kalau menggunakan Wordpress?

    BalasHapus
  17. Izin copas kodenya.

    BalasHapus
  18. kendala saya pas cek debuger tampilan sudah ok.. tapi hasil share di facebooknya hanya berisi deskripsi tanpa gambar.. padahal saat cek debuger gambar sama deskripsi ada.. masalahnya kenapa ya? sedangkan klo copy paste alamat link ke facebook hasilnya sesuai gambar dan deskripsi tampil ada..

    BalasHapus
    Balasan
    1. Eh...saya bingung.
      1) Hasil share hanya berisi deskripsi tanpa gambar.
      2) Copy paste alamat link hasilnya sesuai (ada deskripsi dan ada gambar).

      Kan keduanya sama-sama membagikan link ke FB. Perbedaan kedua kegiatan diatas apa ya? Harusnya hasilnya sama.

      Ketika debug, jangan lupa klik tombol "Scrape Again" dua kali biar hasilnya lebih akurat.

      Hapus
  19. Nice broo, saya terapin di blog saya dan berhasil. thanks

    BalasHapus
  20. Thax infonya. KEREN muach

    BalasHapus
  21. keren info nya. tapi disaya eror og:typenya itu kenapa ya?

    BalasHapus
    Balasan
    1. Typenya coba ganti article.

      meta content='article' property='og:type'

      Hapus
  22. gan cara ngatasin nya gimana yak?
    The following required properties are missing: fb:app_id dan
    'og:type' dari 'blog' yang diberikan tidak valid

    BalasHapus
    Balasan
    1. Di artikel udah dijelaskan, kalau belum punya aplikasi Facebook mending hapus aja fb:app_id

      og:type coba ganti ke article.
      meta content='article' property='og:type'

      Hapus
  23. akhirnya nemu jg caranya.. mantaf tutorialnya, lengkap & work
    mksh mbak cantikk.. Lopee you..hehe

    BalasHapus
  24. kalau ganti og:url dari "blogspot.com" menjadi ".com" saja gimana ya mbak?

    contoh: "https://contohblog.blogspot.com" jadi "https://contohblog.com"

    makasih....

    BalasHapus
    Balasan
    1. Itu otomatis ngedetect dari URL blognya. Jadi harus ganti ke custom domain dulu.

      Hapus
  25. Terima kasih kak, bermanfaat sekali :D

    BalasHapus
  26. klo gini gmana kak?
    "The following properties are specified on the webpage but NOT supported for the specified 'og:type': article:author, article:publisher"

    BalasHapus
    Balasan
    1. Coba ganti og:typenya ke article.
      Jadi:

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

      Hapus
  27. Kalau nampilin Halaman Facebook gimana yah. Ko saya pake cara diatas ga muncul ya mba

    BalasHapus
  28. Bermanfaat banget tutorialnya Sis... saya sering promoin blog saya ke media sosial, salah satunya FB, tapi masalahnya thumnailnya tidak muncul. Tapi setelah saya ikuti tutorial di atas, puji Tuhan, work 100%. Love you Sis... Thank you very much.

    BalasHapus
    Balasan
    1. Sama-sama. Semoga lancar terus promosi via FBnya.

      Hapus
  29. terima kasih banyak tutorialnyaaaa. Masalah share facebook akhirnya teratasi

    BalasHapus
  30. Kog tampilan gambarnya tetep kecil ya mbk, padahal ak udh pakek code yg gambarnya lebar

    BalasHapus
    Balasan
    1. Pake gambar resolusi minimal 600 x 400 px biar gede.

      Hapus
  31. Okey mbk, makasih tutornya

    BalasHapus
  32. Btw templatenya mbk igniel keren, beli atau bikin sendiri mbak

    BalasHapus
    Balasan
    1. Keren mbk templatenya ak suka, dijual nggk ya mbk template ini

      Hapus
    2. Makasih. Nggak dijual mas. Yang dijual Igniplex.
      https://igniplex.blogspot.com

      Hapus
    3. Mantap mbk templatenya ... Tapi nunguin template yg dipakek mbk igniel aja sampai dijual, hahahaa

      Hapus
  33. Kenapa ya pas share link artikel yang muncul malah gambar og:image yg baru dipasang :D yang buat gambar homepage

    BalasHapus
    Balasan
    1. Fetch ulang lagi mas sesuai langkah terakhir

      Hapus
  34. punya saya kok ga bisa ya mba, setiap step nya sudah diikuti..
    btw, meta tag yang udah ada apa harus di hapus dulu

    BalasHapus
  35. Saya sudah pasang dengan benar, tapi di bagian deskripsi bukan ngambil dari kalimat dalam artikel, tapi ngambil judul, tanggal publis, pokoknya ngambil deskripsi tidak dalam artikel. Nah, bagaimana caranya agar ngambil dari kalimat dalam artikel saja sebagai deskripsi?

    BalasHapus

Posting Komentar