Download Font My Trip My Adventure

Pernah gak sih lo tiba-tiba nemu ide cemerlang terus dengan semangatnya ide itu lo tuangkan ke blog kesayangan lo dengan harapan bisa dibagikan ke teman-teman. Tapi naas ketika mau di share, deskripsinya malah gak nongol

Sambil nyelem, minum kuah Indomi, alias ngebantu temen blogger sekalian ngisi postingan di bulan Januari ini. Muehehehe.

Algoritma yang dipake Facebook adalah melakukan scan dari data yang ada di dalam link tersebut, ngambil datanya, lalu disimpan ke cache. Setelah itu, akan terjadi proses crawl di mana Facebook men-scan berbagai teks yang terlihat, hyperlink, dan konten berbagai tag (contohnya meta tag yang berisi keyword gitu, lho). Sewaktu meta data nggak ditemuin, secara otomatis Facebook akan ngambil data gambar dan teks apa pun yang kali pertama dia temuin di halaman tersebut. Makanya, nggak jarang saat di-share, yang nongol malah gambar banner dan deskripsi si empunya blog itu sendiri.

Emang sih, kalo share manual, kadang Facebook berbaik hati nampilin banyak gambar dan dikasih panah buat milih gitu. Tapi, sering juga pilihan ini nggak nampil. Lagian, maunya kan praktis ya, begitu post udah pasti thumbnail gambar dan deskripsinya muncul. Ini dia trik untuk mengatasi thumbnail link yang sesuai di Facebook (khusus yang menggunakan Blogger, ya).

1. Masuk halaman dashboard Blogger. Pilih Template, lalu Edit HTML.

2. Letakkan kode di bawah ini, sebelum kode <b:skin>

<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='URL_gambar.jpg' property='og:image'/>
</b:if>

*URL_gambar.jpg diganti dengan URL gambar lo sendiri. Ini adalah kode untuk menampilkan gambar kalo blogpost lo nggak ada gambarnya. Misalnya, kalo pas postingan tanpa gambar, lo maunya nongolin thumbnail muka Syahrini. Taruh deh, URL gambar Syahrini di situ.

atau, bisa juga memakai tag Facebook Open Graph. (Pilih salah satu aja ye!)


<!-- Facebook Open Graph -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='ID Facebook' property='fb:admins'/>
<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>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
</b:if>

Kalo itu tadi kan, sekadar nampilin thumbnailnya aja. Kalo deskripsinya gimana?

Untuk deskripsi sendiri nggak muncul karena Facebook nggak menemukan yang dicari. Facebook mengenali tag paragraf atau <p>, sedangkan tag otomatis dari Blogger adalah <div>. Kalo lo punya masalah deskripsi tulisan yang nggak sesuai, bisa dicoba dengan menambahkan tag paragraf sebelum mengisi isi postingan. Tapi, bikinnya di bagian HTML, bukan compose. Dan, ketika menuliskan tag ini, jangan langsung dibalikin ke compose sebelum di-save. Karena tag-nya akan kembali ke <div>. Agak ribet ye?

<p>Isi postingan lo</p>


Nah, setelah tahapan-tahapan di atas dilakuin, alangkah baiknya kita ngosongin cache di Facebook dengan cara buka link ini -> https://developers.facebook.com/tools/debug/.  Masukin link blog lo, lalu klik Debug.

Taraaaa, langsung dicobain aja, deh. Tapi, backup template-nya dulu dan jangan lupa ngeletakin script-nya di mana. Kalo salah kan, bisa berabe.

Kebanyakan sih, template responsive udah otomatis ada social media tag yang disisipin sama sang desainer. Kalo yang nggak ada, ya, bikin sendiri begituuuu, Shaaay~

Udah ya, gue mau piknik sama Keenan Pearce dulu. Bye.

Bagikan: