Cara Memasang Meta Tag Open Graph Facebook Ke 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 mendapat tampilan ringkas yang sesuai dengan isi blog dikala dibagikan di Facebook, kau perlu
memasang meta tag Facebook Open Graph. Apa sih Facebook Open Graph itu? Bagaimana cara memasang Facebook Open Graph yang baik dan benar semoga tampilannya bagus dikala dishare di Facebook? Simak baik-baik ya. Lagi-lagi blog Igniel akan mengembangkan sedikit isu mengenai ilmu Facebook.

Apa Itu Kode Meta Tag Facebook Open Graph?

Facebook Open Graph ialah sederetan aba-aba khusus berupa meta tag HTML yang berfungsi membaca komponen-komponen halaman dikala 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 sanggup dipasang di semua platform blog menyerupai Blogspot, Wordpress, dan lain sebagainya.

Daftar Kode Meta Tag Facebook Open Graph

Berdasarkan dokumen developers Facebook yang ada di Webmaster, ada 5 aba-aba inti yang harus kau pasang. Saya jelaskan satu-satu ya menurut hasil translate dari page tersebut. Tidak 100% translate sih, aku ambil kesimpulannya saja.

og:url
URL canonical dari blog kamu.
og:title
Judul dari artikel.
og:description
Ringkasan dari isi artikel, biasanya terdiri dari 2 hingga 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 sanggup di-klik untuk menuju ke profil Facebook dari author bersangkutan.

Ada juga beberapa aba-aba meta tag opsional yang sanggup dipasang. Kode lengkapnya ada di bawah ini, termasuk cara pasangnya.

Cara Memasang Meta Tag Open Graph Facebook di Blog

Kita masuk ke penggalan inti dari tutorial kali ini. Jangan ada langkah yang terlewat semoga kesudahannya maksimal.

Masuk ke menuTemplate kemudian klik tombol Edit HTML.
Cari aba-aba </head>. Untuk memudahkan mencari aba-aba tersebut, gunakan CTRL + F.
Masukkan aba-aba 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://url-gambar-favicon-blog' 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

Jika kau membagikan URL artikel, contohnya https://wartareview.blogspot.com/search?q=cara-memasang-open-graph-facebook, secara otomatis gambar akan diambil dari artikel tersebut. Tapi kalau kau membagikan URL homepage blog menyerupai https://www., maka yang muncul ialah gambar yang harus kau tentukan sendiri. Ganti https://url-gambar-favicon-blog dengan URL gambar favicon / icon blog Anda.
Ganti 106660612706164 dengan ID atau username profil langsung Facebook, atau Fanspage juga bisa. Saran saya, pakailah ID sebab ia bersifat tetap. Sedangkan username sanggup diubah. Siapa tahu kau ganti username, tapi lupa mengedit meta tagnya di blog. Kan berabe juga.
ganti 1804789006468790
dengan ID dari aplikasi Facebook kamu. Belum pernah bikin, atau malah belum pernah denger wacana aplikasi Facebook ini? Cari di google cara buat aplikasi di Facebook.

Kenapa Gambar Saya Tidak Muncul?

Jika kau merasa sudah menulis aba-aba 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 sebab Facebook butuh waktu untuk membaca ulang struktur blog kamu. Untuk cara cepatnya, ikuti langkah berikut.

Masuk ke Sharing Debugger.
Masukkan URL homepage atau URL artikel.
Klik tombol Debug.
Klik tombol Scrape Again.
Dan sim salabim! Coba share ulang URL kau dan cek apakah sudah benar.

Sekian artikel BritaBlogger mengenai cara pasang aba-aba meta tag Open Graph Facebook di blog. Jangan lupa bagikan artikel ini semoga teman-teman Blogger yang lain tahu.