<head> section. This ensures that Facebook and X can correctly detect your post image, title, and description when your links are shared.This simple, step-by-step code guide for beginners to fix blank link previews on social media is based on my own experience.
I tried to share my Blogger posts on Facebook and X (formerly Twitter), hoping to get more readers to this blog.
But each time I did that, I only saw blank boxes instead of my post images.
In other words, Facebook and X do not display thumbnails of my blog posts.
After tinkering and asking around a few forums, I resolved the missing Open Graph (og:image) thumbnails.
For the uninitiated, Open Graph is a collection of small code snippets (called meta tags) that tell social networks and messaging apps exactly how to show your link when it gets shared.
It makes sure your post displays a nice title, description, and preview picture so it looks clean and professional, instead of picking a random, broken image from your page
This guide shows you how to permanently fix the issue by adding Open Graph (OG) tags directly into your Blogger HTML template.
Why images disappear on Facebook and X
When you share a link, Facebook and X bots crawl your website looking for Open Graph meta tags.
These hidden tags tell social media platforms which title, description, and image should appear in the preview.
Many older or custom Blogger templates either lack these tags or use outdated code that social media platforms no longer recognize.
Without a clear og:image tag, Facebook and X try to guess which image to use.
If no suitable image is found, the preview appears blank.
How to fix Open Graph image thumbnails in Blogger
The following code automatically detects whether a visitor is viewing a blog post or your homepage.
It then assigns the correct title, URL, description, and image for social sharing.
Paste this code directly into your Blogger template.
Paste this code directly into your Blogger template.
<!-- Open Graph Meta Tags for Facebook and X Start -->
<b:if cond='data:view.isPost'>
<!-- If the page is a post, use the post title and post URL -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
<!-- If it is the homepage, use the blog title and homepage URL -->
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
<meta content='website' property='og:type'/>
<meta expr:content='data:blog.title' name='twitter:title'/>
</b:if>
<!-- Blog Name and Description -->
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<!-- Dynamic Image Fetching for Thumbnails -->
<b:if cond='data:view.isPost'>
<b:if cond='data:blog.postImageUrl'>
<!-- Use the featured post image if it exists -->
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<!-- Backup image if the post has no images -->
<meta content='YOUR_DEFAULT_IMAGE_URL_HERE' property='og:image'/>
<meta content='YOUR_DEFAULT_IMAGE_URL_HERE' name='twitter:image'/>
</b:if>
<b:else/>
<!-- Homepage backup image -->
<meta content='YOUR_DEFAULT_IMAGE_URL_HERE' property='og:image'/>
<meta content='YOUR_DEFAULT_IMAGE_URL_HERE' name='twitter:image'/>
</b:if>
<!-- X (Twitter) Card Settings -->
<meta content='summary_large_image' name='twitter:card'/>
<!-- Open Graph Meta Tags End -->Important customization step
Before saving the code, replace all instances of YOUR_DEFAULT_IMAGE_URL_HERE with a real image URL.
This should be a direct link to your blog logo, banner, or fallback image.
This image acts as a backup whenever a post does not contain its own featured image.
How to install the og:image code in Blogger
1. Back up your Blogger Template
In your Blogger dashboard:
- Go to Theme
- Click the small dropdown arrow beside the Customize button
- Select Backup
- Download your current template file
This allows you to restore your blog, should you accidentally mess up the HTML code.
2. Open the HTML editor
- Return to the same dropdown menu
- Select Edit HTML
You will now see your Blogger template code.
3. Find the <head> tag
- Click inside the code editor
- Press
Ctrl + Fon Windows orCmd + Fon Mac - Search for
<head>
The editor will highlight the opening head tag.
4. Paste the Open Graph code
Paste the entire code snippet directly below the <head> tag.
5. Add your real image URL
Replace every occurrence of YOUR_DEFAULT_IMAGE_URL_HERE with your own fallback image URL.
6. Save the changes
Click the save icon in the top-right corner and wait for Blogger to confirm the update.
How to refresh Facebook and X link previews
Facebook and X store cached versions of your pages. Even after fixing your code, old previews may still appear until you refresh the cache.
Facebook Sharing Debugger
Open the Facebook Sharing Debugger web tool and paste your blog post URL.
Click Debug. If Facebook still shows outdated information, click Scrape Again to force Facebook to reload your new Open Graph tags.
Refreshing X (Twitter) Cache
Because X processes previews dynamically within its post box, you can force its crawler to look for your new code by adding a query string like ?update=1 to the end of your link when pasting it into a new draft post.
This unique URL trick forces X to bypass its old cache and fetch a fresh version of the page.
Troubleshooting missing og:image issues
- Image size: Facebook recommends images that are at least 1200 × 630 pixels. Small or tiny square clip-art files may be completely ignored by sharing bots.
- Use HTTPS images: Always use secure
https://image URLs. Modern social platforms block old, non-secure image paths. - Check blog privacy settings: If your Blogger site is set to private or hidden from search engines in your dashboard settings, Facebook and X bots cannot access the code to render a preview card.
Conclusion: fix missing Open Graph (og:image) thumbnails on Facebook & X
After adding proper Open Graph and Twitter Card tags, your Blogger posts will display professional image previews across Facebook and X.
This improves visibility, click-through rates, and overall social sharing performance.
👉 Check out: Blogger favicon optimization and scaling guide explained