Thumbnail dan deskripsi ini bisa muncul karena adanya open graph protocol. yang digunakan 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, akhirnya 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 bisa dibalikin lagi ke http. Masalahnya lagi, preview dan meta description artikel tiba-tiba tidak muncul saat saya share tulisan ke media sosial seperti whatstapp, telegram dan facebook.
Setelah melakukan rollback theme, dan pelan-pelan menilik, saya mendapati penyebabnya adalah baris berikut:
<link href='https://www.fathurhoho.id/favicon.ico' rel='icon' type='image/x-icon'/>
<meta content='blogger' name='generator'/>
<link href='https://www.fathurhoho.id/feeds/posts/default' rel='alternate' title='BLOGTITLE - Atom' type='application/atom+xml'/>
<link href='https://www.fathurhoho.id/feeds/posts/default?alt=rss' rel='alternate' title='BLOGTITLE - RSS' type='application/rss+xml'/>
<link href='https://www.fathurhoho.id/feeds/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 bisa jadi begitu, jadi open graph saya yang lama 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 berbagai skrip, maka ini lah yang membuat open graph di blog ini berfungsi kembali. Tempatkan kode ini tepat 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/AVvXsEjIrCruvK13YxHSkZyemEATANJ0zFMpYA2NmDtNsOuMNrSEM1udfib65TKjrwlMflrpecGraHyhw5YV_wYj_hCJNjWbz3x9QI52xHs_jaVjV1N4fOdZCTH1pb-1SgwwaOo8D02VZdgZXqu7/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 digunakan 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 masalah 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 ajaib diatas, mari kita coba apakah deskripsi dan thumbnail artikel sudah muncul saat di share. Caranya bisa langsung share ke sosial media.
Tapi biar lebih pasti, kita pakai facebook object debugger di https://developers.facebook.com/tools/debug/og/object/ atau kamu bisa gunakan object debugger (scroll halaman tersebut kebawah) untuk hasil yang lebih detil.
Tapi biar lebih pasti, kita pakai facebook object debugger di https://developers.facebook.com/tools/debug/og/object/ atau kamu bisa 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 saat di share.
Disini kamu bisa melihat detil baris apa saja yang di scrap oleh open graph. Jadi bisa tau salahnya dimana (misalnya warning diatas, katanya gambar artikel saya ga sesuai dengan anuan facebook).
Tapi kalau sudah menggunakan kode diatas mudah-mudahan berfungsi dengan baik, saya sendiri sudah membuktikan. Kalau error tanya aja dikomentar, meski saya ga yakin bisa bantu. hehe
Memasang Open Graph di Wordpress
Kebetulan saya juga menggunakan wordpress, salah satunya adalah untuk menganu blog Belajar Ngonfig. Nah, berbeda dengan blogspot, memasang open graph meta data di wordpress jauh lebih gampang. Bisa pakai plugin, bisa pakai WP open graph protocol (dari facebook), atau yoast SEO.
Nah, menambah open graph dari yoast seo bisa dilakukan dari menu "Social" lalu ke tab "Facebook" seperti berikut:
Penjelasannya sama seperti di blogspot tadi, tapi ini bisa dilakukan dengan klik saja. Gambarnya juga tinggal upload. Terlihat keterangan bahwa open graph ini digunakan oleh sosial media yang lain, tidak hanya facebook saja.
Kamu tidak mau menggunakan yoast seo? Bisa juga dilakukan secara manual. Tambahkan kode berikut di baris akhir 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 saat ini. Tapi gimana kalau dulu sudah sempat dibagikan di facebook dan ingin memperbaharuinya? Misalnya saya ingin mengupdate link preview berikut:
Kita bisa melakukan 'refresh attachment', tapi caranya agak tricky. Karena pilihan ini hanya muncul ketika kita buka link particular post. Tidak bisa dilakukan kalau post tersebut masih berada di halaman feed. Caranya seperti ini:
- Buka postingan tersebut ke laman terpisah.
- Caranya bisa 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 lalu pilih "Refresh share attachment". Akan tampil jendela pop up pembaharuan link preview. Link preview akan terupdate seperti ini:
Gimana kalau mau update yang sudah shared di medsos lain?
Seperti penjelasan saya diatas, open graph protocol tidak hanya digunakan oleh facebook saja, akan tetapi media sosial lain juga. Harusnya sih akan ikut ke refresh, tergantung rentang cache masing-masing sosial media.
Apakah bisa dilakukan secara manual, saya tidak paham. Mungkin bisa merujuk ke situs masing-masing aplikasi. Tapi ada case misalnya di Telegram, karena cloud based, maka link preview akan di cache di server. entah sampai berapa lama. Sepertinya sampai berbulanan (ini saya ingat ketika dulu mengupdate meta description homepage, sebulan kemudian baru berganti).
Tentunya ini menyebalkan, apalagi kalau kamu punya channel khusus untuk mengarsip artikel blog. Tapi ada bot yang bisa mengupdate link preview di telegram. Saya menggunakan @WebpageBot.
Penggunaanya simple seperti gambar, gunakan perintah /updatepreview lalu diikuti link blog / artikel hingga 10 link. Bot akan membantu pembaharuan preview artikel.
*note: jika menggunakan telegram desktop, kamu harus menutup dan menbuka kembali client yang kamu gunakan untuk melihat hasilnya.
• • •
Begitulah cara memasang open graph di blog untuk menampilkan thumbnail photo dan deskripsi artikel saat dibagikan ke media sosial. Semoga bermanfaat ^ ^
Quick Links:
Terima kasih infonya Bang. Menarik untuk dicoba. Saya lihat untuk media seperti detik, kompas, kumparan, pada saat share ke media sosial mereka terdapat semacam bingkai list pada hambar setiap postingan yg buka asli bawaan dr setiap postingan.. Nah apa itu dibuat dr cara seperti diatas.. Mohon petunjuknya. Terima kasih
ReplyDelete@8876607657942317663.0 maaf saya kurang ngerti hal yang kamu maksud, terutama di kalimat ini "bingkai list pada hambar setiap postingan yg buka asli bawaan dr setiap postingan".
ReplyDeleteKak, Mau tanya.
ReplyDeleteOpen Graph Meta Data di atas sudah Saya pasang dan gambar sitenya Saya ganti dengan gambar web Saya sendiri, tapi kok masih muncul logonya Kak Fathur :)
Cara agar muncul gambar Web Saya sendiri gimana Kak, ini web Saya kak https://www.sewajeepwisatabromo.com/
Kalau saya liat sudah normal & oke nih. Memang engga realtime langsung berubah, biasanya saya test di telegram karena bisa hapus cache nya sendiri via bot di atas.
Delete