Cara Pasang Meta Tag Facebook Open Graph Di Blog

Cara pasang kode markup / meta tag Facebook Open Graph yang benar untuk memperbaiki tampilan share link yang error atau tidak sesuai.
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 kode meta tag Facebook Open Graph. Apa sih kode meta tag 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.

Kode Penjelasan
og:url URL canonical dari blog
og:title Judul artikel
og:description Ringkasan artikel. Biasanya terdiri dari 2 sampai 4 kalimat. Ditampilkan dibawah judul dari post Facebook
og:image Gambar atau thumbnail. Biasanya diambil dari gambar pertama yang ada di dalam artikel
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 pemasangan kode meta tag Facebook open graph kali ini. Jangan ada langkah yang terlewat agar hasilnya maksimal.

  1. Masuk ke menu Theme (Tema) lalu klik tombol Edit HTML.
  2. Cari kode </head>. Untuk memudahkan mencari kode tersebut, gunakan CTRL + F.
  3. Masukkan kode berikut DI ATAS </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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPML970cQVCOw28_IFpFF-uoIpIg9h6S19VyE6VY-0IFWL3ly5hg_EpjvJ5Fwcdr5Ze9beDdrRsQIBCUUaaggFi7bOSlXKPVKbDvWh7Bhu8jqg_KhEkQP6SnTzB2vzE5_bF5L9ODCb5HtA/s0/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPML970cQVCOw28_IFpFF-uoIpIg9h6S19VyE6VY-0IFWL3ly5hg_EpjvJ5Fwcdr5Ze9beDdrRsQIBCUUaaggFi7bOSlXKPVKbDvWh7Bhu8jqg_KhEkQP6SnTzB2vzE5_bF5L9ODCb5HtA/s0/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.

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 Facebook.
  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~

Referensi
https://developers.facebook.com/docs/sharing/webmasters
73
Cara Pasang Meta Tag Facebook Open Graph Di Blog
Cara Pasang Meta Tag Facebook Open Graph Di Blog
Cara pasang kode markup / meta tag Facebook Open Graph yang benar untuk memperbaiki tampilan share link yang error atau tidak sesuai.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

73 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • sidikis.my.id
    04 September, 2022
    Profil: https://www.blogger.com/profile/04710529144097977301
    Ahahaa nemu di sini, tq.... segera dipraktekkan
  • Arshuy
    24 Mei, 2022
    Profil: https://www.blogger.com/profile/10206915367231620104
    Bang ko postingan bloger saya ga bisa menyambungkn ke artikel malah muncul Kehilangan Properti
    Properti yang diperlukan hilang: og:type, fb:app_id
  • Portal Gunhal
    20 September, 2021
    Profil: https://www.blogger.com/profile/00498881745850885676
    cara mengatasi ini bagaimana ya "'og:type' dari 'blog' yang diberikan tidak valid"
  • Ojichan
    14 September, 2021
    Profil: https://www.blogger.com/profile/04257227232162327058
    #terimakasih banyak. akhirnya problem solved
  • Bagas Saputra
    03 Agustus, 2021
    Profil: https://www.blogger.com/profile/14606969164999637447
    keren sih ini
    uda di coba dan berhasil
    dari OG polosan sekaranag uda ada gambar dan deskripsinya

    mantap dah nih tutorialnya jelas banget, really appreciate it!
  • Info terbaru
    19 Mei, 2021
    Profil: https://www.blogger.com/profile/02557866333864145251
    Mohon pencrhan nya master, sy sdh pasng tag yang di buat di atas, tp sy kesulitan untuk memperbaiki tag og:type 'blog' .
    Trimakasih,,
  • Anggun Josie Pasemawati
    09 September, 2020
    Profil: https://www.blogger.com/profile/04748276654811334081
    mbak punya saya og:type nya ga ada. gimana caranya ya?
  • Admin
    06 September, 2020
    Profil: https://www.blogger.com/profile/05947387440071984843
    jossssss.

    tvplw.com
  • Zainu.developer
    17 Juli, 2020
    Profil: https://www.blogger.com/profile/09648258686540687553
    mbak, ko punya saya missing missing: og:url sama og:title
  • MovieKlub
    03 Oktober, 2019
    Profil: https://www.blogger.com/profile/10672466913814277131
    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?
  • Nanashi
    20 April, 2019
    Profil: https://www.blogger.com/profile/03754859263666315038
    punya saya kok ga bisa ya mba, setiap step nya sudah diikuti..
    btw, meta tag yang udah ada apa harus di hapus dulu
  • Agung Hermawan
    07 Maret, 2019
    Profil: https://www.blogger.com/profile/03840554243686554794
    Kenapa ya pas share link artikel yang muncul malah gambar og:image yg baru dipasang :D yang buat gambar homepage
    • Igniel
      03 April, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Fetch ulang lagi mas sesuai langkah terakhir
  • Lenktech
    23 November, 2018
    Profil: https://www.blogger.com/profile/07539328913513343621
    Btw templatenya mbk igniel keren, beli atau bikin sendiri mbak
    • Igniel
      23 November, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Bikin sendiri mas.
    • Lenktech
      24 November, 2018
      Profil: https://www.blogger.com/profile/07539328913513343621
      Keren mbk templatenya ak suka, dijual nggk ya mbk template ini
    • Igniel
      24 November, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Makasih. Nggak dijual mas. Yang dijual Igniplex.
      https://igniplex.blogspot.com
    • Lenktech
      28 November, 2018
      Profil: https://www.blogger.com/profile/07539328913513343621
      Mantap mbk templatenya ... Tapi nunguin template yg dipakek mbk igniel aja sampai dijual, hahahaa
  • Lenktech
    22 November, 2018
    Profil: https://www.blogger.com/profile/07539328913513343621
    Okey mbk, makasih tutornya
  • Lenktech
    22 November, 2018
    Profil: https://www.blogger.com/profile/07539328913513343621
    Kog tampilan gambarnya tetep kecil ya mbk, padahal ak udh pakek code yg gambarnya lebar
    • Igniel
      22 November, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Pake gambar resolusi minimal 600 x 400 px biar gede.
  • Unknown
    03 Juli, 2018
    Profil: https://www.blogger.com/profile/12648705418270666772
    terima kasih banyak tutorialnyaaaa. Masalah share facebook akhirnya teratasi
  • ariesrutung
    18 Juni, 2018
    Profil: https://www.blogger.com/profile/07560097231862684756
    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.
    • Igniel
      19 Juni, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Sama-sama. Semoga lancar terus promosi via FBnya.
  • Muhammad Hasan Bahtiar
    01 Juni, 2018
    Profil: https://www.blogger.com/profile/03613989034918435491
    Kalau nampilin Halaman Facebook gimana yah. Ko saya pake cara diatas ga muncul ya mba
  • Widi
    19 Februari, 2018
    Profil: https://www.blogger.com/profile/17794679480841603781
    klo gini gmana kak?
    "The following properties are specified on the webpage but NOT supported for the specified 'og:type': article:author, article:publisher"
    • Igniel
      19 Februari, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Coba ganti og:typenya ke article.
      Jadi:

      <meta content='article' property='og:type'/>
  • Aldi Tegar Prakoso
    15 Februari, 2018
    Profil: https://www.blogger.com/profile/14743283100488016686
    Terima kasih kak, bermanfaat sekali :D
  • Aan Amirul
    28 Desember, 2017
    Profil: https://www.blogger.com/profile/06938524269259999129
    OK makasih.....
  • Aan Amirul
    28 Desember, 2017
    Profil: https://www.blogger.com/profile/06938524269259999129
    kalau ganti og:url dari "blogspot.com" menjadi ".com" saja gimana ya mbak?

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

    makasih....
    • Igniel
      28 Desember, 2017
      Profil: https://www.blogger.com/profile/09199170379661896200
      Itu otomatis ngedetect dari URL blognya. Jadi harus ganti ke custom domain dulu.
  • Cipunk Be Good
    26 Desember, 2017
    Profil: https://www.blogger.com/profile/08797266169450621141
    akhirnya nemu jg caranya.. mantaf tutorialnya, lengkap & work
    mksh mbak cantikk.. Lopee you..hehe
  • Unknown
    25 Desember, 2017
    Profil: https://www.blogger.com/profile/09190150484830771620
    gan cara ngatasin nya gimana yak?
    The following required properties are missing: fb:app_id dan
    'og:type' dari 'blog' yang diberikan tidak valid
    • Igniel
      25 Desember, 2017
      Profil: https://www.blogger.com/profile/09199170379661896200
      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'
    • Marnulis
      25 Mei, 2021
      Profil: https://www.blogger.com/profile/12793306692262667932
      Kok gak bisa meskipun udah diganti jadi article bang? mohon pencerahannya
    • Marnulis
      25 Mei, 2021
      Profil: https://www.blogger.com/profile/12793306692262667932
      Udah work bang. Sorry. Tadi ngelag ternyata
  • Unknown
    20 Desember, 2017
    Profil: https://www.blogger.com/profile/07456057491240723772
    keren info nya. tapi disaya eror og:typenya itu kenapa ya?
    • Igniel
      22 Desember, 2017
      Profil: https://www.blogger.com/profile/09199170379661896200
      Typenya coba ganti article.

      meta content='article' property='og:type'
  • zoetami
    15 Desember, 2017
    Profil: https://www.blogger.com/profile/13339341516839172495
    Thax infonya. KEREN muach
  • Penipedia
    08 Desember, 2017
    Profil: https://www.blogger.com/profile/06303097568289471820
    Nice broo, saya terapin di blog saya dan berhasil. thanks
  • Taufik Nurhasan
    02 Desember, 2017
    Profil: https://www.blogger.com/profile/04144797334994122498
    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..
    • Igniel
      02 Desember, 2017
      Profil: https://www.blogger.com/profile/09199170379661896200
      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.
  • Anonim
    Anonim16 Oktober, 2017
    Izin copas kodenya.
  • IRSAN
    02 Oktober, 2017
    Profil: https://www.blogger.com/profile/07571228958922629490
    Gimana ditempelkan kalau menggunakan Wordpress?
  • Anonim
    Anonim14 September, 2017
    Ijin coba ya mba maksih udah berbagi...
  • Unknown
    15 Juli, 2017
    Profil: https://www.blogger.com/profile/07591567321290534071
    Artikel nya sangat membantu . Blognya tampilannya bagus eh. Berapa lama buatnya kakak.
    • Igniel
      22 Desember, 2017
      Profil: https://www.blogger.com/profile/09199170379661896200
      Dari awal blog berdiri sampe sekarang belum beres-beres. Karena pasti ada yang dirombak lagi.
  • Akbar
    14 Juli, 2017
    Profil: https://www.blogger.com/profile/10631858136320710610
    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?
  • Armansyah
    14 Juli, 2017
    Profil: https://www.blogger.com/profile/06985375802260451626
    kl di wordpress bisa gak gan? dan dimana diletakkan?
    • Igniel
      14 Juli, 2017
      Profil: https://www.blogger.com/profile/09199170379661896200
      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"
  • Sudarmin
    18 Juni, 2017
    Profil: https://www.blogger.com/profile/02318706254850776266
    kok tetap gak bisa ya... ane udah share link blog di FB tapi gak muncul gambarnya
    • Igniel
      19 Juni, 2017
      Profil: https://www.blogger.com/profile/09199170379661896200
      Bisa kok kalo step diatas udah diikuti dengan benar.
  • Andi Saputra Siahaan
    12 Juni, 2017
    Profil: https://www.blogger.com/profile/14667769409863438768
    Bermanfaat sekali gan...
  • Dedy Styawan
    11 Mei, 2017
    Profil: https://www.blogger.com/profile/14925786771846433208
    obat nya ketemu disini, udah sembuh sekarang-blog saya, berkat klinik igniel :D
  • Igniel
    10 Mei, 2017
    Profil: https://www.blogger.com/profile/09199170379661896200
    Widget Author Box ala Igniel dengan Resume Skill Singkat
    http://www.igniel.com/2017/05/widget-author-box-igniel-resume-skill.html
  • Kak Boy
    09 Mei, 2017
    Profil: https://www.blogger.com/profile/05546093133065229111
    Dan gimana sih mbak cara buat author box sama kayak punyanya mbak? Apa juga bisa dikasih dibawah posting/artikel?
    • Igniel
      09 Mei, 2017
      Profil: https://www.blogger.com/profile/09199170379661896200
      Nanti saya coba bikin tutorialnya.
  • Kak Boy
    09 Mei, 2017
    Profil: https://www.blogger.com/profile/05546093133065229111
    Mbak igniel saya mau tanya cara buat kotak script gimana?
    • Igniel
      09 Mei, 2017
      Profil: https://www.blogger.com/profile/09199170379661896200
      Coba googling dengan keyword "syntax highlighter untuk blogspot"
  • admin
    25 April, 2017
    Profil: https://www.blogger.com/profile/15208657604584516408
    mbak sudah di debug kok keluarnya begini ya Objects of this type do not allow properties named 'article:publisher' . Musti diapain kah?
    • Igniel
      25 April, 2017
      Profil: https://www.blogger.com/profile/09199170379661896200
      Coba klik "Scrape Again" nya 2 kali. Disini saya test nanti warningnya ilang.
  • Demo akun
    19 April, 2017
    Profil: https://www.blogger.com/profile/07789902388423626997
    repot gan pake xtgem seo dan kreasi sendiri.
    • Igniel
      19 April, 2017
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ini hanya cara resmi yang dianjurkan Facebook. Kalau manjur dengan berkreasi sendiri lebih oke gan.
  • NgeTech
    06 Maret, 2017
    Profil: https://www.blogger.com/profile/01817967374841933451
    Boleh diupload templatenya :D
  • Strainers7
    30 Januari, 2017
    Profil: http://strainers7.blogspot.com
    wah lengkap banget tutorialnya gan
  • Anonim
    Anonim22 Januari, 2017
    usefull.. thanks a lot
  • Hasan A.K
    20 Januari, 2017
    Profil: https://www.blogger.com/profile/01858801859114946404
    boleh juga tutornya mbak, di bookmark dulu belom sempet ngetes.
  • Fikri Muzakky
    15 Januari, 2017
    Profil: https://www.blogger.com/profile/10097372075263501344
    Nice info gan..btw template agan namanya apa ya??
    • Igniel
      15 Januari, 2017
      Profil: https://www.blogger.com/profile/09199170379661896200
      Belum dikasih nama. Template dapet bikin sendiri.