Menampilkan Gambar Yang Tidak Tampil Saat Share Ke Facebook

Halo sobat Jalanucul, seperti biasa  kali ini mimin akan membagikan Cara Mengatasi Gambar Thumbnail Blog Tidak Muncul Saat Share Ke Facebook. 

Hal yang pertama kali harus anda perhatikan untuk memperbaiki gambar thumbnail homepage / alaman post yang tidak muncul ketika di share ke fb adalah dengan menggunakan meta tag og:image

Mungkin beberapa blog kalian juga mempunyai masalah mengapa gambar image tidak muncul ketika di share, atau seringkali gambar yang muncul malah tidak sesuai dengan apa yang ada di postingan atau juga saat Thumbnaik Di Postingan kamu muncul namun ketika di share homepagenya gambarnya malah tidak ada atau juga Gambar homepage dari post kamu muncul tapi ukurannya kecil atau masalah lain lainnya.

Nah mimin sudah mencoba beberapa percobaan di template yang digunakan oleh mimin dan teman teman mimin, seperti contoh Template dari Evo Magz, dimana pada template ini tidak terdapat script og:image pada tag htmlnya.

Namun kalian tidak usah khawatir berikut akan mimin jabarkan penjelasannnya dan cara mengatasinya , yuk mari kita simak :

Catatan : 

• Ukuran maximum gambar yang biasanya di upload ke facebook adalah 1200 x 630 (Tanpa Link Tautan/ bisa tapi terpotong)
• Ukuran yang disarankan untuk menampilkan gambar cukup besar dan tautan dibawahnya 600 x 315 Cocok untuk website
• Ukuran minium thumbnail : 200px by 200px. Akan menampilkan gambar di sebelah kiri dan tautan pada sebelah kanan.

Jadi kalian dapat membuat tampilan gambar thumbnail lebih maksimal ketika di share ke facebook dengan memilih ukuran yang sudah ditentukan oleh facebook, saya sendiri menggunakan ukuran gambar 600 x 315 yang akan menampilkan gambar thubnail diatas tautan / judul dan deskripsi dari blog

Oke, mari kita langsung ke tkp, Mengapa Gambar Thumbnail Blogger Tidak Tampil / Tidak Sesuai dengan Post Ketika Di Share Ke Faceboo

1. Pertama, silahkan login dahulu ke akun blogger kalian
2. Selanjutnya masuk ke menu Template => Edit HTML
3. Lalu Kita akan menambahkan / mrubah meta tag og:image
4. Sebagian kreater template biasanya sudah menambahkan og:image namun ada juga sebagian yang belum
5. Langkah pertama silahkan anda cari kode property='og:image'

Nanti anda akan menemukan kode seperti ini :

<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 expr:content='data:blog.blogspotFaviconUrl' property='og:image' />

    </b:if>

</b:if>

6. Selanjutnya kalian tinggal ubah kode berwarna merah tersebut menjadi  :

 <meta content='LINK URL IMAGE KALIAN' property='og:image'/>

Sehingga hasilnya akan tampak seperti dibawah ini :

<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='LINK URL IMAGE KALIAN' property='og:image'/>

    </b:if>

</b:if>

Catatan : Link url dari image kalian , ganti dengan link logo blog kalian, Thumbnaik akan ditampilkan ketika homepage di share ke facebook, sedangkan untuk halaman post akan otomatis mengambil gambar yang ada didalam postingan.

Nanti Hasilnya akan seperti ini 

<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHct76ZRNEzoWa3Md-DzvKMNqJb4Mhtbk6qaLRev0BfZtowldYkIPLed9vSYJbMxX9nr-8oMIN05Z98DJIBVe-dh0fHS7qeHn_OekEHQJyBNdxrvmBco4MlA3ubV48-oF_0C_dBrvRoeCx/s1600/Blog-Mas-Tamvan.png' property='og:image'/>

Intinya kalian jangan menggunakan Image dari Widget yang ada di Fav Icon

data:blog.blogspotFaviconUrl Karena ukuran nya terlalu kecil

Nah cara diatas adalah cara untuk mengatasi thumbnail yang sudah ada og:imagenya, namun bagi kalian yang tidak menemukan tag og:image 

kalian bisa menambahkan meta Tag og:Image di blogger

cara menambahkan Meta Tag og:image di blogger

1. Pertama cari kode <head>, lalu copy dan masukkan kode dibawah ini dibawahnya 

<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='LINK URL IMAGE KALIAN' property='og:image'/>

    </b:if>

</b:if>

Catatan : Jangan lupa ganti link url image kalian, seperti catatan diatas

2. Kalo sudah tinggal kalian save template.

Berdasarkan pengalaman mimin dari kode diatas, biasanya tidak langsung berubah dan bekerja , namun kalian harus menunggunya beberapa hari atau jam, atau kalian bisa coba submit wensite kalian kedalam situs webmaster. Untuk mengechecknya kalian bisa menggunakan tools dari developer facebook Facebook Sharing Debugger

Sekian artikel dari mimin tentang Cara Mengatasi Gambar Thumbnail Bloggger Yang Tidak Tampil Ketika Share Ke Sosial Media Facebook, semoga bermanfaat

apabila ada yang ingin ditanyakan silahkan tanya di kolom komentar.

Share this post