How to Show Blogger Post Thumbnail on Facebook and Other Social Media Networks
When you share a Blogger post on Facebook, WhatsApp, X, LinkedIn or other social media platforms, sometimes the post appears only as a link without the featured image or thumbnail.
A proper social media preview normally contains three important elements:
Post title
Post description
Post thumbnail/image
For a news or information website such as Sano Notice, showing the correct thumbnail can make social media posts much more attractive and can encourage visitors to click the shared link.
This guide explains how to make your Blogger post thumbnail appear correctly on Facebook and other social media networks.
Copy the below Code and Paste in under the <head> section of blogger templete
<!-- Facebook Open Graph Tags -->
<b:if cond='data:view.isPost'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta content='article' property='og:type'/>
<meta content='Sano Notice' property='og:site_name'/>
</b:if>
<!-- Twitter Card -->
<b:if cond='data:view.isPost'>
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
</b:if>
The most important tag for the thumbnail is:
<meta property="og:image" content="IMAGE-URL">
If your Blogger theme does not provide a suitable og:image, Facebook may show only the URL, a different image, or no thumbnail at all.
Step 1: Add a Good Thumbnail to Your Blogger Post
First, create an attractive featured image for your article.
For example, if your article is about a bank motorcycle auction, your thumbnail could contain:
KAMANA SEWA BIKAS BANK
MOTORCYCLE AUCTION
3 MOTORCYCLES
THROUGH SEALED BIDS
Upload this image to your Blogger post.
Blogger officially supports uploading images directly into posts.
Recommended Thumbnail Size
For social media sharing, a wide image generally works better than a very tall image.
A practical format is:
1200 × 630 pixels
This gives your thumbnail a suitable landscape shape for many social-media previews.
Step 2: Put the Main Image Near the Beginning of the Post
It is a good practice to place your main article image near the beginning of the Blogger post.
For example:
Post Title
Featured Image
Introduction
Article content
This makes it easier for themes or scripts that use the first post image as the social preview image to identify the correct image.
Step 3: Add Alt Text to Your Blogger Image
Blogger also allows you to add Alt Text and an image title.
After uploading your image:
Click the image inside the Blogger editor.
Click the image editing option.
Add a relevant Alt Text.
Add a short Title.
Click Update.
Google's Blogger documentation recommends adding descriptions and alt text to images to improve accessibility and make images more understandable to search engines.
For example:
Alt Text:Kamana Sewa Bikas Bank motorcycle auction through sealed bids
Title:Kamana Sewa Bikas Bank Motorcycle Auction
Step 4: Add Open Graph Tags to Your Blogger Theme
This is the most important step if Facebook is showing only the link.
Go to:
Blogger → Theme → Edit HTML
Find:
<head>
or the beginning of your existing <head> section.
Add the appropriate Open Graph metadata inside the <head> section.
A basic example is:
<meta property='og:type' content='article'/>
<meta property='og:title' content='Your Post Title'/>
<meta property='og:description' content='Your Post Description'/>
<meta property='og:url' content='Your Post URL'/>
<meta property='og:image' content='Your Image URL'/>
However, for Blogger, it is better to use Blogger's template data tags so that the information can change automatically for each post.
Blogger templates provide data such as the current page URL and post information that can be used in the template.
Important
Do not simply copy a fixed image URL into the template if you publish many different articles.
For a news website like Sano Notice, the system should ideally use the appropriate image for each individual post.
Step 5: Use a Proper Post Description
Your social media preview also needs a good description.
For example:
Kamana Sewa Bikas Bank has announced the auction of three motorcycles through sealed bids. Check the auction details, bidding process and official notice.
Keep the description short and directly related to the article.
Blogger also provides a Search Description option that can be enabled from the blog settings.
Step 6: Make Sure Your Blog Is Visible to Search Engines
Go to:
Blogger → Settings → Privacy
Make sure:
Visible to search engines = ON
Google's Blogger documentation recommends enabling this setting if you want search engines to discover your blog.
This is primarily an SEO setting, but it is also important to ensure your publicly shared content can be crawled normally.
Step 7: Facebook May Still Show the Old Thumbnail
Even after fixing your Blogger template, Facebook may continue showing the old preview.
This happens because social platforms can cache information from a URL.
For example, you may have originally shared:
https://www.example.com/your-post.html
Facebook may have stored the old title, description and image.
After changing your Blogger theme or thumbnail, Facebook may not immediately fetch the new information.
Therefore, when troubleshooting, use Facebook's sharing/debugging tools to refresh the URL preview.
Step 8: Test Your Blogger Post Before Sharing
After making the changes, open your published Blogger post in a browser.
Check:
Is the thumbnail visible?
Is the image publicly accessible?
Does the image open correctly?
Does the post have a title?
Does the post have a description?
Is the page accessible without login?
Then test the URL on the relevant social-media preview/debugging tool.
What About WhatsApp, X and LinkedIn?
The same basic principle applies to many social platforms.
Your webpage provides metadata such as:
Title → og:title
Description → og:description
Image → og:image
URL → og:url
Different platforms may process these tags somewhat differently, so a preview that works perfectly on Facebook may sometimes appear differently elsewhere.
Common Reasons Thumbnail Does Not Appear
1. og:image is missing
If your theme doesn't provide an appropriate og:image, Facebook may not know which image to use.
2. Wrong image URL
If the image URL is broken or inaccessible, the platform cannot download it.
3. Facebook cache
Facebook may still have the old version of your page stored.
4. Image is too small
Very small images may not produce a good social preview.
5. Image is not publicly accessible
Social-media crawlers need to be able to access the image without logging into your Blogger account.
6. Theme conflicts
Some third-party Blogger templates already contain Open Graph tags. Adding another conflicting set can result in duplicate or incorrect metadata.
7. Multiple og:image tags
If a page contains several og:image tags, a social platform may select an image you did not expect.
Best Thumbnail Practices for Blogger
For Sano Notice, follow these practices for every news post:
Use a 1200 × 630 px featured image.
Upload the image directly to Blogger.
Put the main image near the beginning of the article.
Add descriptive Alt Text.
Use a clear and attractive headline on the thumbnail.
Keep important text away from the extreme edges.
Use
og:imagein your Blogger theme.Use
og:titlefor the article title.Use
og:descriptionfor the article summary.Test the URL after publishing.
Refresh the social-media cache after changing the image.
Avoid adding multiple conflicting Open Graph tags.
Example for Sano Notice
Suppose your article title is:
Kamana Sewa Bikas Bank Announces Auction of Three Motorcycles
Your social preview should ideally contain:
Title:
Kamana Sewa Bikas Bank Announces Auction of Three Motorcycles
Description:
Kamana Sewa Bikas Bank has announced the auction of three motorcycles through sealed bids. Check the auction details and bidding process.
Image:
Your 1200 × 630 motorcycle auction thumbnail
URL:
Your published Blogger post URL
When someone shares the article, Facebook and other supported platforms can then use this information to create a richer link preview.
Final Words
If your Blogger post is appearing on Facebook with only the link and no thumbnail, the problem is usually related to the page's social-media metadata, image accessibility, or cached preview.
Adding a proper thumbnail, using the correct Open Graph (og:) tags, providing a good description and refreshing the social-media cache can significantly improve the appearance of shared Blogger posts.
For a news website like Sano Notice, it is worth configuring the Blogger theme once so that every new article can automatically provide the correct title, description and thumbnail when shared on social media.
SEO Details
SEO Title: How to Show Blogger Post Thumbnail on Facebook and Social Media
Meta Description: Learn how to show Blogger post thumbnails on Facebook, WhatsApp, X and other social media networks using Open Graph tags and proper Blogger image settings.
Focus Keyword: Blogger post thumbnail on Facebook
Secondary Keywords: Blogger Facebook thumbnail, Blogger Open Graph tags, Blogger social media preview, Blogger featured image, Facebook link thumbnail, Blogger og:image
Labels: Blogger, Facebook, SEO, Social Media, Blogging Tips, Open Graph, Sano Notice
<!-- Facebook Open Graph Tags -->
<b:if cond='data:view.isPost'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta content='article' property='og:type'/>
<meta content='Sano Notice' property='og:site_name'/>
</b:if>
<!-- Twitter Card -->
<b:if cond='data:view.isPost'>
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
</b:if>
.jpg)
0 Comments