Every blogger shares posts on Facebook so that he can get his posts viewed and shared by others. But when the post that has been shared on Facebook shows wrong thumbnail and description then the viewers who sees that post may confuse with the text there and image showing for that post. This happens mostly with the BlogSpot bloggers and blogs. And for WordPress and other platform users there are lots of plugins available to solve this problem. Here is a clear explanation to solve Facebook showing wrong thumbnail and description when shared link in Facebook problem.
How to Fix Facebook Thumbnail and Description Problem for blogger ?
In BlogSpot blogs this problem can be solved very easily with a small Html/Javescript code (Nothing but Open graph Meta tags). This code helps you show correct image of the post and Description when shared a link of your blog on FB.
What all you need to do is to copy the below code and paste it in your template.
Now copy the code and follow the instructions to paste it at right position in your template.
<b:if cond=’data:blog.postImageUrl’>
<meta expr:content=’"" + data:blog.postImageUrl’ property=’og:image’/>
<b:else/>
<meta content= ‘https://3.bp.blogspot.com/-1HZ5ZGFBcyk/VMPB8P1njqI/AAAAAAAAAYA/zdWDt4FDMnk/s1600/TechsText.jpg ’ property=’og:image’/>
</b:if>
Now go to Template → Edit Html
Next find for /head by pressing Ctr + F. Now just paste the code above /head.
Before pasting the code replace the default image URL (4th and 5th line in the code) with your Blogs Logo URL so that whenever there is no image in your post then your Blog logo is displayed as thumbnail when shared its link in FB.
That’s all you’re done with pasting the code. But now as soon as if you share your blog’s post link in Facebook it will not show the correct image of the post. The reason is that Facebook updates the thumbnail and descriptions of links every 24 hours. So you need to wait for 24 hours.
But actually not you can do that manually by going to Facebook Debugger. Go to Facebook debugger and paste the post link and press Debug and then “Fetch new scrap information” now your Post’s Facebook Scrap gets reloaded and you find your Post thumbnail and description when you share your post.
Recommended for You:
Which description does Facebook Post shows?
The text which is shown under Facebook thumbnail is the description which you write about your post while writing your post on the right sidebar under search description option in blogger. Sometimes you may NOT find that option in the right sidebar when you write a post. This is because you need to ON the blogs description first then that option will appear on the right sidebar when you write a Post.
How To ON the Blog’s Description?
First go to Blogger dashboard
→ Settings
→ Basic
→ Description and Click Edit
Now write the outline (Summery) of your blog and press Save Changes. Now “Search description” option starts showing on right side bar of your Post editor.
Whenever you write a Blog post don’t forget to write search description because that helps search engines to find your blog easily. Your search description should be compact covering most the keywords with good sense and limited to 150 characters. If you write more than 150 characters it will not be seen by the search engines or shown as dots (…).
In this way facebook thumbnail and Description Problem is solved. Still there are different methods and different Codes (Open Graph tags) which can solve this problem. But this is the easiest and simplest method to solve thumbnail issue for blogspot blogs.
If you find any problem ,don’t hesitate to comment. A proper solution is provided…
Nice tutorial…very informative post thanks for sharing..!!
My Facebook thumbnail has not the description option in blogger.
Can you help me?
Hi
You need to write description of you post in “search description” box. See the below image.
https://postimg.org/image/7vozvh5v5/
If you’re not clear even now then let me know.
Thank you…
Hi
I tried to add that code mentioned to my Template and fetch new scrape information from Facebook debugger but nothing really changes. The problem is that when I try to put link of some blog post in facebook, only the header image appears in preview but not any of the pictures in that certain blog post.
Do you have any ideas what I should do?
Hi
First of all there should be images in your post otherwise your logo or default image will appear.
If it’s fine then just wait for 1 or 2 days so that all posts get updated with latest thumbnail images or just use the url of the post and fetch in debugger. And I hope this would solve your problem.
Thank you
Basharath
Hi,
I’m trying to find an answer to my problem for a week, but nothing seems to work it out. Facebook is posting the right title and image, but not the text, only if the image is an old one (meening all my old post are shared this way as well). But if my post contains a new image (taken with my new motorolla smart phone) it will post, or no image at all, or the wrench image, still with the right title and without the text.
Have you got any clue?
Thank you for your great post!
Nathalie
i try and i copy the html in my blog but i took back this message
Σφάλμα κατά την ανάλυση του XML, γραμμή 4, στήλη 12: Open quote is expected for attribute “cond” associated with an element type “b:if”
can you help me
Hello
I could not understand the error message. Sorry, try to post it in English.
Thank you.
Regards
Basharath
I’m getting this error message when I use that code?
Error parsing XML, line 651, column 12: Open quote is expected for attribute “cond” associated with an element type “b:if”. Hide notification
Hello
There was some syntax error in the code, I’ve corrected it now. You can try it now it will work.
Thank you…
Hello, I still get the same error message as Janers. Is there anything I can do to fix it?
Hi
The problem is due improper single quotes:’:
So you just copy the code from the below link:
https://anotepad.com/notes/kexqhh
Hope this would solve the problem.
Hi, thanks for explaining this but i have a problem, when i share a post from my blog it looks okey, but when i share my website link (www.arabv8 com) it shows some posts description in place of blog descriptio, so it s not good for the SEO, please tell me if you have any idea about this?
Hi
For that you need to put ON the blog description by going to → Settings → Basic → Description and Click Edit and write about your blog.
That’s it. Wait for sometime your blog description gets updated when you share your link…
Best regards
Thanks Buddy I fixed it My Problm Error parsing XML, line 651, column 12: Open quote is expected for attribute “cond” associated with an element type “b:if”. Hide notification
thx a lot, the search description works for me
Glad it worked out.
Hi,
thanks for your post, it is very helpful! However, I still can’t see “Search Description” (it is not in the Post setting options) when writing a new post. I had my blog description set from the beginning. I have no idea why I still can’t write blog descriptions :(.
I would welcome any help 🙂
Thanks in advance.
Hi
You need to put ON the Description in the setting first, then only you can see it in every post. Just read out the article again and you’ll be able to find the solution.
Hope this would solve…
Klippyo video app affords many options on your palm.
Ꭲhіs website was… how ԁo I say it? Relevant!! Finally I’ve found something which helped me.
Cheers!