As a Blogger, after publishing a quality and unique post on your Blog, the next thing you should do is share it on as many Social Networks as possible and also add a Share button so that your readers will be able to share the post with their friends and family. But, you might be facing a problem which I've also been facing all this while, the problem is - 'Whenever I share ANY of my post on Social Networks, most especially on Facebook. The default thumbnail or image in the post will not be displayed, instead, the Blog's header image or logo will be displayed.'
This problem is a very critical one because your potential readers might be pissed off seeing your Blog's header image or logo on every article you share, instead of seeing a unique image corresponding to the shared post on them thereby you are directly or indirectly losing potential visitors to your Blog. Also, those that see your shared posts on Social media may not be convinced enough to click on your Post, and you know what that means.
At this point, I won't refer to this as a problem again because I was able to fix mine this afternoon (as you can see in the picture below) and you should be able to fix this error using this method also. I hope it works for you! Now, sit back, relax and follow the procedures. You can do it yourself!
Procedures to Fix Facebook Wrong Thumbnail Error
1. Log in to your Blogger Dashboard and Click on 'Template' then 'Edit HTML'. You should have a page just like the one in the screenshot below.
2. Now, click your mouse in the Template codes and press "Ctrl + F" on your Keyboard to search.
3. Search for <head>, making use of the "Ctrl + F" Search box. Then look for a group of code that looks like the one below -
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
4. When you come across the code in step 3 above, remove it completely. Then paste the code in step 4 (below) where you removed the one in step 3 or better still, just paste the code below directly under the <head> tag -
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='article' property='og:type'/>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' property='og:image'/>
<meta content='1200' property='og:image:width'/>
<meta content='630' property='og:image:height'/>
<b:else/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta content='1200' property='og:image:width'/>
<meta content='630' property='og:image:height'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5zdbqC_OnnAv7ZOfsQWsDEKksXiGCaX33L8Px_ZoABbnZNef9lbhBX8ekdlPBZQNPRmODOPtKBfZPKfV00GfMeTaLURxcZefoSwvBqmXgdkD5LxuBZlyIpuEKZUzZZCY41f4nicTMu0qv/s1600/10373_StevenBergy_Inc_logo_02.jpg' property='og:image'/>
</b:if>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='og:description'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='article' property='og:type'/>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' property='og:image'/>
<meta content='1200' property='og:image:width'/>
<meta content='630' property='og:image:height'/>
<b:else/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta content='1200' property='og:image:width'/>
<meta content='630' property='og:image:height'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5zdbqC_OnnAv7ZOfsQWsDEKksXiGCaX33L8Px_ZoABbnZNef9lbhBX8ekdlPBZQNPRmODOPtKBfZPKfV00GfMeTaLURxcZefoSwvBqmXgdkD5LxuBZlyIpuEKZUzZZCY41f4nicTMu0qv/s1600/10373_StevenBergy_Inc_logo_02.jpg' property='og:image'/>
</b:if>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='og:description'/>
</b:if>
5. Note that you have to replace the code highlighted in red (above) with your Blog's Logo URL or Header Image URL. By doing so, your Blog's logo or header image will be displayed as thumbnail whenever you are sharing a post in which there is no image inside. Now, click on Save Template! Those changes will be saved.
6. You are almost done. Now, note that it usually takes Facebook up to 24 hours to enable the changes you just made but to confirm if it's working by yourself. Navigate to Facebook Debugger and paste a link to one of your Blog Posts there (e.g.. http://www.stevenbergy.com.ng/2016/01/the-easiest-way-to-root-infinix-hot.html) and click on Debug.
7. You'll see so many errors listed on this page, if you can fix anyone of the errors yourself, fix it later. If not, never mind. Just leave it like that. Now, scroll to the end of the page, you'll see something like - 'when shared, this is what will be included'. That's how your link will look like when shared on Facebook.
8. Now, scroll back to the uppermost part of the page and click on 'Fetch new scrape information'. The page will reload and by now, if you scroll down to the end of the page where you have 'when shared, this is what will be included', you'll see the unique thumbnail for blog post there instead of the Blog logo or header image you are seeing before.
9. Now, you can start sharing your link on Facebook. Facebook will automatically detect the unique thumbnail to each post you share on Facebook by itself.
10. If you were able to make it to step 9 successfully without any problem, and you got the error fixed then note that the error has been fixed on every other Social Networks too. Congratulations! You've done what a novice cannot do. :-)
This is how I fixed the error on StevenBergy.Com.Ng and by now, if you share any of our posts on Facebook or other Social Networks , you'll see that the unique thumbnail or image to that post will be displayed together with the post. After fixing this, dlvr.it post syndication also started sharing my post automatically with each post's thumbnail on Facebook. So if you are also having issues with your dlvr.it syndication before, note that if the fix in this post works for you then your dlvr.it thumbnails selection will also work properly by now.
If you face any challenge(s) or have any issue(s) during the process of making your Blog Posts thumbnails show on Facebook as discussed in this post. Kindly drop your comments through the comment box, I'll be glad to help. Sharing is caring, so if this comprehensive post has been helpful to you then please don't forget to share it with others. Blessings!!!
No comments:
Post a Comment
Drop Your Contributions, Opinions and Suggestions Here !
Want to be notified when I reply your comment ? Then tick the "Notify Me" box.
Cheers !!!