Thursday, 10 March 2016

How to fix Blogger Facebook image and description

This has annoyed me for months. When I share a blog post on Facebook the images within the post usually appear as a thumbnail beside the link. As of a few months ago I would share a post from my blog and get a random image from the site instead - sometimes the site logo, sometimes a social media icon that appears somewhere on the blog. And the description underneath the blog post title would be a random piece of info from the site such as the privacy statement.

So I went in search of a fix ...

Image Issues

I found several posts on the internet. This is the code which worked for me and I'll provide some step by step instructions below.

<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta content='http://www.yourdefaultimage.jpg' property='og:image'/>

Copy and paste the code above into Notepad and replace http://www.yourdefaultimage.jpg with a URL to an image that you would be happy displaying next to your blog link on Facebook if you HAVEN'T included any images in your post. For example, it might be your company logo, or a generic image. If you have your logo on your website simply right click and copy the image address, and paste it into the code above.

Next you need to add the code to your template. NOTE, always back up your blog template before making any changes, just in case anything goes wrong.

Go to your Blogger blog>Template>Edit HTML.

Hit Command>F and search for /head.

Next, copy and paste from Notepad the code from above having changed the URL to an image you would like as a default, and paste it directly above the

Hit Save template

This will work for all future posts. You can force old posts to work by using Facebook Debugger but I've found this to be temperamental and doesn't always work for old posts. And it can take a little bit of time for the changes to filter through.

Note that images within a blog post generally need to be over 200 pixels in size to be picked up by Facebook.

Description Issues

Now onto the problem of random descriptions appearing underneath your Facebook blog post links.

Go to Settings > Search preferences > Description. Select 'Yes' and then enter a default description you would be happy to have under your posts. This description will appear under all posts where you don't follow the next step. 

If you want a specific description, go to your individual blog post and click Search Description. This is a really Google friendly place to enter a description packed with keywords. This description, if completed, will appear as the description under your posts on Facebook. 

Happy blogging!


  1. This glitch with Facebook has been bugging me for ages! Thank you for the clear description of how to fix it.

    1. You're welcome, Dan. I hope it works for you. It has worked for all my Blogger blogs.

  2. Wow, What a Excellent post. I really found this to much informatics. It is what i was searching for.I would like to suggest you that please keep sharing such type of info.Thanks compress jpeg to 50kb

  3. The next time I read a blog, Hopefully it does not fail me as much as this one. I mean, Yes, it was my choice to read, however I genuinely thought you would probably have something helpful to say. All I hear is a bunch of whining about something you can fix if you weren't too busy searching for attention.
    Samsung battery replacement

    oppo battery replacement

    oneplus battery replacement

    LG battery replacement

    realme battery replacement

    mobile battery replacement

  4. You should open up several programs, like Adobe Photoshop or Illustrator and see how the overall layout of the software fits into the screen, how large the editing space really is and if the edited image is sharp enough for you to work with. web developer nuneaton