Fix Wrong Post Description & Thumbnail When Sharing

Fix Wrong Description and Image sharing posts to Facebook

Sharing on Facebook increases the page previews for your blog. Facebook is the giant network where everyone can be found. Therefore, you must be curious to post your blog posts on Facebook. When you share a post on Facebook, it will display a thumbnail picked from the post page along with a short description of the post. But in many cases, Facebook fails to identify the correct image and description that it should use. This leads to irrelevant images and description coming up on Facebook when you or your readers share the post. This is totally annoying, So for those who are trying to figure a way out of this, here is the solution.

Which Image and Description Does Facebook Pick from Your Post/Page

Facebook regularly scrapes your page and caches the data to their servers. They look for metadata information og (OpenGraph tags and others) on your post page. The metadata can explicitly specify the image and the description to use when the page is shared.If Facebook doesn’t find any metadata, then their algorithms will fetch some description and image from your Page. Facebook shows a wrong description or image when their Algorithms are not able to fetch the correct image and description from your Post Page.

Fixing the Wrong Image Problem.

You might have noticed that comment avatar, and other irrelevant images from your sidebars come up when you share the post on Facebook. The solution to this is to specify the image in the page metadata. We will be using open graph tags for the same.

Go to Template > Edit HTML and just below the <head> tag Paste the following code snippet.

<meta expr:content='data:blog.pageName + ", " + data:blog.pageTitle + ", " + data:blog.title' name='keywords'/> <b:if cond='data:blog.pageType != "error_page"'> <meta expr:content='data:blog.metaDescription' name='description'/> <b:if cond='data:blog.homepageUrl != data:blog.url'> </b:if></b:if> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:blog.postImageThumbnailUrl'> <link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/> </b:if></b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:blog.pageType == "static_page"'> <b:if cond='data:blog.url'> <meta expr:content='data:blog.url' property='og:url'/> </b:if> <meta expr:content='data:blog.title' property='og:site_name'/> <b:if cond='data:blog.pageName'> <meta expr:content='data:blog.pageName' property='og:title'/> </b:if> <meta content='website' property='og:type'/></b:if></b:if></b:if> <b:if cond='data:blog.postImageUrl'> <meta expr:content='"" + data:blog.postImageUrl' property='og:image'/> </b:if>

Once you’ve done with the changes, save your template then share the post and see the difference. For the rest of your posts, their descriptions will be updated the next time Facebook scrapes them. I hope this tutorial helps.