Menampilkan Gambar Yang Tidak Tampil Ketika Share Ke Facebook
Halo sobat , ibarat 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 ialah dengan memakai meta tag og:image
Mungkin beberapa blog kalian juga memiliki duduk kasus mengapa gambar image tidak muncul ketika di share, atau seringkali gambar yang muncul malah tidak sesuai dengan apa yang ada di postingan atau juga ketika Thumbnaik Di Postingan kau muncul namun ketika di share homepagenya gambarnya malah tidak ada atau juga Gambar homepage dari post kau muncul tapi ukurannya kecil atau duduk kasus lain lainnya.
Nah mimin sudah mencoba beberapa percobaan di template yang dipakai oleh mimin dan sahabat sahabat mimin, ibarat teladan 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 ialah 1200 x 630 (Tanpa Link Tautan/ sanggup 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 sanggup menciptakan tampilan gambar thumbnail lebih maksimal ketika di share ke facebook dengan menentukan ukuran yang sudah ditentukan oleh facebook, saya sendiri memakai ukuran gambar 600 x 315 yang akan menampilkan gambar thubnail diatas tautan / judul dan deskripsi dari blog
Oke, mari kita eksklusif 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 sajian 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 isyarat property='og:image'
1. Pertama, silahkan login dahulu ke akun blogger kalian
2. Selanjutnya masuk ke sajian 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 isyarat property='og:image'
Nanti anda akan menemukan isyarat ibarat 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 isyarat berwarna merah tersebut menjadi :
<meta content='LINK URL IMAGE KALIAN' property='og:image'/>
Sehingga karenanya akan tampak ibarat 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 ibarat ini
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDb5DbX78bflGOXyFxQnKGqQhgdFxIs5oDgXaXP-KmvSk88bRblE3y9NQMkW6zBB0HO6JcVSXPNFVOY-1vFNkzrBsTZJWBEqBSD0X-uIlSlJ722X1HFvOeh4acpGc45WSDeOWk-MqQNU6Z/s1600/Blog-Mas-Tamvan.png' property='og:image'/>
Nanti Hasilnya akan ibarat ini
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDb5DbX78bflGOXyFxQnKGqQhgdFxIs5oDgXaXP-KmvSk88bRblE3y9NQMkW6zBB0HO6JcVSXPNFVOY-1vFNkzrBsTZJWBEqBSD0X-uIlSlJ722X1HFvOeh4acpGc45WSDeOWk-MqQNU6Z/s1600/Blog-Mas-Tamvan.png' property='og:image'/>
Intinya kalian jangan memakai Image dari Widget yang ada di Fav Icon
data:blog.blogspotFaviconUrl Karena ukuran nya terlalu kecil
Nah cara diatas ialah cara untuk mengatasi thumbnail yang sudah ada og:imagenya, namun bagi kalian yang tidak menemukan tag og:image
kalian sanggup menambahkan meta Tag og:Image di blogger
cara menambahkan Meta Tag og:image di blogger
1. Pertama cari isyarat <head>, kemudian copy dan masukkan isyarat 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, ibarat catatan diatas
2. Kalo sudah tinggal kalian save template.
Berdasarkan pengalaman mimin dari isyarat diatas, biasanya tidak eksklusif berubah dan bekerja , namun kalian harus menunggunya beberapa hari atau jam, atau kalian sanggup coba submit wensite kalian kedalam situs webmaster. Untuk mengechecknya kalian sanggup memakai tools dari developer facebook Facebook Sharing Debugger
Sekian artikel dari mimin perihal Cara Mengatasi Gambar Thumbnail Bloggger Yang Tidak Tampil Ketika Share Ke Sosial Media Facebook, biar bermanfaat
apabila ada yang ingin ditanyakan silahkan tanya di kolom komentar.