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 saat 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 biar tampilannya bagus saat dishare di Facebook? Simak baik-baik ya. Lagi-lagi blog Igniel akan menyebarkan sedikit gosip mengenai ilmu Facebook.

Apa Itu Kode Meta Tag Facebook Open Graph?

Facebook Open Graph yaitu sederetan arahan khusus berupa meta tag HTML yang berfungsi membaca komponen-komponen halaman saat 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.

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 saat dibagikan ke dinding Facebook (social media share). Tanpanya adanya arahan ini, Facebook tidak akan bisa menampilkan intisari blog kau dengan benar. Dijamin deh, pengunjung tidak akan tertarik saat menemukan konten menyerupai ini. Berikut perbandingan antara blog yang memasang dan tidak memasang arahan meta tag Facebook Open Graph .

Daftar Kode Meta Tag Facebook Open Graph

Berdasarkan dokumen developers Facebook yang ada di Webmaster, ada 5 arahan inti yang harus kau pasang. Saya jelaskan satu-satu ya menurut hasil translate dari page tersebut. Tidak 100% translate sih, aku 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 hingga 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 sanggup di-klik untuk menuju ke profil Facebook dari author bersangkutan.

Ada juga beberapa arahan 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 bab inti dari tutorial kali ini. Jangan ada langkah yang terlewat biar akhirnya maksimal.

1. Masuk ke menuTemplate kemudian klik tombol Edit HTML.
2. Cari arahan </head>. Untuk memudahkan mencari arahan tersebut, gunakan CTRL + F.
3. Masukkan arahan 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

1. Jika kau membagikan URL artikel, contohnya https://turuninsay.blogspot.com/search?q=cara-memasang-open-graph-facebook, secara otomatis gambar akan diambil dari artikel tersebut. Tapi bila kau membagikan URL homepage blog menyerupai https://www., maka yang muncul yaitu gambar yang harus kau tentukan sendiri. Ganti https://url-gambar-favicon-blog dengan URL gambar favicon / icon blog Anda.
2. Ganti 106660612706164 dengan ID atau username profil langsung Facebook, atau Fanspage juga bisa. Saran saya, pakailah ID alasannya ia bersifat tetap. Sedangkan username sanggup diubah. Siapa tahu kau 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 wacana aplikasi Facebook ini? Cari di google cara buat aplikasi di Facebook.

Kenapa Gambar Saya Tidak Muncul?

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

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

Sekian artikel BritaBlogger mengenai cara pasang arahan meta tag Open Graph Facebook di blog. Jangan lupa bagikan artikel ini biar teman-teman Blogger yang lain tahu.
Sumber https://www.britablogger.com/

Bagikan Artikel ini