Menampilkan Gambar dan Deskripsi Share Facebook Untuk Blogger
Saat Share Postingan ke facebook dengan tombol share biasanya akan memunculkan gambar postingan dan juga deskripsi pendek postingan. Deskripsi yang muncul pada postingan tersebut umumnya di ambil dari kalimat pertama pada artikel yang kita share. Sedang gambar diambil dari gambar pertama pada artikel(apabila terdapat banyak gambar didalamnya). Atau biasa juga menampil gambar default no image jika dalam postingan memang tidak ada gambarnya.
Lantas bagaimana jika postingan yang kita buat sudah memasukkan image dan saat share facebook tidak muncul gambarnya, yang ada hanya tampilan no image atau gambar tidak muncul sama sekali. Hal inilah yang akan kita bahas pada tutorial kali ini, termasuk deskripsi psotingan yang juga tidak muncul pada saat share fb tersebut.
Normalnya adalaha jika saat share ke Facebook akan otomatis memunculkan gambar / thumbnail dan deskripsi. Padahal facebook bisa kita gunakan sebagai sumber trafic setelah google.
Masalah ini juga dulu sering saya alami, sampai-sampai harus mengutak-atik kode HTLM dalam template, padahal saya sama sekali tidak mengerti perihal kode tersebut, semuanya murni modal nekat, karena saya berfikir bahwa jika terjadi kesalahan atau error dalam tampilan blog saya, maka saya bisa melakukan proses restore template, atau langsung menggati template. Tapi hal ini membuat saya semakin penasaran dan mencoba beberapa alternatif yang saya lihat dari berbagai postingan dan juga forum tanya jawab dan akhirnya bisa menyelesaikan problem ini. Dan saatnya saya untuk membagikan pengalaman ini dalam bentuk tutorial.
1. Gambar tidak muncul dan hanya memunculkan deskripsi saja
Ini merupakan jenis kasus pertama yang sering muncul saat melakukan share. Judul postingan dan deskripsi muncul namun image tidak muncul, bahkan frame img juga tidak tersedia,
2. Gambar muncul namun deskripsi tidak muncul
Kasus kedua merupakan kasus yang banyak dipertanyakan. Masalah ini banyak terdapat pada beberapa template free yang pernah saya gunakan sebelum melakukan modifikasi pada beberapa tag meta dan HTML
Pada tutorial kali ini, kita akan membahas salah satu requesant dari pembaca dewa plokis blog yang sudah beberapa kali membuat postingan dan membagikan artikelnya ke facebook dan mendapatkan masalah deskripsi postingannya tidak muncul. Jadi kita memilih kasus yang nomor dua diatas untuk kita ulas. Namun tutorial ini juga akan menyelesaikan masalah yang pertama (Gambar tidak muncul dan hanya memunculkan deskripsi saja). Jadi bisa dikatakan bahwa, tutorial ini mirip dengan istilah "Buy One Get One Free".☺☺☺
1. Tidak tersedianya tag meta social shera dalam template blog
Ini biasa terjadi pada saat Anda menggunakan template bajakan. Atau template redesign yang dibuat asal-asalan tanpa memikirkan faktor ini.
2. Meta tag social share ada namun tidak di maksimalkan (tidak diset dengan benar)
Untuk faktor yang kedua ini, hanyalah jenis kemalasan dari blogger saja, tidak mau pusing dengan apa yang ada dalam kode Meta tag.
3. Terjadi bentrok kode HTML dalam postingan
Kalau masalah yang satu ini, saya rasa terjadi karena kesalahan sendiri yang suka utak-atik template tanpa skill apapun alias buta tentang HTML (termasuk saya )
Nah, setelah kita ketahui penyebabnya, sekarang saatnya kita selesaikan masalahnya
Silakan logi ke Akun Blogger Anda ➤ Pilih theme➤Lalu Edit Theme
Kemudian tambahkan Meta Tag Berikut Di bawah <head>
Ubah Semua kode yang saya mark dengan milik Anda. Jika tidak tahu caranya, sepertinya Anda harus membaca dua postingan sebelumnya tentang :
# 2. Langkah Kedua
Selanjutnya, simpan kode berikut ini, tepat di atas kode <data:post.body/>. Jika ada lebih dari satu <data:post.body/>, simpan di atas kode <data:post.body/> yang kedua.
# 3. Langkah Ketiga Tambahkan <p> dan </p> di antara semua kode <data:post.body/> sehingga menjadi <p><data:post.body/></p>
Jika semua cara diatas sudah dilakukan namun masih belum memunculkan deskripsi, coba copy link postingan Anda lalu paste di https://developers.facebook.com/tools/debug/.(Anda harus login Facebook terlebih dahulu) Jika terdapat pesan perbaikan, coba check kembali semua kode yang sudah Anda pasang tadi.
Cara diatas juga secara otomatis akan memperbaiki tampilan share facebook yang tidak memunculkan image. Jika saat mencoba share pertama gambar belum muncul, tutup share yang pertama kemudian ulangi share-nya.
Demikian tutorial kali ini tentang cara mengatasi gambar dan deskripsi postingan tidak muncul saat share di facebook. Semoga bisa diterapkan pada Akun blogspot Anda dan tidak lagi mendapatkan masalah seperti ini
Lantas bagaimana jika postingan yang kita buat sudah memasukkan image dan saat share facebook tidak muncul gambarnya, yang ada hanya tampilan no image atau gambar tidak muncul sama sekali. Hal inilah yang akan kita bahas pada tutorial kali ini, termasuk deskripsi psotingan yang juga tidak muncul pada saat share fb tersebut.
Masalah ini juga dulu sering saya alami, sampai-sampai harus mengutak-atik kode HTLM dalam template, padahal saya sama sekali tidak mengerti perihal kode tersebut, semuanya murni modal nekat, karena saya berfikir bahwa jika terjadi kesalahan atau error dalam tampilan blog saya, maka saya bisa melakukan proses restore template, atau langsung menggati template. Tapi hal ini membuat saya semakin penasaran dan mencoba beberapa alternatif yang saya lihat dari berbagai postingan dan juga forum tanya jawab dan akhirnya bisa menyelesaikan problem ini. Dan saatnya saya untuk membagikan pengalaman ini dalam bentuk tutorial.
2 jenis kasus error yang sering muncul pada saat share ke facebook
1. Gambar tidak muncul dan hanya memunculkan deskripsi saja
Ini merupakan jenis kasus pertama yang sering muncul saat melakukan share. Judul postingan dan deskripsi muncul namun image tidak muncul, bahkan frame img juga tidak tersedia,
 |
| Hanya deskripsi Yang Muncul |
2. Gambar muncul namun deskripsi tidak muncul
Kasus kedua merupakan kasus yang banyak dipertanyakan. Masalah ini banyak terdapat pada beberapa template free yang pernah saya gunakan sebelum melakukan modifikasi pada beberapa tag meta dan HTML
 |
| deskripsi postingan tidak muncul |
Pada tutorial kali ini, kita akan membahas salah satu requesant dari pembaca dewa plokis blog yang sudah beberapa kali membuat postingan dan membagikan artikelnya ke facebook dan mendapatkan masalah deskripsi postingannya tidak muncul. Jadi kita memilih kasus yang nomor dua diatas untuk kita ulas. Namun tutorial ini juga akan menyelesaikan masalah yang pertama (Gambar tidak muncul dan hanya memunculkan deskripsi saja). Jadi bisa dikatakan bahwa, tutorial ini mirip dengan istilah "Buy One Get One Free".☺☺☺
Penyebab deskripsi tidak muncul saat share postingan ke facebook
Ada beberapa faktor yang menyebabkan masalah ini. Olehnya itu, sekalipun nantinya Anda tidak membaca postingan ini sampai habis, saya yakin Anda sudah pasti bisa melakukan perbaikan maupun antisipasi untuk masalah ini. Berikut beberapa penyebab deskripsi1. Tidak tersedianya tag meta social shera dalam template blog
Ini biasa terjadi pada saat Anda menggunakan template bajakan. Atau template redesign yang dibuat asal-asalan tanpa memikirkan faktor ini.
2. Meta tag social share ada namun tidak di maksimalkan (tidak diset dengan benar)
Untuk faktor yang kedua ini, hanyalah jenis kemalasan dari blogger saja, tidak mau pusing dengan apa yang ada dalam kode Meta tag.
3. Terjadi bentrok kode HTML dalam postingan
Kalau masalah yang satu ini, saya rasa terjadi karena kesalahan sendiri yang suka utak-atik template tanpa skill apapun alias buta tentang HTML (termasuk saya )
Nah, setelah kita ketahui penyebabnya, sekarang saatnya kita selesaikan masalahnya
Cara Memunculkan Gambar & Deskripsi Postingan Saat Share Ke Facebook
# 1. Langkah PertamaSilakan logi ke Akun Blogger Anda ➤ Pilih theme➤Lalu Edit Theme
Kemudian tambahkan Meta Tag Berikut Di bawah <head>
<!-- Facebook Open Graph Tag -->
<b:if cond='data:view.isSingleItem'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMPGZ7c6ck6bvK4-Z1XTinYo8VTvX9iwUKYNCS3QsBOgMIFQubdOy0Nem7lxoBL1fLKvkq8PKUoTw8RofVZ1LraIi0LGkQe373mU2dqqLt4s4KNX4L5soTiLlucnNxURaTRRvnHwEWW9J8/s1600/Dewa-Plokis.png' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='https://www.facebook.com/100000821211994' property='article:author'/>
<meta content='https://www.facebook.com/100000821211994' property='article:publisher'/>
<meta content='100000821211994' property='fb:admins'/>
<meta content='3227943947280234' property='fb:app_id'/>
<meta content='1746108765462517' property='fb:pages'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
Ubah Semua kode yang saya mark dengan milik Anda. Jika tidak tahu caranya, sepertinya Anda harus membaca dua postingan sebelumnya tentang :
- Cara Mendapatkan Kode ID Admin dan ID Aplikasi Facebook
- Pasang Meta Tag SEO Friendly 2019 Valid HTML5 Untuk Blogger
# 2. Langkah Kedua
Selanjutnya, simpan kode berikut ini, tepat di atas kode <data:post.body/>. Jika ada lebih dari satu <data:post.body/>, simpan di atas kode <data:post.body/> yang kedua.
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.snippet'>
<meta expr:content='data:post.snippet' name='description'/>
</b:if>
</b:if># 3. Langkah Ketiga Tambahkan <p> dan </p> di antara semua kode <data:post.body/> sehingga menjadi <p><data:post.body/></p>
Jika semua cara diatas sudah dilakukan namun masih belum memunculkan deskripsi, coba copy link postingan Anda lalu paste di https://developers.facebook.com/tools/debug/.(Anda harus login Facebook terlebih dahulu) Jika terdapat pesan perbaikan, coba check kembali semua kode yang sudah Anda pasang tadi.
Cara diatas juga secara otomatis akan memperbaiki tampilan share facebook yang tidak memunculkan image. Jika saat mencoba share pertama gambar belum muncul, tutup share yang pertama kemudian ulangi share-nya.
Ini tidak berlaku apabila judul Artikel terlalu panjang, karena pasti akan memotong posisi deskripsiIni hasilnya setelah melakukan perbaikan sesuai dengan cara diatas
Demikian tutorial kali ini tentang cara mengatasi gambar dan deskripsi postingan tidak muncul saat share di facebook. Semoga bisa diterapkan pada Akun blogspot Anda dan tidak lagi mendapatkan masalah seperti ini
Load Comments
Tutup Komentar
Disqus Codes
- To write a bold letter please use
<strong></strong>or<b></b>. - To write a italic letter please use
<em></em>or<i></i>. - To write a underline letter please use
<u></u>. - To write a strikethrought letter please use
<strike></strike>. - To write HTML code, please use
<code></code>or<pre></pre>or<pre><code></code></pre>.
And use parse tool below to easy get the style.
strong em u strike
pre code pre code spoiler
embed
