Facebook Share Wrong Description by Greenlava

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. 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.

What can you do to fix this?

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

1. Add a description meta tag to your pages.
   But this a bad idea (for a Blogger blog). DON’T CHOOSE THIS METHOD! I’m not going to explain the whys here. You can read my previous post on description meta tag for the explanation.
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.

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. 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:

view sourceprint?

<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.

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!