Facebook share showing wrong description –solved!

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?

[Update] There is another tutorial for fixing posts showing wrong thumbnail/image.

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.

 

I. Where does Facebook get the description?

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

1. First it looks for a description meta tag, and uses the content as description.
2. If there is no description meta tag found, 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).
3. If none of the above is available, it leaves the description spot blank.

According to Facebook, it scrapes your page every 24 hours to ensure the description (and other share data) are up to date. However, you can manually refresh it by entering the post URL into the Facebook URL Linter.

 

II. What can you do to fix this?

You can do one of the followings to solve the problem:

1. Add description meta tag to post pages (recommended).
   Update Mar 2012: Please follow this tutorial to natively add meta description to individual posts/pages on Blogger.
2. 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.

 

III. How to add a <p> tag to a post?

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

1. Manually enclose 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 into your template. This is a one time job, and by far the easiest. I recommend you opt for this method.
   

   Here’s how:

   1. Look for the following line in your HTML code:

      <data:post.body/>

   2. 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.
   Important note: Adding a <div> or <blockquote> tag in your post will break the p tag. It will cut short the content inside the p tag -only the content from the beginning of the post until the the start of the tag will be placed inside p tag. And as it turns out, Blogger automatically adds a <div> tag whenever you add an image or click on one of those text alignment icons in the post editor. So, with that in mind, make sure you skip enough text (at least 120 characters) before adding an image or before doing any alignment.

Once you’ve done with the changes, enter the URL of a post into Facebook URL Linter. Then come back, share the post and see the difference.

For the rest of your posts, their descriptions will be updated the next time Facebook scrapes them.

I hope this tutorial helps. Happy sharing… and enjoy!