Mengatasi Gambar Tidak Tampil Ketika Di Share Ke Facebook

No Image Share To Facebook

Mengatasi Gambar Salah (Tidak Muncul / Tampil), Tidak Sesuai Saat Share Ke Facebook

Tutorial Cara Mengatasi Gambar Thumbnail Blog Tidak Muncul Ketika di Share Facebook, kali ini blog mas tamvan akan share trik untuk memperbaiki gambar thumbnail homepage / alaman post yang tidak muncul ketika di share ke fb dengan menggunakan meta tag og:image

Mungkin blog kalian juga mempunyai beberapa masalah kenapa gambar image tidak muncul ketika di share ...
Gambar muncul tapi hanya itu aja, tidak sesuai dengan yang ada di postingan, Thumbnail Di postingan muncul tapi ketika share homepage gambarnya tidak ada..., Gambar homepage dan post muncul tapi ukurannya kecil..

Nah mungkin masih banyak yg lainnya, saya sudah mencoba beberapa percobaan di template yang di gunakan teman blogger saya seperti Templates Evo Magz Blog, Simplify 2 Red, Template anime, dan masalahnya berbeda-beda tapi cara memperbaikinya sama.

Ukuran maximum gambar yang di upload ke facebook 1200 x 630 (Tanpa Link Tautan / bisa tapi terpotong).

Ukuran yang disarankan untuk menampilkan Gambar Cukup Besar Dan Tautan Di Bawahnya 600 x 315 Cocok Untuk Website.

Ukuran Minimum Thumbnail : 200px by 200px. Akan menampilkan Gambar Di Sebelah Kiri Dan Tautan Di Sebelah Kanan.

Jadi kalian bisa membuat tampilan gambar thumbnail lebih maksimal ketika di share ke Facebook dengan memilih ukuran yang sudah di tentukan oleh facebook, saya sendiri menggunakan ukuran gambar 600 x 315 yang akan menampilkan gambar thubnail di atas tautan / Judul dan Deskripsi Blog

Okeh, sekarang kita langsung menuju ke permasalahannya.. Kenapa Gambar Thumbnail Blogger Tidak Tampil / Tidak Sesuai Ketika Di Share Ke Facebook

  • Silahkan kalian login terlebih dahulu ke akun blogger kalian
  • Lalu masuk ke menu Template → Edit HTML
  • Sekarang kita akan merubah / menambahkan meta tag og:image
  • Mungkin Para pembuat template sekarang sudah menambahkan og:image tapi ada juga yang belum.
  • Langkah Pertama Silahkan Kalian Cari Kode property='og:image'
  • Nanti akan ada kode seperti ini / mirip 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>
  • Kalian tinggal rubah kode ini <meta expr:content='data:blog.blogspotFaviconUrl' property='og:image' />
  • Menjad menjadi <meta content='LINK URL IMAGE KALIAN' property='og:image'/>, Sehingga hasilnya 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>

    LINK URL IMAGE KALIAN, Ganti Dengan Link Logo Blog Kalian, Thumbnail itu akan di tampilkan ketika homepage di share ke facebook. Sedangkan untuk halaman post akan otomatis mengambil gambar yang ada di dalam postingan.

    Nanti Hasilnya Sperti ini 

    
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlZBfIyEf9qLHaoZy9jxio5WpYu2tCatSnSS5CHetnDpJW4XgZwdBlmh0iG6BzKxfs6g9BFj8RWw88EYgKy7O0SPdEsjgRc-kDsYhPnKebFjbSGToqRQORnDzV-DZPuzOJPz0RgV-YN7fD/s1600/Blog-Mas-Tamvan.png' property='og:image'/>

  • Intinya sih kalian jangan menggunakan image dari Favicon data:blog.blogspotFaviconUrl Karena ukurannya terlalu kecil
  • Nah cara di atas ini untuk mengatasi Thumbnail yang sudah ada og:imagenya. Buat kalian yang tidak menemukan tag og:image

Cara Menambahkan Meta Tag og:image Di Blogger

  • Kalian Cari Kode <head>, lalu copy dan masukan kode dibawah ini dibwahnya
    • 
<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>

    Jangan lupa ganti LINK URL IMAGE KALIAN, Seperti Catatan di atas ↑

  • Kalo sudah, kalian tinggal save template..

    • Berdasakran pengalaman, kode di atas biasanya tidak langsung bekerja. Kalian harus menunggunya beberapa hari / jam. Atau kalian bisa coba submit website kalian ke webmaster
    Untuk mengeceknya kalian bisa menggunakan tools dari developer facebook Facebook Sharing Debugger

Jangan lupa mampir ke artikel lainnya ya gan

Tutorial Blogger Lainnya :

Cukup sekian dan terima kasih, semoga artikel tentang Tutorial Cara Mengatasi Gambar Thumbnai Blogger Yang Tidak Tampil Ketika Di Share Ke Social Media Facebook ini bermanfaat
Apabila ada yang bingung silahkan bertanya di kolom komentar

14 komentar
  1. Muzakir NurApril 16, 2017 at 5:17 AM

    Saya jarang yang seperti itu, malahan pas di share ke facebook bukan gambar yang ada di dalam artikel

    Itu penyebabnya apa ya mas ?

    ReplyDelete
    Replies
    1. Mas TamvanApril 16, 2017 at 6:02 AM

      Belum ada og:imagenya, coba di pasang meta tag di atas gan (y)

      Delete
    2. SimpanankuJuly 28, 2018 at 5:06 PM

      Sudah saya car : property='og:image' tapi gak nemu mas.
      Mohon bantuannya ? kira2 dimana bisa diselipin kode meta tag nya ?

      Delete
  2. Arif SantosoMay 24, 2017 at 5:52 AM

    mantap banget nih tutorial (y)

    ReplyDelete
  3. Irfan SyahputraJune 4, 2017 at 3:15 AM

    Mantap, tutornya lengkap (y)

    ReplyDelete
  4. UnknownJune 18, 2017 at 7:50 PM

    Makasih info nya yaa... Kebetulan ane butuh nih....

    ReplyDelete
  5. Abi HilyaJuly 2, 2017 at 9:28 PM

    Maaf.... Blog saya gambar posting anya tell kcil saat d share. Bhkn kdg gak mncul... gmn y gan? www.ngajionline.net

    ReplyDelete
  6. IamukiJuly 16, 2017 at 2:12 AM

    Kalo pas di share yang keluar malh gambar hander bukan gambar postingan , apakah sama seperti cara di atas mas ?

    ReplyDelete
    Replies
    1. Mas TamvanJuly 16, 2017 at 4:01 AM

      Sama gan, pasang og:image data:blog.postImageUrl

      Delete
  7. Bung BenkAugust 6, 2017 at 7:03 PM

    Kalo ketika share yang muncul foto author gmn gan.. padahal sebelumnya ga.. gambar dipostingan pun sudah di resize.. ???

    ReplyDelete
  8. koperdamSeptember 11, 2017 at 1:27 PM

    Toop, makasih om atas pencerahannya

    ReplyDelete
  9. fianOctober 12, 2018 at 10:15 PM

    Artikel bagus sekali.mudah dipahami

    ReplyDelete
  10. fianOctober 12, 2018 at 10:17 PM

    Saya mengalami seperti maslah gambar kalau di share link tidak muncul gambar..mohon penjelasan

    ReplyDelete