How to control the snippet used in Facebook

March 1, 20113 Comments
Facebook Twitter Pinterest Plusone

No doubt many of you will have already heard the news on Facebook’s recent bait and switch tactic with the like button now turning into sharing functionality across your Facebook stream.

For publishers across the web, this change will undoubtedly bring with it an additional wave of traffic from the social network site, and is likely to encourage publishers to implement the code they need to increase Facebook’s reach even further.

However, with the recent change, it is worth noting that control has now been taken out of users hands as to the snippet of information which is lifted and used to describe a story and encourage a click-through.  You can no longer expect or rely on end users cycling through to choose an appropriate image, and overwriting the text which gets pulled in from your page.

Having a good thumbnail, and good introduction to your article or page will encourage click through’s within the Facebook network, in much the same way as it does in organic results. It makes complete sense to ensure that your house is in order for this recent change – so how do you control what Facebook picks for your image and introduction?

Easy when you know how.

Tucked away in the depths of the Facebook documentation is a protocol known as ‘OpenGraph‘ which provides you with a number of ‘meta tags’ which control the snippet and image  which is used within the Facebook stream when the like button is pressed.  Taken from the developer documentation this shows an IMDB page, which shows exactly what image should be used in the stream etc.

<meta content="The Rock" /><meta content="movie" />
<meta content="http://www.imdb.com/title/tt0117500/" />
<meta content="http://ia.media-imdb.com/rock.jpg" />
<meta content="IMDb" />
<meta content="USER_ID" />
<meta content="A group of U.S. Marines, under command of a renegade general, take over Alcatraz and threaten San Francisco Bay with biological weapons." />

Thankfully, for those of you on WordPress, you don’t have to worry about this one. There is a variety of OpenGraph plugins which handles all of this for you.

Unfortunately with both of these, there are problems. The description tag isn’t used at all for single posts in the latter, and its used incorrectly in the former (set to the blog info). I’ve created a fix to sort the problem out with both, and you can download below modified versions. which work like a dream.

Open Graph Protocol Update (Artlung version)

Open Graph Protocol Update (Willnorris version)

The image selected is just the first one which is logically in your WordPress gallery for that post. There are also plugins out there for other content management systems such as Joomla.

Here’s a before and after shot:

Before: open graph meta is implemented, Facebook pulls in a good lump of the text, and defaults to the first image.

After: Publisher controls the text used as the description to the article. More control = More clickthroughs and traffic.

Filed in: Programming
Tagged with:

About the Author ()

Paul is a regular 30 year old web bloke / programmer with a penchant for online marketing. This blog is a personal outlet, with an eclectic mix of articles.

Comments (3)

Trackback URL | Comments RSS Feed

  1. Kyle Hogan says:

    Hi Paul,

    Nice article. I am using the Artlung Open Graph Protocall, but I can’t seem to get anything to display in the meta og:description. I get this in the resulting Code: .
    If someone Likes the page/post, in Facebook’s the description shows as some random text about related posts. “Related PostsSold Lansing Island Drive ….”.
    Have you seen this on anybody’s sites? I’m wondering if there is some bug in the WordPress update that just happened.

  2. Paul Anthony says:

    Hi Kyle,

    Are you using my modified version or the original Arlung version? I would look at the text being generated under “og:description” in your header, that may explain it a little.

    Paul.

  3. Kyle Hogan says:

    Hi Paul,

    Sorry for the delay in response. Had a busy weekend.

    I think I had some conflicting plugins that were causing the error. I have an SEO plugin that creates the og: Meta. Once I activated the plugin’s ability to make the og: Meta it worked. I couldn’t get the Open Graph plugins you mentioned in your article to work unless I deactivated the other plugin.

    I still wouldn’t have noticed the issues without your article. Thanks.

Leave a Reply

Back to Top