logo blog

Mengatasi Gambar Tidak Tampil Ketika Di Share Ke Facebook

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 Kanan Dan Tautan Di Sebelah Kiri.

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 TemplateEdit 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://1.bp.blogspot.com/-3sfPiW9c7Rw/V5IP4C90xlI/AAAAAAAAA70/kmMOj4TgPYsD4Qa5CFIkS3rIAPhTMwX-ACLcB/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

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

Share this:

Berlangganan via email

Agan Sedang Membaca Artikel : Mengatasi Gambar Tidak Tampil Ketika Di Share Ke Facebook. Silahkan masukan email anda dibawah ini! dan nanti akan otomatis mendapatkan kiriman artikel terbaru dari Blog Mas Tamvan. Terimakasih.

Kumpulan Tips Trik Blogger

Blog Mas Tamvan

Terima Kasih Sudah Membaca Artikel Tentang : Mengatasi Gambar Tidak Tampil Ketika Di Share Ke Facebook. Jika Ada Yang Mau Request Tutorial Silahkan Beri Tahu Saya Di Kolom Komentar :)

3 comments

Muzakir Nur

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

Itu penyebabnya apa ya mas ?

Mas Tamvan

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

Arif Santoso

mantap banget nih tutorial (y)

Saya menunggu komentar anda..

Kalo ada yang error mohon kasih tau admin, supaya bisa secepatnya untuk diperbaiki..

Komentar dengan link promo akan masuk spam.

Tambahkan Spasi Setelah Memasukan Kode Emoticon..
Gunakan kode <i rel="image">URL GAMBAR DI SINI</i> untuk menyertakan gambar di komentar.Show Konversi Kode Hide Konversi Kode Show EmoticonShow Emoticon Hide Emoticon