Facebook Share Showing Wrong Description Solution for Bloggers

  Normally, when you share a  blog post  on  Facebook , it would pull the first few lines of the post and use it as content  description  (a...

Related posts:

 

Normally, when you share a blog post on Facebook, it would pull the first few lines of the post and use it as content description (a.k.a. snippet or summary). However for most Blogger blogs, especially the ones built by Template Designer, Facebook seems to pull something completely random. On some blogs it pulls texts from the comments, from blog description or from the sidebar, while on others it pulls nothing at all. Weird huh?

This behavior occurs when you share a post using a Facebook share button as well as when you post the post’s URL/link directly on Facebook.

Before we proceed with a solution, let us understand how Facebook comes up with the description. I had too much free time on my hands, so I ran some some tests and this is what I found out.


Where does Facebook get the description?

Facebook pulls the description from the following sources, in this order:

1. The first description. Facebook somehow remembers the very first description and sticks to it. Manually entered description doesn’t count.
2. If the post hasn’t been shared yet, then it looks for a description meta tag and uses the content as description.
3. If there is no description meta tag in the page, Facebook looks for the first p (paragraph) tag that contains at least 120 characters. (Do you know why comments and blog description are picked as description? Because each of them is enclosed with a p tag, that’s why).
4. If none of the above is available, it leaves the description spot blank.
What can you do to fix this?

Technically you can do one of the followings to solve the problem:

Add a p tag to your posts.
The absence of p tags in Blogger post is the root of the problem in my opinion. Luckily you can add the tag easily enough. I explain it below.


How to add a p tag to a post?

There are three ways of adding p tags. Choose one.

   1. Manually put the first paragraph of your post in the tag. You need to do this every time you write a new post, using post editor’s HTML mode. To make the tag count, make sure you put at least 120 characters inside the tag:
      <p>FIRST PARAGRAPH OF YOUR POST</p>



   2. Use Windows Live Writer  to write your post. WLW will automatically attach a p tag to each paragraph as you write your post.


   3. Add the tag in your template. This is a one time job, and by far the easiest.

      Here’s how:

         1. Go to Dashboard > Design > Edit HTML.

         2. Back up your template.

         3. Tick the Expand Widget Templates check box on top right of the HTML window.
         4. Look for the following line in your HTML code :
            <data:post.body/>


         5. Enclose the code with a p tag, like this:

            <p><data:post.body/></p>


      What it does is put the entire post in a p tag. It will apply the tag to all existing and future posts. 



Remember this will work only on your future posts, and on previous posts that haven’t been shared yet.

I hope this tutorial helps.

Happy sharing… and enjoy!