Why Facebook Share showing wrong image, thumbnail, description, title or even link of webpage

Now, you have your Facebook Share and Like button on your website/blog. Don't have? You may read my previous post "How to add Facebook LIKE button to Website and Blogger easily"

What happen next, you find out that the Share button is showing the wrong image, thumbnail, title, and other information.... It doesn't reflect exactly what your page/blog posted.

Don't get paranoid, this can be fix easily as well, by understanding how the Facebook Share grab your blog/web information.

In short, Facebook is using Open Graph meta tags which run during your page load but not display at screen. It consist few line of standard codes to insert on your web.

If you like readings and explore, I suggest you to check this Facebook Sharing Checklist. This explain all's.

I will provide you the basic/standard way and also focus on Blogger.

The Standard Way

1. Go refer Facebook Sharing Checklist. :)

2. You may check or view how your blog/webpage Share looks like at real time using debug tools from Facebook Developers. From there, it will give an analysis of what need to be corrected.


For Blogger

Step 1. Go To Blogger Dashboard > Template > Edit HTML 

Step 2. Click anywhere inside the code area and search - using CTRL + F keys - for this piece of code:

<Meta

Step 3: Go to the last line of  <Meta...........> , so you may continue add on the Open Graph meta tags for Facebook Share

Step 4: Just below the last row of <Meta....> code, paste this code:

<!-- Metadata Facebook Open Graph  -->
<b:if cond='data:blog.postImageThumbnailUrl'>
  <meta expr:content='data:blog.postImageUrl' property='og:image'/>
</b:if>
<meta content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='facebook Page link if you have' property='article:publisher'/>
<meta content='your facebook userid' property='fb:admins'/>
<!-- Open Graph Meta Tags END -->

Step 5: Above is the common meta tag that I recommended.

Line below will show your blog post thumbnail if they found it, else it will grab the best image found
<b:if cond='data:blog.postImageThumbnailUrl'>
  <meta expr:content='data:blog.postImageUrl' property='og:image'/>
</b:if>

This description is referring to your Blogger post Search Description. This is useful to short describing each of your post which in turn display in the Share description
<meta expr:content='data:blog.metaDescription' property='og:description'/>

If you are posting different of post type, suggest you take note of below by referring Facebook sharing checklist
<meta content='article' property='og:type'/>

Step 6. Save your template and you are done with this simple correction of your wrong Facebook Share details on your Blogger blog.

Step 7: Refresh and check again your post in real time using debug tools from Facebook Developers.