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.
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.Baca Juga
Kenapa Harus Memasang Meta Tag Facebook Open Graph?
Kamu butuh memasang Facebook Open Graph untuk menarik minat pengunjung. Dia akan menciptakan intisari blog kau terlihat lebih manis dikala dibagikan ke dinding Facebook (social media share). Tanpanya adanya aba-aba ini, Facebook tidak akan bisa menampilkan intisari blog kau dengan benar. Dijamin deh, pengunjung tidak akan tertarik dikala menemukan konten menyerupai ini. Berikut perbandingan antara blog yang memasang dan tidak memasang aba-aba meta tag Facebook Open Graph .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.
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 menyerupaihttps://www.
, maka yang muncul ialah gambar yang harus kau tentukan sendiri. Gantihttps://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.