June 19, 2026

Featured Image

How to choose a specific Open Graph image in Blogger posts

|
To choose a specific Open Graph image in Blogger, you need to bypass the platform's default settings. By default, Blogger automatically picks the very first image inside your post to show on social media. This is annoying if your first image is small or if it does not look good in a Facebook link preview.

If your main goal is strictly to fix how your link looks when shared on social sites, you have two simple choices. 

You can use a quick <noscript> code trick inside your post, or change a setting in your blog template code.


Homepage thumbnails vs. social media previews

Before we start, it is important to know what you want to change. 

If you only want to change the small preview picture on your own blog's main page, you should read my guide on how to set specific post thumbnail for Blogger posts using a hidden image.

However, that hidden homepage trick uses a display:none code that social media sites like Facebook and X often ignore. 

To fix the link preview in social media apps, use one of the two methods below.

How to choose a specific Open Graph image in Blogger posts

Method 1: The hidden <noscript> tag trick

This method lets you put your favorite social media image at the very top of your post. 

Blogger will think it is the first image and use it for social media, but your human readers will never see it.

  1. Open your post editor and go to Compose View.
  2. Put your cursor at the absolute top of the page and upload your special sharing image.
  3. Switch your editor to HTML View.
  4. Find the long code for the image you just added at the top.
  5. Type <noscript> right before the image code, and type </noscript> right after it.
  6. Switch back to Compose View (the image will disappear) and click save or publish.

Method 2: Change your blog theme settings

If you want an automatic fix for all future posts, you can add a small snippet to your blog's HTML theme layout.

This is what you do:

  1. Go to your Blogger Dashboard, click Theme.
  2. Click the arrow next to Customize, and select Edit HTML
  3. Use the search tool to find the </head> tag. 
  4. Paste this exact code right above it:

<b:if cond='data:view.isPost'> <meta expr:content='data:blog.postImageUrl' property='og:image'/> </b:if>

This code tells social networks to always look for the official main post image instead of guessing which one to grab.


Refresh Blogger social media broken links

Social networks save old image data in their memory cache. 

If you change your image and it still shows the old one on Facebook, you need to force a reset. 

If you run into issues, you can follow this tutorial to fix missing og:image tags for Facebook and X in Blogger

Finally, paste your link into the Facebook Sharing Debugger tool and click "Scrape Again" to update your image immediately.

This is a quick tip on how to choose a specific Open Graph image in Blogger posts.