Kode Iklan Otomati Atau Peninjauan Adsense

Pasang Meta Tag Facebook Open Graph di Blog

PosNongkrong bersama igniel.com-Pasang Meta Tag Facebook Open Graph di Blog 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.

Pasang Meta Tag Facebook Open Graph di Blog



Apa Itu 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 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 Facebook Open Graph.

Pasang Meta Tag Facebook Open Graph di Blog

Daftar Kode 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 Facebook Open Graph di Blog

Kita masuk ke bagian inti dari tutorial Facebook kali ini. Jangan ada langkah yang terlewat agar hasilnya maksimal.
  1. Masuk ke bagian Template >> 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: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'/>
<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/AVvXsEggCXV46bM8HWrAtjUwENNcm55BjSX0px7Dil7WOR7DQcyJ-jt2V_s2L1oMpGkEPGkL6qybrUk5EeLaE2s7ZoNe7v-0jRSV4fMjJVPtQKCz1_qLectW7mJIxuznm7u7G9vGCwvRYNVoNpZg/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='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 tunggal misalnya http://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 blog seperti http://www.igniel.com, maka yang muncul adalah gambar yang harus kamu tentukan sendiri. Ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggCXV46bM8HWrAtjUwENNcm55BjSX0px7Dil7WOR7DQcyJ-jt2V_s2L1oMpGkEPGkL6qybrUk5EeLaE2s7ZoNe7v-0jRSV4fMjJVPtQKCz1_qLectW7mJIxuznm7u7G9vGCwvRYNVoNpZg/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.

Begini tampilan akhir jika kamu berhasil memasang kodenya.

Pasang Meta Tag Facebook Open Graph di Blog

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 blog atau URL artikel tunggal.
  3. Klik kotak Debug
  4. Klik kotak Scrape Again.
  5. Dan sim salabim! Coba share ulang URL kamu dan cek apakah sudah benar.

Pasang Meta Tag Facebook Open Graph di Blog

Sekian dulu PosNongkrong bersama Igniel
Jangan lupa bagikan artikel ini agar teman-teman Blogger yang lain tahu.

 Lanjut lagi atau Gunakan Meta Tag Dari 4 Sosmed Raksasa Bila Ingin "Traffik Pengunjung" Memuncak

Ok apabila ada kekurangan minta maaf.
Apabila pemirsa mencoba cara di atas dan di kemudian hari ada efek tertentu baik buruk atau bagus terhadap blog anda sekalian....Semua resiko di tanggung oleh penumpang
Selamat mencoba dan salam sukses dan salam ngeblogger mania.



Sumber
http://www.igniel.com/2017/01/cara-pasang-facebook-open-graph-baik-benar.html

Incoming Search : Pasang Meta Tag Facebook Open Graph di Blog,Gunakan Meta Tag Dari 4 Sosmed Raksasa Bila Ingin "Traffik Pengunjung" Memuncak

Untuk Navigasi Lengkap Silahkan Kunjungi Peta Situs


PASTE KODE IKLANMU DISINI

Baca Juga:

Langganan Via Email

Archive

Categories

Blogger (24) Download (2) Email (3) Google (2) Gratis (4) Hidup (2) Meta Tag (8) Motivasi (2) Panduan (2) Penampakan (2) Rss Feed (1) Search Engine (2) Seo (15) SimCard (5) SitusWeb (2) Template (2) Trik (21)
Electronic money exchangers rating

Comments

loading...
loading...

Selamat Datang

Copyright © | by: Me