Beranda / BLOGGER

Mengatasi Gambar Tidak Tampil Ketika Di Share Ke Facebook

Posting Komentar

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/AVvXsEgVS2dvnLD2yTHpIv-2mIjU0rGIvoHGLPKbhwQ4L4r1dVGjvzqILueud0OhRMoowXbOAaRw8Nsqa3wBDEo2CZq4vY7HgTc0cqHyPlUUAftZiXV1ooz_9N8H4enjcmsbXNsm-wcV90fhUTcb/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 :





  • Memindah Posisi Judul Blog Yang Berada Di Depan Title Post Agar Menjadi Lebih Seo





  • Facebook Like Box Melayang Di Pojok Kanan Blog





  • Cara Membuat Tombol Share Melayang Responsive di Blog






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




Anda mungkin menyukai postingan ini

Tidak ada komentar untuk "Mengatasi Gambar Tidak Tampil Ketika Di Share Ke Facebook"

Posting Komentar