Optimize Your WordPress Posts for Facebook

Creating an enhanced Facebook posting with META tags

WordPress Logo

You’ve written some really great posts to your WordPress blog. You’ve added a Post to Facebook button so folks can re-post you, you know they will, right? Is there more you can do to optimize what gets sent to Facebook? You Bet!

It’s all in the META

When folks share your WordPress posts on Facebook, data is gathered from your post to create the imported story. It all comes from the META data in the <head> of the post.

Here’s a screenshot of an imported story formatted using the technique described in this post:

Facebook Story Example

Here are the tags used to create the story on Facebook:

<title>Tulsa Web Results | New Search Engine Takes Factual Approach |</title>

<meta name="description" content="Can a search engine tell fact from fiction?
This new engine claims it can!!" />

<link rel="img_src" href="http://tulsawebresults.com/wordpress/wp-content/uploads/2009/12/
facterylabs-180x300.jpg" />

The WordPress code

The code to generate the first two (title and description) should already be in your header.php file in wordpress. These are standard to every Web page. The third tag (the link to img_src) is used by Facebook to generate the thumbnail in the imported story. It’s not a default part of a Web page, so some code has to be added to header.php to create it.

Here’s the code:

<link rel="img_src" href="<?php echo get_post_meta($post->ID, "img_src", true); ?>" />

Add this anywhere between <head> and </head> in header.php. Now you’re ready to do some post enhancement!

Enhancing Your Posts

When you create a post in WordPress, there’s a tab below the text box for “Custom Fields”. Add a new custom field named img_src , or select it from the drop down box. For the value, paste in the URL of an image you want to use. Facebook will automatically make a thumbnail of the image and place it when your story is imported.

“Title” and “Description” tags are generated automatically by WordPress, though you can enhance them as well using a plugin like “Headspace” or “All in One SEO”. Once you add the img_src code snippet to your template, the image for Facebook is almost automated. Now all you have to do is decide what image you want to appear with your post. You could use an image from your post, your logo, or just about anything. It’s up to you!

Conclusion

Social networking lets users on you site re-post what you write to Facebook and other places. If you enhance your posts with an image, they’ll be even more attractive to Facebook users. This can increase click throughs and traffic on your site, and that’s a good thing, right?

Update:

Spurred by Daniel’s comment below, I made some investigations. Here are my findings:

1. The img_src tag does indeed work. Must be an undocumented feature 😉

2. The image to be linked to can be no larger than 130px x 110px (recent change I was using 150 x 150) and the ratio of width to height can’t be more than three. In other words, really long or really tall images can’t be used.

3. What happens when the image doesn’t meet these criteria? A thumbnail isn’t created.

4. Here’s the page at Facebook for the details: Specifying Meta Tags for Facebook Share

View Comments

2 Responses to Optimize Your WordPress Posts for Facebook

  • Thanks for posting this. However, you may want to check your code. I found on the Facebook site that the meta tag is “image_src” rather than “img_src”. When I made that adjustment on our site, it worked (only using it on the very latest post about Peruvian food, however).

  • Hi Daniel,
    Thanks for the tip.
    The img_src tag didn’t work for you? My most recent post to Facebook worked with this tag. Perhaps they’ve changed the interface, or perhaps both tags work?

    Update:

    I originally found the img_src tag on another Web site and wanted to clone that function. That site has now changed their code so Daniel, you’re right. image_src is the correct code.

    However, as of December 29, img_src still worked. More testing to come.

Leave a Reply