Menampilkan Gambar dan Snippet saat Share Postingan di Facebook - Share sebuah postingan dengan memasukkan sebuah link yang disertai dengan gambar dan sedikit penggalan isi artikel atau yang biasa disebut snippet akan terlihat lebih menarik dan mendapat banyak perhatian dari pada share sebuah link yang hanya berupa teks saja.
Oleh karena itu, sudah tentu anda pasti ingin agar postingan atau artikel yang anda share ke media sosial seperti twitter, facebook, dan google plus secara otomatis dilengkapi atau disertai dengan gambar dan deskripsi atau sedikit penggalan dari isi artikel blog anda.
Diatas merupakan contoh tampilan link artikel disertai gambar dan snippet ketika di share ke facebook.
Sebelum kita ke tahap selanjutnya perlu anda ketahui terlebih dahulu penyebab mengapa gambar dan deskripsi tidak ikut tampil saat di share ke facebook.
Menurut pengalaman yang saya alami selama ngeblog dengan blogger, hal ini terjadi karena tidak adanya kode Meta data Open Graph di dalam kode template blog. Meta data open graph merupakan data pada artikel yang dikumpulkan dan disimpan pada chace media sosial. Ketika memposting link atau url artikel anda ke sosial media seperti facebook, twitter dan google plus, maka secara otomatis ketiga sosial media tersebut akan meng-crawl artikel anda untuk mencari open graph data ini.
Apabila kode meta data open graph ini tidak ada, maka otomatis artikel yang anda share tidak akan disertai gambar atau deskripsi.
Kode Open Graph untuk menampilkan Gambar
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
Bagaimana jika ada postingan blog yang tidak memiliki gambar? Anda tinggal mendefaultkannya menuju ke gambar yang anda inginkan, yakni dengan menambahkan meta opengraph baru dengan kode <b:else/> sebelumnya, sehingga semua kodenya akan menjadi seperti berikut.
<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/AVvXsEhexg1D7cIm3R0OFSJR2krbqcmHGUdbB8X-UoNF_HYSjMczQaUe58SuIkajnwUptaB9w2I04g65rrW-srDQGA251SrZRU6hMtz6lG2s5VztC-HYbqbXZQY_L9KGWJOBbZXpwReMKwL_N8w/s1600/harmansh.blogspot.com.jpg' property='og:image'/>
</b:if>
</b:if>
Kode Open Graph untuk menampilkan Deskripsi
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
Bagaimana cara menambahkan kode meta data open graph ke dalam kode template? Berikut langkah-langkahnya.
2. Setelah itu, silahkan klik Edit HTML, lalu temukan kode <head>, gunakan Ctrl+F untuk mempermudah pencarian.
3. Letakkan kode open graph diatas, di bawah kode <head>.
Anda juga bisa mengikuti meta tag social media berikut ini untuk diletakkan dibawah kode <head> sebagai refrensi.
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhexg1D7cIm3R0OFSJR2krbqcmHGUdbB8X-UoNF_HYSjMczQaUe58SuIkajnwUptaB9w2I04g65rrW-srDQGA251SrZRU6hMtz6lG2s5VztC-HYbqbXZQY_L9KGWJOBbZXpwReMKwL_N8w/s1600/harmansh.blogspot.com.jpg' property='og:image'/>
</b:if>
<meta content='URL-PROFIL-FACEBOOK-ANDA' property='article:author'/>
<meta content='URL-HALAMAN-FACEBOOK-ANDA' property='article:publisher'/>
<meta content='ID-APLIKASI-FACEBOOK-ANDA' property='fb:app_id'/>
<meta content='ID-FACEBOOK-ANDA' property='fb:admins'/>
Catatan : Untuk mendapatkan ID-APLIKASI-FACEBOOK-ANDA, anda bisa simak pada artikel Membuat App ID (Application ID) dan Secret Key Facebook
4. Jika semuanya sudah sesuai, silahkan klik Simpan Template atau tema.
5. Setiap anda akan mempublikasikan sebuah artikel, jangan lupa untuk selalu mengisi Deskripsi Penelusuran dengan penggalan isi artikel seperti gambar berikut.
Untuk menguji hasilnya, apakah sudah berhasil atau belum dengan mengunjungi link
https://developers.facebook.com/tools/debug/og/object/
Copy paste link artikel yang ingin anda uji pada field Debugger Objek Graf Terbuka,
Lalu klik tombol Ambil informasi pengurangan baru, agar facebook mengambil ulang cache pada artikel anda.
Scroll ke bawah untuk melihat hasilnya, apabila tampil gambar dan deskripsi seperti gambar berikut, berarti anda sudah berhasil.
Untuk melihat kode meta tag yang lebih lengkap, silahkan anda simak pada artikel Meta Tag SEO Friendly
Demikian tutorial sederhana mengenai bagaimana cara menampilkan gambar dan snippet atau deskripsi saat share postingan ke facebook. Semoga bermanfaat anda " Happy Blogging "
Demikian tutorial sederhana mengenai bagaimana cara menampilkan gambar dan snippet atau deskripsi saat share postingan ke facebook. Semoga bermanfaat anda " Happy Blogging "
Related Posts :
Silahkan
klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG
0 komentar:
Post a Comment
...... Terima kasih telah berkunjung, silahkan berkomentar dengan baik sopan sesuai dengan tema konten dan tidak mengandung unsur Sara ......