Skip to main content
Ivhaa Design

follow us

Cara Memasang Meta Tag Facebook Open Graph Di Blogger

Baca juga:



Syukur alhamdulillah pada kali ini saya dapat membagikan artikel lagi pada kalian semua pada artikel kali ini saya akan membahas tentang Facebook Open Graph mungkin kalian belum banyak yang tau apa itu meta tag open graph pada facebook.

Jika belum tau saya di sini akan memberikan info buat kalian semua apa yang di maksud dengan  facebook open graph.

Apa yang di maksud Facebook Open Graph?

Facebook Open Graph adalah sebuah komponen HTML yang fungsinya membaca komponen - komponen halaman URL yang di bagikan di facebook yang berbentuk sebuah konten. Komponen berikut ini berupa Judul blog, Gambar blog, deskripsi artikel blog dan author blog. 

Pentingkah Facebook Open Graph? 

Mungkin belum banyak yang tau pentingnya facebook open graph ini, sebenarnya ini selain untuk minat pengunjung agar mau klik url blog kita karena tampilan menarik saat di share di facebook. 

Pengertian Komponen Facebook Open Graph

Mungkin belum banyak yang tau arti komponen facebook open graph pada kode meta tag nya berikut ini adalah daftar nya :
  • og:url : Url Conditional pada blog
  • og:title : Judul Artikel Blog
  • og:description : Keterangan deskripsi artikel kita 
  • og:image : Untuk gambar Thumnail artikel 
  • fb:admin : Admin Blog tersebut

Cara Memasang Kode Meta tag Open Graph Facebook

Sekarang ini kita sudah waktunya memasang kode meta tag open graph di facebook nah bagaimana cara memasang nya berikut ini adalah cara nya :
  • Masuk ke Blogger dulu 
  • Log in dengan akun kalian 
  • Pilih menu Template > Edit HTML
  • Cari aja kode </head> jika ingin lebih mudah CTRL + F
  • Taruh kode di bawah ini diatas kode </head>
<!-- [ Facebook Open Graph Meta Tag by igniel.com ] -->
<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 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

  • Ganti gambar berikut ini dengan gambar thumnail blog kalian 
  • Ganti 106660612706164 dengan ID facebook kalian 
  • Ganti 1804789006468790 dengan Aplikasi Facebook kalian
Nah jika sudah pasang meta tag facebook open graph tapi tidak berfungsi atau blank, mungkin ini yang sering di bahas di forum facebook. Solusi nya cukup mudah berikut ini adalah tutorial nya.

 Jika Sudah Benar Tapi Masih Error

  • Kalian pertama buka di browser kalian Sharing Debugger
  • Masukkan URL blog kalian atau url artikel kalian. 
  • Klik Debug
  • Klik tombol Scrape Again (Kurangi Lagi) seperti hasilnya di bawah ini

Sekian artikel kali ini dari saya untuk kalian semua semoga bermanfaat dan selamat mencoba.

Referensi : igniel.com dan https://developers.facebook.com/docs/sharing/webmasters

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar