Based on a discussion with Andrew today I was inspired to research exactly how Facebook pulls the thumbnail images and description it uses when you share a link in your status, like so:

As I suspected, Facebook automatically picks up the title, meta description, and up to eight images it finds on the page to choose from. For greater control however there are a few specific tags you can use. This was great for Andrew because he was trying to share a full Flash site he just finished, so there was no static imagery or text to find (I’ve given him the Joel lecture of using proper alternate content ;). For me controlling Facebook share options was important because a lot of my posts don’t have much imagery with them.

If you’re a developer, then the title and description should be self explanatory, and probably already optimized for users and search engines. You can use <meta name="title" content="Your Facebook Specific Title" /> if you want to specify something different from the page title. <meta name="description" /> works as normal.

The new one to me was for an image to be specified and it’s <link rel="image_src" href="http://yoursite.com/path/to/image.jpg" />. The only caveat seems to be that its dimensions are larger than 50×50.

I wanted this information to change on a post by post basis of course so here’s a code snippet for WordPress. It gets the post’s excerpt to use as a description and the post thumbnail (now available in WP 2.9+) as the source image, all outside of the Loop in your HTML’s head.


<?php
global $wpdb;
$query = "SELECT post_excerpt FROM wp_posts WHERE ID = " . $post->ID . " LIMIT 1";
$result = $wpdb->get_results($query, ARRAY_A);

if ($result[0]['post_excerpt']) {
$description = $result[0]['post_excerpt'];
} else {
$description = "Static description if no excerpt exists";
}

$thumb = get_post_meta($post->ID,'_thumbnail_id',false);
$thumb = wp_get_attachment_image_src($thumb[0], 'post-thumbnail', false);
if ($thumb) {
$thumb = $thumb[0];
} else {
$thumb = "http://www.yoursite.com/path/to/static-image-if-no-thumbnail-exists.jpg";
}
?>
<meta name="description" content="<?php echo $description; ?>" />
<link rel="image_src" href="<?php echo $thumb; ?>" />


For my purposes it works great, but I don’t know how well it might interact with other SEO-type WordPress plugins. For other sharing-specific meta tags, such as audio and video, check out this article, or Facebook’s developer wiki.

And please, share away. Share