Solusi Gambar Artikel Blog Tidak Sesuai Saat di Share ke Facebook

Solusi Mengatasi Gambar Artikel/ Postingan Blog Yang Tidak Sesuai Saat di Share ke Facebook Pada Platform Blogspot

Contents:

• Script Meta Tag Open Graph
• Testing di Situs Developer Facebook

Banyak pengguna website khususnya platform blogspot yang frustasi terhadap blognya saat artikel yang telah dibuat berikut dengan gambarnya, tidak sesuai ketika ingin menshare postingan tersebut ke media sosial Facebook.

Mungkin pernah ada yang bertanya kepada diri sendiri, apakah yang salah tombol social share yang dibuat?

Oiya sebelum lebih lanjut lagi, jika diwebsite anda belum ada tombol social share bisa dibaca Cara Membuat Tombol Social Share FB, G+, Twitter dan LinkedIn dengan Penghitung (Count).

Memang perlu lebih diteliti lagi apa yang menjadi penyebab utama. Berdasarkan pengalaman yang pernah dihadapi biasanya masalahnya itu tidak tersedia meta tag open graph pada website tersebut atau bisa juga belum terpasang dengan benar.

• Kode Script Meta Tag Open Graph Lengkap

Solusi untuk mengatasi hal tersebut bisa gunakan open graph dibawah ini, dibaca dengan teliti agar tidak terjadi kesalahan ya.

<b:if cond='data:blog.postImageUrl'>

<meta expr:content='data:blog.postImageUrl' property='og:image'/>

<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>

<meta expr:content='data:blog.postImageUrl' itemprop='image'/>

<b:else/>

<b:if cond='data:blog.postImageThumbnailUrl'>

<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>

<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>

<meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image'/>

</b:if></b:if>

<!-- Metadata Facebook -->

<meta expr:content='data:blog.title' property='og:site_name'/>

<meta expr:content='data:blog.pageTitle' property='og:title'/>

<meta content='article' property='og:type'/>

<meta expr:content='data:blog.url' property='og:url'/>

<meta content='URL FB' property='fb:admins'/>

<meta content='Id App FB' property='fb:app_id'/>

<!-- Metadata Twitter -->

<meta name='twitter:card' value='summary'/>

<meta expr:content='data:blog.pageTitle' name='twitter:title'/>

<meta content='@User_Name' name='twitter:site'/>

<meta content='@User_Name' name='twitter:creator'/>

<!-- Schema.org markup for Google+ -->

<meta expr:content='data:blog.pageTitle' itemprop='name'/>

<link expr:href='data:blog.homepageUrl' hreflang='x-default' rel='alternate'/>

<link expr:href='data:blog.url' rel='canonical'/>

<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='shortcut icon' type='image/x-icon'/>

<link href='https://URL G+/posts' rel='publisher'/>

<link href='https://URL G+/about' rel='author'/>

<link href='https://URL G+' rel='me'/>

Copas saja script open graph diatas lalu letakkan dibawah "<b:include data='blog' name='all-head-content'/>".

Baca dengan teliti untuk highlight berwarna:

Merah: URL user.name FB setelah "/" (slash). Contoh: https://www.facebook.com/user.name

Biru Muda: Nomor App Id Facebook anda, https://developers.facebook.com/apps/.

Pink: Username dari Twitter anda

Hijau Muda: URL dari Google Plus anda

• Cek di Situs Developer Facebook

Setelah mengikuti instruksi yang diatas sebelumnya bisa melakukan pengecekan pada developer Facebook silahkan kunjungi https://developers.facebook.com/tools/debug/. Lihat gambar dibawah ini;

Untuk melakukan test, silahkan masukkan URL artikel kedalam field  yang kosong lalu klik "Debug". Maka akan terlihat seperti gambar yang diatas. 

Terlihat pada kotak yang warna merah langkah untuk melakukan testing. Gunanya untuk membersihkan caching atau memuat ulang artikel yang pernah dishare ke FB agar menyesuaikan kembali dengan gambar postingan artikel yang seharusnya.

Dan seharusnya masalah tentang gambar artikel blog yang tidak sesuai saat dishare ke facebook sudah terpecahkan.

Jika masih mendapat kendala dalam merapkan langkah - langkah diatas, silahkan untuk meninggalkan pesan pada kolom komentar. Salam MauBergaya