Wednesday, January 10, 2018

Mengatasi Tumbnail Gambar Mengecil Ketika Share Artikel

Mengatasi Tumbnail Gambar Mengecil Ketika Share Artikel

Tags

Tumbnail Gambar Mengecil Ketika Share Artikel ke facebook
Tumbnail

Hallo sobat blogger gimana kabar mu hari ini. Apa masih semangat untuk nge blog, mudah-mudahan tetap semangat ya. Semoga tak pernah bosan berbagi informasi kepada orang lain melalui artikel yang kamu terbitkan pada blog kamu. Berbagi ilmu itu InsyaAllah akan berbuah pahala dan kebaikan.

Pembahasan kali ini saya akan memberi info tentang cara share artikel blog kita ke media sosial dengan baik. Memang terdengar mudah karna setiap template blog sudah menyediakan winget share. Tapi di sini akan muncul masalah baru yang susumu alias susah-susah mudah untuk di pecahkan.

Saya yakin umumnya para blogger pernah mengalami masalah seperti ini. Masalah ini muncul ketika tampilan artikel yang telah kita share tidak sesuai dengan harapan. Seperti gambar tumbnail mengecil atau bahkan tidak muncul sama sekali. Bagian judul atau descripsi artikel tidak tampil dan sebagainya.

Menurut penelusuran saya masalah seperti ini ada karna kesalahan dari kode meta tag dari template blog kita. Coba kamu cari di kolom search engin google pasti akan bejibun artikel yang membahas cara mengatasinya.

Tapi sulit menemukan artikel yang betul-betul memberi solusi nyata. Pada umumnya cara yang di berikan sama, namun tidak menyelesaikan masalah. Hasilnya gagal hanya buang-buang quota internet untuk browsing.

Kali ini saya akan memberikan solusi pasti dalam memecahkan masalah meta tag share artikel ke sosial media. 

Jika sebelumnya gambar mengecil atau tidak muncul saat share artikel ke medsos seperti facebook dan twitter.

Nah sekarang semuanya akan jadi normal sesuai keinginan. Gambar tumbnail dari artikel yang kita share ke facebook dan twitter akan tampil lebih besar seperti web site mainstream contoh lihat gambar berikut.

Tumbnail Gambar Mengecil Ketika Share Artikel
Tumbnail

Perlu di perhatikan kode yang akan saya bagikan ini sudah saya terapkan di beberapa jenis template blogger. Hasilnya memuaskan sesuai dengan keinginan dan saat ini pun blog saya menggunakan kode yang sama.

Sebagai info untuk melengkapi kode berikut saya menggunakan ukuran gambar 600 x 315 pada blog saya. Untuk memulai pemecahan masalah ini langkah yang harus kamu lakukan adalah.

1. Buka dashboar blog sobat pilih template lalu pilih edit HTML.

2. Kemudian di bagian bawah kode head pembuka hapus semua kode meta tag seo dan kode social media meta tag yang sudah ada pada template sobat. Lalu ganti dengan kode berikut ini. Untuk jaga-jaga jangan lupa templatenya di backup dulu.

<!-- [ Meta Tag SEO ] -->
<meta charset='utf-8'/>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='https://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<b:include data='blog' name='all-head-content'/>
<b:include data='blog' name='google-analytics'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/> - Rancax<data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex' name='robots'/>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<script type='application/ld+json'>{ &quot;@context&quot;: &quot;https://schema.org&quot;, &quot;@type&quot;: &quot;WebSite&quot;, &quot;url&quot;: &quot;<data:blog.homepageUrl/>&quot;, &quot;potentialAction&quot;: { &quot;@type&quot;: &quot;SearchAction&quot;, &quot;target&quot;: &quot;<data:blog.homepageUrl/>?q={search_term}&quot;, &quot;query-input&quot;: &quot;required name=search_term&quot; } }</script>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.pageTitle + &quot;, &quot; + data:blog.title' name='keywords'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Artikel Islam, pendidikan, remaja, blogger' name='keywords'/></b:if>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;https://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if></b:if>
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='Admin' name='Author'/>
<meta content='general' name='rating'/>
<meta content='id' name='geo.country'/>
<meta content='id_ID' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='en_US' property='og:locale:alternate'/>
<link href='https://plus.google.com/xxxx/posts' rel='publisher'/>
<link href='https://plus.google.com/xxxx/about' rel='author'/>
<link href='https://plus.google.com/xxxx' rel='me'/>
<meta content='xxxx' name='google-site-verification'/>
<meta content='xxxx' name='msvalidate.01'/>
<!-- [ Social Media Meta Tag ] -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='&quot;Silakan kunjungi &quot; + data:blog.pageTitle + &quot; Untuk membaca artike menarik.&quot;' property='og:description'/>
</b:if>
</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://1.bp.blogspot.com/-cSJ66Isxu20/WcAjcTrVEbI/AAAAAAAA8mE/ZMJMFBA7tRQB83FuZA2mOKbau2DeJNzlgCLcBGAs/s1600/1505764107066image.png' property='og:image'/>
</b:if>
</b:if>
<meta content='https://www.facebook.com/xxxx' property='article:author'/>
<meta content='https://www.facebook.com/xxxx' property='article:publisher'/>
<meta content='xxxx' property='fb:app_id'/>
<meta content='xxxx' property='fb:pages'/>
<meta content='xxxx' property='fb:admins'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='@xxxx' name='twitter:site'/>
<meta content='@xxxx' name='twitter:creator'/>

3. Untuk yang saya beri tanda xxxx sobat tinggal ganti dengan ID akun milik sobat. Selelah itu simpan template.

4. Kemudian untuk debug meta tag facebook silahkan menuju ke facebook debugger developer atau klik link ini. https://developers.facebook.com/tools/debug

5. Masukan url halaman blog sobat yang ingin di fix pada kolom yang di sediakan. Lalu pilih debug, jika terdapat peringatan error pilih kurangi. Lebih jelasnya lihat gambar di bawah.

Mengatasi Tumbnail Gambar Mengecil Ketika Share Artikel
Facebook debugger

6. Sampai di sini masalah untuk share artikel ke facebook seharusnya sudah selesai di atasi. Sedangkan untuk share artikel ke twitter dan G-plus otomatis sudah aman dalam kode meta tag di atas.

Demikian sobat cara mengatasi gambar mengecil ketika share artikel blog ke media sosial. Semoga pembahasan ini bisa bermanfaat untuk sobat yang lagi mengalami masalah ini. Saya menemukan kode fix ini lama loh sobat butuh perjuangan.

Mengedit kode template sedikit demi sedikit bolak balik debug bongkar pasang template blog. Alhamdulillah berhasil sesuai yang di inginkan. Contoh bisa di lihat pada blog ini coba aja di share. Trik ini hanya berlaku untuk layanan blogger sementara untuk wordpress bisa memakai plugin.

A man is known by the companion he keeps !

Buka Komentar

Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
EmoticonEmoticon