I’ve found a lot of benefit adding Open Graph properties to my blogs. Primarily: more visitors. By adding simple code to my WordPress theme headers, social plugins like the ‘Like’ button will make your content display more meaningful within Facebook.

Which of these two articles would you be drawn to? Which would cause you to stop, read, and consider clicking through to?

Yet another easily ignorable line item:

Or this rich image and excerpt:

With WordPress I can easily drop a few lines of code into my theme’s header and make any ‘Liked’ content a little more compelling.

The Source

In the header, I’ve added a quick snippet to grab only the image URL of the featured image for the current post (via wpcanyon.com):

$thumb = get_the_post_thumbnail($post->ID);
$pattern= "/(?<=src=['|\"])[^'|\"]*?(?=['|\"])/i";
preg_match($pattern, $thumb, $thePath);
$theSrc = $thePath[0];

I then add the following to define the required Open Graph properties:

<meta property="fb:admins" content="FACEBOOK ID" />
<? if (is_single()) { ?>
<meta property="og:title" content="<?php echo get_the_title(); ?>"/>
<meta property="og:type" content="article"/>
<meta property="og:image" content="<?php echo $theSrc; ?>" />
<meta property="og:url" content="<?php the_permalink() ?>" />
<meta property="og:description" content="<?php the_excerpt_rss() ?>" />
<meta propert="og:site_name" content="<?php bloginfo('name'); ?>" />
<? } ?>

And just like that, you’ve added all the necessary properties to your theme to tell anything that respects Open Graph (primarily Facebook) to your blog articles.

Be sure to use the Facebook URL Linter to test this out. Here’s an example of a recent post of mine.