How to Set a Link Preview Image for a Blogger Blog

Updated 14 November 2026 · Standard formula, shown below

When you share a Blogger post on WhatsApp, Facebook, or Twitter, the link preview shows a thumbnail image. By default, Blogger may pick the wrong image or none at all. This guide shows you how to set a specific link preview image for any Blogger blog post, so your shared links look clean and professional.

What You’ll Need

Access to your Blogger dashboard (the blog you want to edit).
An image file (JPG, PNG, or GIF) that you want to use as the preview. Ideally, it should be at least 1200×630 pixels for best results on social media.
Optional: a free image hosting service like Postimages or Imgur if you don’t want to upload directly to Blogger.

Step-by-Step

Upload the image to Blogger (or get its URL).
Go to your Blogger dashboard → Posts → select the post you want to edit. In the post editor, click the image icon in the toolbar to upload your image. After uploading, right-click the image in the editor and select “Copy image address” (or “Copy link address”) to get the direct URL. Alternatively, upload to an external host and copy the direct image link (ending in .jpg, .png, etc.).
Switch to HTML view.
In the post editor, click the pencil icon and choose “HTML view” (not “Compose view”). This lets you add the meta tag directly.
Add the og:image meta tag.
At the very top of the HTML, before any other content, paste the following line:
<meta property='og:image' content='YOUR_IMAGE_URL'/>
Replace YOUR_IMAGE_URL with the actual URL you copied in step 1. Make sure the URL is inside single quotes.
Add a fallback og:image (optional).
Some platforms also look for og:image:width and og:image:height. You can add these two lines after the main one:
<meta property='og:image:width' content='1200'/>
<meta property='og:image:height' content='630'/>
Use the actual pixel dimensions of your image.
Update the post.
Click “Update” or “Publish” to save the changes. The meta tag is now part of that post’s HTML.
Test the preview.
Use a debugging tool like the Facebook Sharing Debugger or Twitter Card Validator. Paste your post URL, and it will fetch the new meta tag. If it shows an old image, click “Scrape Again” or “Refresh” to force a re-fetch.

Common Mistakes

Using a relative URL like /image.jpg instead of a full https://... URL. Always use the complete absolute URL.
Placing the meta tag in the wrong spot. It must be inside the <head> section, but Blogger’s post editor only lets you edit the body. That’s why we add it at the top of the post HTML — it still works because Blogger renders the post content inside the page body, and social media scrapers read the entire page.
Forgetting to update the post after adding the tag. If you don’t click Update, the change isn’t saved.
Using an image that’s too small. Most platforms ignore images under 200×200 pixels. Use at least 600×315, but 1200×630 is recommended.
Using a dynamic image URL that changes (like a resized version). Stick to the original upload URL.

Tips

Use a consistent image size across all posts for a uniform look in feeds.
If you want a default image for all posts (when a post doesn’t have its own), edit your theme’s HTML and add the og:image tag in the <head> section. But note that this will be overridden by the post-level tag.
For Blogger’s own sharing buttons, the og:image tag also works, but you may need to clear your browser cache to see the update.
Always test after publishing — social platforms cache previews, so it may take a few hours or a manual scrape to update.

Troubleshooting

Preview still shows the old image.
This is almost always due to caching. Use the Facebook Sharing Debugger (developers.facebook.com/tools/debug) and click “Scrape Again”. For Twitter, use the Card Validator (cards-dev.twitter.com/validator) and click “Preview card”. If it still shows old, wait a few hours and try again.

No image appears at all.
Check that the image URL is publicly accessible (open it in an incognito window). Also ensure the meta tag is exactly as written — a missing space or wrong quote can break it. Copy the tag from this guide and only replace the URL.

WhatsApp shows a blank preview.
WhatsApp is more aggressive with caching. Try sending the link to a chat, then delete and resend after a few minutes. If it still fails, use a URL shortener like Bit.ly to create a fresh link that forces a new scrape.

The image is cropped or distorted.
Social platforms crop previews to fit their aspect ratio. Use an image with a 1.91:1 ratio (1200×630) to minimize cropping. If it’s still cropped, it’s normal — platforms like Facebook may show a square version in some contexts.

Frequently Asked Questions

Does this work on all social media platforms?

Yes, the og:image meta tag is the standard used by Facebook, WhatsApp, LinkedIn, and most others. Twitter uses its own twitter:image tag, but it falls back to og:image if not present.

Can I set a different image for each post?

Yes, by adding the og:image tag to each post individually as described above. Each post will have its own preview image.

What if I don’t want to upload an image to Blogger?

You can use any image URL from any hosting service, as long as it’s a direct link to the image file (not a page containing the image).

Will this affect my blog’s SEO?

No, the og:image tag is for social sharing only and does not affect search engine rankings. It may slightly improve click-through rates from social media.

How do I set a default image for my whole blog?

Go to Theme → Edit HTML, find the <head> section, and add the og:image tag there. This will be used for any post that doesn’t have its own og:image tag.

Why does my preview show a different image than the one I set?

This can happen if the platform has cached an older version, or if your post contains other images that the scraper picks up first. Adding the og:image tag should override that, but you may need to clear the cache as described in Troubleshooting.

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.