If you are a Blogger user, you have probably notice that sometimes a wrong image is being used as a thumbnail in Facebook post when you or your readers share your website content. For some reason Facebook pulls a picture unrelated to the shared post. The image seems to come from anywhere on the blog but you have to know that the choice of the posts image on Facebook wasn’t random. Facebook simply took the first image from the Open Graph data that was at least 600 pixel wide.
Facebook states here the following:
''The URL of an image which is used in stories published about this object. We suggest that you give us an image of at least 600×315 pixels. However, bigger is better, so if you have a 1200×630 or larger image that you can use, please give it to us. Also, we recommend that you keep images as close to a 1.91:1 aspect ratio as possible to avoid cropping''
To solve the problem once and for all we have to:
1 - Make sure that the first photo in each post on your blog is 600 x 315 px or larger.
2 - Specify the image in the page meta data. Go to your HTML editor and add this meta tag in the head section of your template (above: </head> or right under: <b:include data='blog' name='all-head-content'/> line):
<b:if cond='data:blog.postImageUrl'>Note: This image will appear when you share a post that has no image or if Facebook failed to identify the correct image to your the post.
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='Put your desired image URL here' property='og:image'/>
</b:if>
3 - For existing posts, you will have to wait 24 hours for Facebook to refresh their cache and display the right thumbnails. If you don't wish to wait, go to the Debugger Tools, enter your post URL then click Debug button
Good to know: It is preferable to use images with JPG or JPEG extensions.
If you found this post useful, then do share it with your friends :)
