Memasang Open Graph Meta Data Di Blogspot Dan Wordpress
Salah satu pertanyaan masal para blogger pemula "gimana caranya memunculkan preview/thumbnail gambar dan deksripsi blog ketika di share ke facebook atau media umum lainnya?" Jawabannya, dengan menambahkan open graph di blog.
Thumbnail dan deskripsi ini sanggup muncul alasannya yaitu adanya open graph protocol. yang dipakai oleh facebook -- dan sosial media lain untuk menampilkan 'rich snippet' isi suatu website.
Seminggu ini saya pusing dengan hal ini, perkara sudah setahun blog ini ke https, ternyata belum fully https yang keindex di search engine. Lalu lalang kesana kemari entah blog mana saja saya kunjungi, balasannya search console pun restarted. Trafik blog anjlok dan indexing dari nol lagi. Hore!
Yeah, https! Sebenernya ribet, tau gini saya gajadi pasang ssl. Tapi yah ga sanggup dibalikin lagi ke http. Masalahnya lagi, preview dan meta description artikel tiba-tiba tidak muncul ketika saya share goresan pena ke media umum menyerupai whatstapp, telegram dan facebook.
Setelah melaksanakan rollback theme, dan pelan-pelan menilik, saya mendapati penyebabnya yaitu baris berikut:
Entahlah kenapa sanggup jadi begitu, jadi open graph saya yang usang tak lagi berfungsi. Thumbnail gambar hilang, deskripsi di shared preview juga hilang. Saya coba debug di open graph facebook, hasilnya juga, hilang. Yeay.
Selanjutnya ganti juga fb:app_id dan fb:admins dengan milik kamu. Saya belum pernah coba tanpa ini, harusnya ga problem sih. Fungsinya untuk analisa facebook insight saja nanti. Bingung nyari ID nya?
Terlihat di gambar, thumbnail dan deksripsi dari salah satu artikel di blog sudah muncul dengan baik ketika di share.
Disini kau sanggup melihat detil baris apa saja yang di scrap oleh open graph. Kaprikornus sanggup tau salahnya dimana (misalnya warning diatas, katanya gambar artikel saya ga sesuai dengan anuan facebook).
Penjelasannya sama menyerupai di blogspot tadi, tapi ini sanggup dilakukan dengan klik saja. Gambarnya juga tinggal upload. Terlihat keterangan bahwa open graph ini dipakai oleh sosial media yang lain, tidak hanya facebook saja.
Kita sanggup melaksanakan 'refresh attachment', tapi caranya agak tricky. Karena pilihan ini hanya muncul ketika kita buka link particular post. Tidak sanggup dilakukan kalau post tersebut masih berada di halaman feed. Caranya menyerupai ini:
Klik pada "•••" di sisi kanan atas kemudian pilih "Refresh share attachment". Akan tampil jendela pop up pembaharuan link preview. Link preview akan terupdate menyerupai ini:
Penggunaanya simple menyerupai gambar, gunakan perintah /updatepreview kemudian diikuti link blog / artikel hingga 10 link. Bot akan membantu pembaharuan preview artikel.
*note: jika memakai telegram desktop, kau harus menutup dan menbuka kembali client yang kau gunakan untuk melihat hasilnya.
Begitulah cara memasang open graph di blog untuk menampilkan thumbnail photo dan deskripsi artikel ketika dibagikan ke media sosial. Semoga bermanfaat ^ ^
Thumbnail dan deskripsi ini sanggup muncul alasannya yaitu adanya open graph protocol. yang dipakai oleh facebook -- dan sosial media lain untuk menampilkan 'rich snippet' isi suatu website.
Seminggu ini saya pusing dengan hal ini, perkara sudah setahun blog ini ke https, ternyata belum fully https yang keindex di search engine. Lalu lalang kesana kemari entah blog mana saja saya kunjungi, balasannya search console pun restarted. Trafik blog anjlok dan indexing dari nol lagi. Hore!
Yeah, https! Sebenernya ribet, tau gini saya gajadi pasang ssl. Tapi yah ga sanggup dibalikin lagi ke http. Masalahnya lagi, preview dan meta description artikel tiba-tiba tidak muncul ketika saya share goresan pena ke media umum menyerupai whatstapp, telegram dan facebook.
Setelah melaksanakan rollback theme, dan pelan-pelan menilik, saya mendapati penyebabnya yaitu baris berikut:
<link href='https://bacainartikel.blogspot.comfavicon.ico' rel='icon' type='image/x-icon'/> <meta content='blogger' name='generator'/> <link href='https://bacainartikel.blogspot.comfeeds/posts/default' rel='alternate' title='BLOGTITLE - Atom' type='application/atom+xml'/> <link href='https://bacainartikel.blogspot.comfeeds/posts/default?alt=rss' rel='alternate' title='BLOGTITLE - RSS' type='application/rss+xml'/> <link href='https://bacainartikel.blogspot.comfeeds/BLOGID/posts/default' rel='service.post' title='BLOGTITLE - Atom' type='application/atom+xml'/> <!--[if IE]><script type="text/javascript" src="https://www.blogger.com/static/v1/jsbin/2591933621-ieretrofit.js"></script> <![endif]--> <meta expr:content='data:blog.url' name='og:url:domain'/> <!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->Yang menggantikan baris ini:<b:include data='blog' name='all-head-content'/>
Entahlah kenapa sanggup jadi begitu, jadi open graph saya yang usang tak lagi berfungsi. Thumbnail gambar hilang, deskripsi di shared preview juga hilang. Saya coba debug di open graph facebook, hasilnya juga, hilang. Yeay.
Memasang Open Graph Meta Data di Blogspot
Setelah mencoba-coba banyak sekali skrip, maka ini lah yang menciptakan open graph di blog ini berfungsi kembali. Tempatkan instruksi ini sempurna dibawah <head> template blogger html.<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/> <link expr:href='data:blog.url' rel='canonical'/> <link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/> <meta content='article' property='og:type'/> <b:if cond='data:blog.pageType == "item"'> <meta expr:content='data:blog.pageName' property='og:title'/> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> <meta content='website' property='og:type'/> </b:if> <meta expr:content='data:blog.title' property='og:site_name'/> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/> <b:else/> <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX2V5JLu7CxcDpiHk4gkLtAJ14cJ6duz4goIQ1JxQBqA-EoZLSJTSqWDjZ6zYLyk1_0hbADCLHnqVeOEf7nYTrodhSJFSInRkIYCHrUfY2duk3BU0ASicxSlRA3iTJvu4KEa0iqngz5_g5/s1600/fathurhoho.png' property='og:image'/> </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 content='APP-ID' property='fb:app_id'/> <meta content='ADMINS-ID' property='fb:admins'/>Ganti URL gambar menjadi gambar blog kamu. Gambar ini akan dipakai sebagai thumbnail manakala artikel yang dibagikan tidak mengandung gambar.
Selanjutnya ganti juga fb:app_id dan fb:admins dengan milik kamu. Saya belum pernah coba tanpa ini, harusnya ga problem sih. Fungsinya untuk analisa facebook insight saja nanti. Bingung nyari ID nya?
Cara mengetahui fb:app_id
Buka halaman https://developers.facebook.com/apps/. Kamu harus buat app terlebih dahulu, nanti ada tahapan memasukan nama, admin, dan URL situs. Setelah itu copy ID nya.
Cara mengetahui fb:admins
Ini lebih gampang, caranya, buka (view) photo profile facebook kamu. Lalu perhatikan URL nya akan menjadi https://www.facebook.com/photo.php?fbid=DISINI-ID-NYA&anu=a.1036balblalbala......
Test Open Graph Blog
Untuk mengetahui hasil dari code asing diatas, mari kita coba apakah deskripsi dan thumbnail artikel sudah muncul ketika di share. Caranya sanggup pribadi share ke sosial media.
Tapi semoga lebih pasti, kita pakai facebook object debugger di https://developers.facebook.com/tools/debug/og/object/ atau kau sanggup gunakan object debugger (scroll halaman tersebut kebawah) untuk hasil yang lebih detil.
Tapi semoga lebih pasti, kita pakai facebook object debugger di https://developers.facebook.com/tools/debug/og/object/ atau kau sanggup gunakan object debugger (scroll halaman tersebut kebawah) untuk hasil yang lebih detil.
Terlihat di gambar, thumbnail dan deksripsi dari salah satu artikel di blog sudah muncul dengan baik ketika di share.
Disini kau sanggup melihat detil baris apa saja yang di scrap oleh open graph. Kaprikornus sanggup tau salahnya dimana (misalnya warning diatas, katanya gambar artikel saya ga sesuai dengan anuan facebook).
Tapi kalau sudah memakai instruksi diatas mudah-mudahan berfungsi dengan baik, saya sendiri sudah membuktikan. Kalau error tanya aja dikomentar, meski saya ga yakin sanggup bantu. hehe
Memasang Open Graph di Wordpress
Kebetulan saya juga memakai wordpress, salah satunya yaitu untuk menganu blog Belajar Ngonfig. Nah, berbeda dengan blogspot, memasang open graph meta data di wordpress jauh lebih gampang. Bisa pakai plugin, sanggup pakai WP open graph protocol (dari facebook), atau yoast SEO.
Nah, menambah open graph dari yoast seo sanggup dilakukan dari hidangan "Social" kemudian ke tab "Facebook" menyerupai berikut:
Penjelasannya sama menyerupai di blogspot tadi, tapi ini sanggup dilakukan dengan klik saja. Gambarnya juga tinggal upload. Terlihat keterangan bahwa open graph ini dipakai oleh sosial media yang lain, tidak hanya facebook saja.
Kamu tidak mau memakai yoast seo? Bisa juga dilakukan secara manual. Tambahkan instruksi berikut di baris simpulan file function.php. (!! backup dulu, untuk mencegah terjadi sesuatu yang anu)
function add_opengraph_doctype( $output ) { return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"'; } add_filter('language_attributes', 'add_opengraph_doctype'); function insert_fb_in_head() { global $post; if ( !is_singular()) // return; echo '<meta property="fb:admins" content="ID yang tadi"/>'; echo '<meta property="og:title" content="' . get_the_title() . '"/>'; echo '<meta property="og:type" content="article"/>'; echo '<meta property="og:url" content="' . get_permalink() . '"/>'; echo '<meta property="og:site_name" content="Isi dengan nama blog qamoh"/>'; if(!has_post_thumbnail( $post->ID )) { //kalau artikelnya ga punya gambar, pakai gambar dibawah $default_image="http://nganu.com/image.png"; //ganti URL ini dengan URL gambar qamoh echo '<meta property="og:image" content="' . $default_image . '"/>'; } else{ $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' ); echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>'; } echo " "; } add_action( 'wp_head', 'insert_fb_in_head', 5 );Test lagi dengan debugger tools diatas. Mudah-mudahan berhasil.Mengupdate URL preview yang sempat di share sebelumnya
Di open graph debugger diatas, kita memeriksanya dengan tombol 'scrape again', artinya facebook akan mengupdate meta description dan photo thumbnail artikel ketika ini. Tapi gimana kalau dulu sudah sempat dibagikan di facebook dan ingin memperbaharuinya? Misalnya saya ingin mengupdate link preview berikut:
Kita sanggup melaksanakan 'refresh attachment', tapi caranya agak tricky. Karena pilihan ini hanya muncul ketika kita buka link particular post. Tidak sanggup dilakukan kalau post tersebut masih berada di halaman feed. Caranya menyerupai ini:
- Buka postingan tersebut ke laman terpisah.
- Caranya sanggup dari notifikasi kalau ada yang like, share, atau komen.
- Tapi yang paling mudah, klik tanggal, misal "June 7" diatas.
Klik pada "•••" di sisi kanan atas kemudian pilih "Refresh share attachment". Akan tampil jendela pop up pembaharuan link preview. Link preview akan terupdate menyerupai ini:
Gimana kalau mau update yang sudah shared di medsos lain?
Seperti klarifikasi saya diatas, open graph protocol tidak hanya dipakai oleh facebook saja, akan tetapi media umum lain juga. Harusnya sih akan ikut ke refresh, tergantung rentang cache masing-masing sosial media.
Apakah sanggup dilakukan secara manual, saya tidak paham. Mungkin sanggup merujuk ke situs masing-masing aplikasi. Tapi ada case contohnya di Telegram, alasannya yaitu cloud based, maka link preview akan di cache di server. entah hingga berapa lama. Sepertinya hingga berbulanan (ini saya ingat ketika dulu mengupdate meta description homepage, sebulan kemudian gres berganti).
Tentunya ini menyebalkan, apalagi kalau kau punya channel khusus untuk mengarsip artikel blog. Tapi ada bot yang sanggup mengupdate link preview di telegram. Saya menggunakan @WebpageBot.
Penggunaanya simple menyerupai gambar, gunakan perintah /updatepreview kemudian diikuti link blog / artikel hingga 10 link. Bot akan membantu pembaharuan preview artikel.
*note: jika memakai telegram desktop, kau harus menutup dan menbuka kembali client yang kau gunakan untuk melihat hasilnya.
• • •
Begitulah cara memasang open graph di blog untuk menampilkan thumbnail photo dan deskripsi artikel ketika dibagikan ke media sosial. Semoga bermanfaat ^ ^
Quick Links:
Sumber https://www.fathurhoho.id/
