Memperbaiki Thumbnails Pada Popular Posts
Sebenarnya postingan ini yaitu sanggahan untuk pernyataan saya sendiri pada postingan Trik Menaikan Nilai SEO Blog lalu. Pada postingan itu saya menyampaikan untuk menghindari pemakaian popular posts dengan memakai thumbnails alasannya yaitu akan mengurangi nilai SEO blog dikala dicek di Chkme.
Nah kebetulan siang tadi mas Andre Wedhos menanyakan cara menambahkan atribut tinggi dan lebar pada thumbnail popular post. Pas saya lihat script popular posts, saya jadi ingat bahwa thumbnails pada popular posts sanggup diperbaiki untuk menjaga nilai SEO blog.
Setelah beberapa kali saya cek di GTmetrik, ternyata thumbnails pada popular post tidak terdetek image dimensionsnya. Namun untuk tag alt dan titlenya masih terdetek di Chkme sebagai image dengan missing description dan title.
Secara defult, thumbnail posts blogger memiliki ukuran baku yaitu 72px X 72px. Begitu juga dengan thumbnail pada popular post memakai ukuran baku thumbnail posts blogger yaitu 72x72. Nah bagi Anda yang blognya memakai thumbnail pada popular posts-nya, sanggup memakai trik di bawah ini semoga tidak mengurangi nilai SEO blog Anda. Kalau dilihat, script popular posts akan tampak menyerupai di bawah ini.
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' 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-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</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'>
<img alt='' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</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>
</div>
</b:includable>
</b:widget> Perhatikan instruksi yang berwarna merah, itu yaitu link pada opular posts, silahkan tambahkan instruksi expr:title='data:post.title' dan instruksi yang berwarna biru yaitu thumbnail pada popular post, silahkan tambahkan juga tag titlenya menyerupai pada link tadi dan untuk tag alt-nya silahkan isikan contohnya dengan thumbnails. Sehingga penampakannya sehabis diperbaiki akan menyerupai di bawah ini.
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' 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' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<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"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank' expr:title='data:post.title'>
<img alt='thumbnails' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' expr:title='data:post.title'/>
</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/>
<!-- (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' expr:title='data:post.title'>
<img alt='thumbnails' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' expr:title='data:post.title'/>
</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>
</b:includable>
</b:widget> Nah kalau Anda ingin merubah ukuran thumbnail popular post, silahkan ganti instruksi biru di atas dengan instruksi di bawah ini.
<img alt='thumbnails' height='90' expr:src='data:post.thumbnail' width='90' expr:title='data:post.title'/> Perhatikan instruksi yang berwarna merah, itu akan menggantikan ukuran lebar dan tinggi thumbnail default blogger 72px X 72px menjadi 90px X 90px. Silahkan ganti pada angka-angkanya sesuai yang Anda kehendaki.
Nah demikian postingan cara memperbaiki thumbnail pada popular post semoga tidak mengurangi nilai SEO blog. Semoga sanggup dimengerti dan bermanfaat.
Sumber https://www.kompiajaib.com/
0 Response to "Memperbaiki Thumbnails Pada Popular Posts"
Posting Komentar