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'/>
<b:else/>
<meta content='http://www.yourdefaultimage.jpg' property='og:image'/>
</b:if>

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

tag.

Hit Save template. 

This will work for all future posts. You can force old posts to work by using Facebook Debugger https://developers.facebook.com/tools/debug/og/object/ 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!