Actually the popular post widget is very commonly used by most blogs, but here I will share specific tips for adding a title tag to the popular post thumbnail image so that the blog becomes more SEO. Namely adding the title and description of the image automatically according to the article title. In addition to supporting on-page SEO, this will also increase the blog SEO score in CHKME and overcome the problem of missing title and description in images. Please also see How to Increase the CHKME Blog Score to 100%.
The picture above shows that when a popular post image is highlighted with the mouse cursor, the title and alt tag info for the image will appear.
How to Add Title Tag of Popular Post Image
1. Login to your Blogger account.
2. Select menu TEMPLATE> Edit Html.
3. Look for the code PopularPosts1 or PopularPosts2 (Use Ctrl + F )
4. Then the HTML code for the PopularPosts widget that appears will look like this.
<b: widget id = 'PopularPosts1' locked = 'false' title = 'Popular Posts' type = 'PopularPosts'>
.................................................. .....
</ b: widget>
5. Please delete the HTML code and replace it with the code that has been installed with the image alt tag script below.
<b: widget id = 'PopularPosts2' locked = 'false' mobile = 'yes' title = 'Popular Entries' 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 == & quot; false & quot;'> <b: if cond = 'data: showSnippets == & quot; false & quot;'> <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 == & quot; false & quot;'> <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>
6. Then click 'Save' Template. And done
Now you can see the alt tag of image info in your popular post widget by hovering your mouse cursor over it.
So much information about How to Add a Popular Post Image Title Tag, hopefully this is useful. Thanks.