Assalamu'alaikum Sobat... Selamat Malam menjelang pagi. Kali ini saya akan memberikan tutorial bagaimana
cara memberi title tags pada thumbnail dan link popularpost blogger.
Pada dasarnya thumbnail populartpost bawaan blogger tidak memiliki title tags, dan title tags ini berperan sangat penting untuk kualitas seo blog kita, jika kita hanya menggunakan thumbnail popularpost bawaan blogger ketika kita mengecek kualitas seo blog kita di
chkme.com akan terjadi missing title and description yang mengurangi kualitas Seo blog hampir 30 %, ketika di klik
show, maka akan terlihat link gambar yang tidak memiliki title dan deskripsi, biasanya adalah Thumbnail atau gambar
popularpost.
Lalu bagaimana agar Thumbnail Popularpost tersebut
tidak missing Descriptions and Titles?
1. Silakan Sobat masuk ke Edit template Blogger. Jangan Lupa Untuk menyimpan terlebih dahulu template sobat sebelumnya, untuk memback up template, agar ketika sobat salah dalam mengedit template masih punya cadangan template sebelumnya.
2. Setelah Masuk, Silakan Sobat Cari Widget Popularpostnya dengan meng klik
Lompat Ke Widget, Kemudian
Pilih Popularpost1. Perhatikan gambar berikut ini.
3. Setelah ketemu
widget Popularpost, silakan sobat klik expan, tanda Panah segi tiga berwarna hitam yg ada di sebelah kiri template lihat kotak merah gambar di bawah ini.
Maka sobat akan melihat code widget popularpost kurang lebih seperti ini
<b:widget id='PopularPosts1' locked='false' title='Popular Post' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<div class='play-button'><img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></div>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<div class='play-button'><img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></div>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
. Silakan Ganti Code yang seperti code di atas dengan code Berikut ini, kemudian simpan template.
<b:widget id='PopularPosts1' locked='false' mobile='yes' title='Popular Post' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h3><data:title/></h3></b:if>
<div class='widget-content popular-posts'>
<ul><b:loop values='data:posts' var='post'>
<li><b:if cond='data:showThumbnails == "false"'><b:if cond='data:showSnippets == "false"'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a><b:else/><div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div><div class='item-snippet'><data:post.snippet/></div> </b:if><b:else/><b:if cond='data:showSnippets == "false"'><div class='item-thumbnail-only'><b:if cond='data:post.thumbnail'><div class='item-thumbnail'><a expr:href='data:post.href' target='_blank'> <img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:title='data:post.title' expr:width='data:thumbnailSize'/></a></div></b:if><div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div></div> <div style='clear: both;'/> <b:else/><div class='item-content'><b:if cond='data:post.thumbnail'><div class='item-thumbnail'><a expr:href='data:post.href' target='_blank'><img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:title='data:post.title' expr:width='data:thumbnailSize'/></a></div></b:if><div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div><div class='item-snippet'><data:post.snippet/></div> </div><div style='clear: both;'/></b:if></b:if></li></b:loop>
</ul>
</div><div class='clear'/>
</b:includable>
</b:widget>
Kemudian buka blog sobat, arahkan mouse ke popularpost dan lihat, apakah thumbnail dan link popularpost sudah terdapat title
seperti gambar yang paling atas. Untuk lebih meyakinkan silakan cek seo blog sobat di
chkme.com untuk memastikannya nilai seo blog sobat.
Code Widget Popularpost ini saya dapatkan dari sebuah template yg memang sudah memiliki title tags pada popularpostnya, Selain Responsive, code tersebut juga sudah memberikan otomatis title tags pada link popularpostnya dan penghapusan code
<b:include name='quickedit'/> adalah untuk menghindari missing title. pada edit cepat atau
quickedit widget.
Demikian
Tutorial cara Memberi Title Tags Pada Thumbnail dan Link Popularpost blogger, Semoga bisa bermanfaat untuk teman-teman sekalian.
