Setting Thumbnail Share Post Blogger

35 views
Setting Thumbnail Share Post Blogger – Masalah yang sering terjadi pada thumbnail share post yaitu hilangnya thumbnail image atau gambar postingan dikala laman situs web di share ke social media, hal ini disebabkan lantaran browser social media menyerupai twitter dan facebook tidak menemukan meta Open Graph didalam html situs web. Selain itu duduk perkara thumbnail share post yang mungkin banyak dikeluhkan oleh pengembang situs web yaitu tata letak (posisi) judul situs web yang dianggap kurang tepat. Judul situs yang terlalu panjang biasanya tidak terlihat anggun pada thumbnail share post lantaran sanggup menghilangkan fokus audiens yang seharus-nya berpusat pada judul konten (artikel).

Artikel ini akan membagikan sedikit tips mengenai cara mengatur tampilan (thumbnail share post) situs web dengan memanfaatkan meta open graph, ini merupakan trick yang paling gampang untuk mengatur “setting” thumbnail share post semoga lebih menarik dan lebih menonjol di social media (twitter, gplus dan facebook).

 Masalah yang sering terjadi pada thumbnail share post yaitu hilangnya thumbnail image at Setting Thumbnail Share Post Blogger
Setting Thumbnail Share Post Blogger

Yang harus dilakukan untuk menciptakan thumbnail share post yang menarik dan menonjol adalah, silahkan tambahkan Tag Meta dibawah ini ke dalam html situs web, Posisikan meta tag diantara tag <head> dan </head>, yang lebih sempurna letakkan di bawah isyarat epilog </title>.

<b:if cond=’data:blog.metaDescription != &quot;&quot;’>
<meta expr:content=’data:blog.metaDescription’ property=’og:description’/>
<meta expr:content=’data:blog.metaDescription’ name=’twitter:description’/>
<meta expr:content=’data:blog.metaDescription’ itemprop=’description’/>
</b:if>
<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=’218168578325095‘ property=’fb:app_id’/>
<meta content=’100002549773049‘ property=’fb:admins’/>
<!– Metadata Twitter –>
<meta content=’summary_large_image’ name=’twitter:card’/>
<meta expr:content=’data:blog.pageTitle’ name=’twitter:title’/>
<meta content=’@listrikbatam‘ name=’twitter:site’/>
<meta content=’@listrikbatam‘ name=’twitter:creator’/>
<meta content=’1200′ name=’twitter:image:width’/>
<meta content=’800′ name=’twitter:image:height’/>
<link href=’https://twitter.com/listrikbatam’ rel=’me’/>
<!– Google Authorship and Publisher Markup –>
<link href=’https://plus.google.com/+AbdulSomad88‘ rel=’author’/>
<link href=’https://plus.google.com/+AbdulSomad88‘ rel=’publisher’/>
<!– Schema.org markup for Google+ –>
<meta expr:content=’data:blog.pageTitle’ itemprop=’name’/>

Save template dan lihat hasilnya, dengan catatan “thumbnail share post” akan berubah sehabis cache situs web di browser hilang, biasanya 1 x 24 jam atau paling usang 2 hari sehabis menerapkan tag meta diatas.

Jika sebelumnya situs web sudah mempunyai meta open graph menyerupai yang tertera diatas maka tidak perlu mengganti semua-nya. Cukup lakukan sedikit perubahan saja pada tag meta menyerupai berikut ini untuk mengatur thumbnail share post yang lebih relevan.

Thumbnail Share Post (Twitter Social Media)

Cari dan temukan sebaris isyarat berikut didalam html situs web

<meta content=’summary’ name=’twitter:card’/>

Kemudian ganti isyarat tersebut dengan;

<meta content=’summary_large_image’ name=’twitter:card’/>

Selanjut-nya tamnahkan property image width dan height semoga gambar (thumbnail share post) pada social media twitter terlihat lebih besar dan menonjol.

<meta content=’1200′ name=’twitter:image:width’/>
<meta content=’800′ name=’twitter:image:height’/>

 Masalah yang sering terjadi pada thumbnail share post yaitu hilangnya thumbnail image at Setting Thumbnail Share Post Blogger
Thumbnail Share Post (Twitter Social Media)

Thumbnail Share Post (Facebook Social Media)

Cari dan temukan sebaris isyarat tag meta berikut didalam html situs web;

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

Kemudian tambahkan sempurna dibawahnya isyarat tag meta berikut;

<b:if cond=’data:blog.pageName’>
<meta expr:content=’data:blog.pageName’ property=’og:title’/>
</b:if>

Kode tag meta tersebut berfungsi untuk memerintahkan browser social media facebook hanya menampilkan judul halaman (judul artikel) dan menyembunyikan judul situs dari thumbnail share post.

 Masalah yang sering terjadi pada thumbnail share post yaitu hilangnya thumbnail image at Setting Thumbnail Share Post Blogger
Thumbnail Share Post (Facebook Social Media)

Silahkan share artikel ini ke beberapa jenis social media kau untuk melihat live demo thumbnail share post situs ini, pengaturan yang saya terapkan kurang lebih sama persir menyerupai yang telah dijelaskan, Jika kau sudah paham dan mengenal secara rinci wacana meta tag yang mengatur thumbnail share post, kau sanggup mengganti tag meta yang telah ada dengan tag meta yang saya bagikan diatas.

Catatan: Ganti id facebook, twitter dan username google plus yang telah ditandai dengan karakter tebal dengan id dan username anda sendiri.

Demikian saja “Setting Thumbnail Share Post Blogger“, semoga bermanfaat dan sanggup membantu anda dalam mengatur ukuran gambar dan judul yang ditampilkan pada thumbnail share post situs web anda. Jangan lupa subscribe kalau artikel ini benar-benar membantu.