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 meta data information(OpenGraph tags and others)
in your post page. The meta data can explicitly specify the image and
the description to use when the page is shared.If Facebook doesn’t find
any meta data, 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.
We will solve both of these issues using two different techniques.
1. Fixing the Wrong Image Problem.
You might have noticed that comment avatars, 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 meta data. We
will be using open graph tags for the same.
Go to
Template >
Edit HTML and just above
</head>
Paste the following code snippet.
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='"" + data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnQNuJd_EuwxT471q_Z8FHdiZC7ADP_Z6oJFa2tKtxSEZ0k-mr9ew1zsS3JuZc-f6W4Qo8I9hENgvJ2BNc3Bwjyh0HA6bHdvJiIqj8MGMubd_xNW-tPU1yn6mJjynjrvE7VWGrXgDTkhM/s200-c/default.png' property='og:image'/>
</b:if>
You can alter the image URL in the above snippet. That image will be
used when no images are present in the blog post. Now when you share
posts to Facebook, the first image in your post should show up on
Facebook as a thumbnail. If the post doesn’t have images, then the fall
back image which we have specified in the snippet will be used. If you
don’t see results right away , then it might be due to the caching done
by Facebook(Facebook caches the metadata). You can force Facebook to
update the cache by debugging the post URL using this
tool
and selecting the “Fetch new scrape information” option. If you want to
make sure that the thumbnail shows up correctly, the first image in
your post should be atleast 200 x 200 px in size(that’s the minimum size
which Facebook expects). If the first image is smaller, then Facebook
might ignore the OpenGraph tags and use it’s own algorithms to find the
post image.
2. Fixing the Wrong Description Problem
Wrong description comes up when Facebook is not able to recognize the
content and structure of your page. This also can be rectified by
adding a search description
while creating your post(You can even update the search descriptions of
your existing posts). This description will be added as meta data to
your post page and Facebook will pick this up.
If meta data is not found, then Facebook normally uses the First
paragraph in your page(which is big enough). So it will be a good idea
to get used to the paragraph HTML tag <p>content</p>. The
Blogger Post Editor doesn’t use paragraph tags but uses lots of line
break tags instead. So if you really don’t want to use Search
descriptions, then you will have to go into the HTML mode of the post
Editor, and make sure that you use paragraph tags Third party Publishing
Tools like the Windows Live Writer which has superior Editing Controls
uses paragraph tags wherever appropriate . After updating the search
description(or updating your post with paragraph tags), use the Facebook
debugging tool and debug the post link to force a cache refresh.
3. Scripts coming up in the Facebook Description
I had seen a couple of cases where JavaScript snippets come up in the
Facebook Description. Facebook somehow mistook the script for content,
and this is probably because of the way you have added the script. Go to
your template and see if there are any special characters in front of
that particular script tag. If you find one, then remove it, and force a
Facebook Cache Refresh.
If you found this tutorial useful, then do share it with your Facebook
Friends who use Blogger :-). If you have any questions do ask here in
the comments or the forum or on our Facebook Page.
