√ Cara Jitu Mengatasi Gambar Posting Blog yang Tidak Muncul Saat di Share ke Facebook - AdityaTekno

Social Items

Cara Mengatasi Gambar Posting Blog yang Tidak Muncul Saat di Share ke Facebook
Sebagian besar orang yang menekuni dunia blogging pasti pernah mengalami kejadian seperti ini. Dan masalah ini sering dihadapi blogger yang templatenya belum terpasang Meta Tag khusus untuk share ke Facebook. Postingan berupa link yang disertai dengan gambar dan deskripsi atau yang biasa disebut snippet cenderung lebih mendapat perhatian dan klik daripada hanya berupa teks saja.

Karena jika postingan hanya berupa link saja, terlihat kurang menarik bagi orang yang melihatnya. Oleh karena itu, tentu kita ingin agar postingan yang kita share ke media sosial seperti facebook, twitter, maupun google plus secara otomatis dilengkapi dengan gambar dan deskripsi dari postingan kita. 

Berdasarkan pengalaman saya selama ngeblog, saya pernah mengalami masalah pada blog saya sendiri  pada deskripsi dan gambar yang tadinya muncul tiba-tiba menghilang entah kemana. Hehehe.


Cara Pasang Meta Tag Facebook Open Graph


Berikut cara memasang Meta Tag Facebook Open Graph (OG) pada Blogger atau Blogspot  untuk mengatasi gambar dan judul posting blog yang tidak muncul saat share ke Facebook.

1. Login ke halaman Dashboard blogspot kamu, setelah berhasil login, masuk ke menu Template » Edit HTML.

2. Cari kode <head> , untuk memudahkan pencarian tekan CTRL+F, kemudian letakkan kode di bawah ini di bawah kode <head>


Meta Tag Facebook Open Graph

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<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>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:post.snippet' name='og:description'/>
<b:else/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='KODE_APLIKASI_FB_KAMU' property='fb:app_id'/>
<meta content='KODE_ADMIN_FB_KAMU' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>

3. Kemudian pasang kode berikut ini di bawah kode <body> atau <body .... ada kode lain... />
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'KODE_APLIKASI_FB_KAMU',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>

4. Simpan template.

6. Ukuran Gambar juga Penting!
"Pastikan gambar ilustrasi posting yang diupload berukuran minimal 200x200 pixel atau ideaknlnya minimal 600×300 pixels. Facebook akan mengambil gambar paling besar yang ada di halaman yang di-share."

7. Cek salah satu posting di Facebook Debugger. Masukkan linknya dan kemudian klik Ambil informasi pengurangan baru, agar facebook mengambil ulang cache pada artikel kamu. Kemudian scroll kebawah untuk melihat hasilnya, jika muncul gambar dan deskripsi seperti gambar dibawah, berarti kamu sudah berhasil.
Contoh Post Facebook Share

Demikian Cara Jitu Mengatasi Gambar Posting Blog yang Tidak Muncul Saat di Share ke Facebook. Semoga bisa bermanfaat bagi kalian semua. Selamat mencoba dan Good Luck! Samapai jumpa di postingan selanjutnya. Salam AdityaTekno.com.

sumber:
http://www.contohblog.com/2017/01/masalah-posting-blog-share-facebook-open-graph.html

Cara Jitu Mengatasi Gambar Posting Blog yang Tidak Muncul Saat di Share ke Facebook

Cara Mengatasi Gambar Posting Blog yang Tidak Muncul Saat di Share ke Facebook
Sebagian besar orang yang menekuni dunia blogging pasti pernah mengalami kejadian seperti ini. Dan masalah ini sering dihadapi blogger yang templatenya belum terpasang Meta Tag khusus untuk share ke Facebook. Postingan berupa link yang disertai dengan gambar dan deskripsi atau yang biasa disebut snippet cenderung lebih mendapat perhatian dan klik daripada hanya berupa teks saja.

Karena jika postingan hanya berupa link saja, terlihat kurang menarik bagi orang yang melihatnya. Oleh karena itu, tentu kita ingin agar postingan yang kita share ke media sosial seperti facebook, twitter, maupun google plus secara otomatis dilengkapi dengan gambar dan deskripsi dari postingan kita. 

Berdasarkan pengalaman saya selama ngeblog, saya pernah mengalami masalah pada blog saya sendiri  pada deskripsi dan gambar yang tadinya muncul tiba-tiba menghilang entah kemana. Hehehe.


Cara Pasang Meta Tag Facebook Open Graph


Berikut cara memasang Meta Tag Facebook Open Graph (OG) pada Blogger atau Blogspot  untuk mengatasi gambar dan judul posting blog yang tidak muncul saat share ke Facebook.

1. Login ke halaman Dashboard blogspot kamu, setelah berhasil login, masuk ke menu Template » Edit HTML.

2. Cari kode <head> , untuk memudahkan pencarian tekan CTRL+F, kemudian letakkan kode di bawah ini di bawah kode <head>


Meta Tag Facebook Open Graph

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<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>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:post.snippet' name='og:description'/>
<b:else/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='KODE_APLIKASI_FB_KAMU' property='fb:app_id'/>
<meta content='KODE_ADMIN_FB_KAMU' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>

3. Kemudian pasang kode berikut ini di bawah kode <body> atau <body .... ada kode lain... />
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'KODE_APLIKASI_FB_KAMU',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>

4. Simpan template.

6. Ukuran Gambar juga Penting!
"Pastikan gambar ilustrasi posting yang diupload berukuran minimal 200x200 pixel atau ideaknlnya minimal 600×300 pixels. Facebook akan mengambil gambar paling besar yang ada di halaman yang di-share."

7. Cek salah satu posting di Facebook Debugger. Masukkan linknya dan kemudian klik Ambil informasi pengurangan baru, agar facebook mengambil ulang cache pada artikel kamu. Kemudian scroll kebawah untuk melihat hasilnya, jika muncul gambar dan deskripsi seperti gambar dibawah, berarti kamu sudah berhasil.
Contoh Post Facebook Share

Demikian Cara Jitu Mengatasi Gambar Posting Blog yang Tidak Muncul Saat di Share ke Facebook. Semoga bisa bermanfaat bagi kalian semua. Selamat mencoba dan Good Luck! Samapai jumpa di postingan selanjutnya. Salam AdityaTekno.com.

sumber:
http://www.contohblog.com/2017/01/masalah-posting-blog-share-facebook-open-graph.html
Load Comments

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Notifications

Disqus Logo