Langkah Agar Thumbnail Postingan Blog Muncul Di Facebook

masukkan script iklan disini

Ada yang masih bingung tentang bagaimana caranya agar pada saat share link blog di Facebook bisa muncul thumbnailnya? 

Atau bingung kenapa saat share di fb justru yang jadi thumbnail malah gambar favicon blog, sehingga terlihat gambarnya pecah? 

Beberapa pertanyaan tersebut muncul sih di pikiran saya beberapa waktu lalu saat saya mencoba membagikan postingan blog di fb kok yang kelihatan malah gambar faviconnya, bukan gambar yang ada di artikel itu.

Tapi tenang saja, disini saya akan membagikan langkah-langkah untuk mengatasi hal tersebut sesuai dengan apa yang telah saya lakukan untuk memecahkan masalah ini.

Penyebab thumbnail blog tidak muncul di fb ini bisa jadi karena belum memasang kode Open Graph Facebook pada template. Atau bisa juga di dalam template sudah terpasang meta tag Open Graph, cuma ada bagian yang belum di ubah.

Pengertian Open Graph

Open Graph merupakan kode meta tag yang khusus dibuat oleh Facebook guna mendukung perayapan webmaster dari Facebook sendiri. Dengan begitu maka Facebook akan bisa membaca struktur suatu blog baik judul, deskripsi, alamat blog atau gambar di dalam blog tersebut.

Cara menampilkan gambar postingan blog di FB

Okey, langsung saja sekarang kita ke langkah utama untuk mengatasi gambar thumbnail blogger tidak tampil saat share ke Facebook. Langkah untuk mengatasi hal tersebut adalah sebagai berikut

1. Masuk ke blogger kalian

2. Pilih Tema -> Edit HTML

3. Letakkan kode meta tag Open Graph Facebook berikut ini di atas kode </head>

<!-- [ Social Media meta tag ] -->
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>  
<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 expr:content='data:blog.pageTitle' property='og:title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg77ERIiKPSFo6FSUCuIfNzYoOnU5mV7R1uGMye-t0SpAWhe-HbDvaHP44FPOD-kXV-ggH6Pxwmem67ehino2Ty1H0qBKP1oXJxBDy1ssa068KZLQvnuZP97vH9hy5mS0cmUP29GD2GYQE/s1600/teknodekjoko-min.jpg' property='og:image'/>
<meta expr:content='data:blog.blogspotFaviconUrl' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
<b:else/>
<meta content='Aplikasi android, game, anime, dan aplikasi komputer atau laptop' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='KODE-APLIKASI' property='fb:app_id'/>
<meta content='KODE-ADMIN' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>

Catatan: Ganti link https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg77ERIiKPSFo6FSUCuIfNzYoOnU5mV7R1uGMye-t0SpAWhe-HbDvaHP44FPOD-kXV-ggH6Pxwmem67ehino2Ty1H0qBKP1oXJxBDy1ssa068KZLQvnuZP97vH9hy5mS0cmUP29GD2GYQE/s1600/teknodekjoko-min.jpg dengan link gambar kalian.

Apabila di dalam template kalian sudah ada kode Open Graph, maka hanya perlu mengganti  bagian data:blog.blogspotFaviconUrl pada baris kode

<meta expr:content='data:blog.blogspotFaviconUrl' property='og:image' />

menjadi seperti berikut

<meta expr:content='link url gambar/image kalian' property='og:image'/>

4. Simpan.

Langkah untuk menampilkan gambar blog atau postingan di blog saat share di fb sudah selesai. Untuk mengetahui apakah sudah berhasil atau belum, kalian bisa cek menggunakan Facebook Sharing Debugger, dengan memasukkan url blog atau url postingan blog pada kolom yang di sediakan kemudian klik Debug.

Pada saat pertama klik Debug biasanya akan muncul error, jadi alian klik Debug sekali lagi.

Apabila masih belum muncul thumbnailnya, berarti harus menunggu beberapa saat sampai kode meta tag Open Graph tersebut bekerja sempurna.

Itulah yang bisa saya bagikan kepada sobat semua, semoga bermanfaat. Terima kasih.