In General term, the featured image is images that are will be displayed only at our post summary. Its not visible by a visitor if he visits a post which has featured image, but we can call it to appear on a widget like a thumbnail, or a popular post with thumbnail by calling his data tag.

Blogger does not have any command or expression to let us set one of the multiple images found inside a post as a default one. Anyway, there is a trick. The concept is to place the image tag <img> on the topmost of the article, or before the first character we type in the post editor, and hide the image from displaying in a post.

<data:view.featuredImage/>

<b:eval expr='data:view.featuredImage'/>

This expression 'data:view.featuredImage' is statement to call the first image with any type (.gif, .jpg, .png, .webp, etc) and any source URL. Not like 'data:post.thumbnailUrl' which cannot call .gif image and cannot get image with The URL outside from Google Service.

How to set Featured Image?

To have featured image is simple, all we need is add css style with value display:none in <IMG> tag. If you still confuse, follow this:

1. In Post Editor, upload an image.
2. Add into the topmost part in the article or we say line 1.
3. Now pres on HTML button on the left top of editor.
4. On the HTML area, you will found code like this

<div class="separator" style="clear: both; text-align: center;">
    <a href="https://2.bp.blogspot.com/.../s1600/picb.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
       <img border="0" src="https://2.bp.blogspot.com/.../s320/picb.jpg" width="151" height="320" data-original-width="218" data-original-height="462" />
    </a>
</div>

5. Create new <IMG> tag right after </div> like below
   

    <img src='paste image url here' style='display:none'/>

6. Mark Orange highlighted text, right click and Copy to clipboard.
7. Replace text paste image url here by marking and Paste on it.
8. Delete all text from <div class="separator"... to </div>
9. Check back and result will be like this
   

    <img src='https://2.bp.blogspot.com/.../s1600/picb.jpg' style='display:none'/>

10. Congratulation we have one featured image.

Is Featured Image important?

Even with display:none our image will not be displayed but still loaded once we published it, there is who can see our hidden featured image.

Blogger have <b:include data='blog' name='all-head-content'/> inclusion which are used to add Meta Tag automatically. This tag is useful when someone share our blog article into facebook or other social media service.

The inclusion will check for featured image first, if its not there, they will check for first image found in our post. The problem occur when we have first image too small that the openGraph recommend, at this scenario featured image will come to play.

Share This

Facebook Twitter WhatsApp LINE Google Bookmark