It’s beautiful and sunny outside. The temperature is a refreshing 60 degrees, and I’m eager to get outside and enjoy the day. Before venturing out I say to myself, “Vanessa, there was a great article you wrote a while back, why not share it on Facebook so others can enjoy it?”. With the certainty that it will be quick I hit the share button, craft some stunning literature about why this article is relevant today and spend the next three hours fixing Jetpack’s broken treatment of og:description.
If you’ve found this page, you’re probably struggling with that same thing – when sharing on Facebook, instead of inserting your expertly crafted post description you just see the title repeated again. As great as your site may be, this is not a welcome invitation to sharing. After three hours of investigation, taking my entire network of sites down twice and much help from this Reddit Article, this WordPress forum post and my own limited PHP skills I have a solution to share.
If you’re using Jetpack, there are three things you need to do to get your blog posts to show up with the correct description when shared on Facebook:
- Add code to your theme to correctly set the og:description property
- Comment out the code in the Jetpack plugin that incorrectly sets this
- Make sure your Excerpts are set
Add code to your theme to set the og:description property
Add the code below to the header.php file in your theme. You can find this going to your WordPress dashboard, clicking on Appearance, then Editor. It’s useful to make a careful note of what you’re changing so you can undo it later, or better yet – backup your files before changing. In general changing your theme files won’t cause too many bad things to happen if you get it wrong.
<?php
if (is_home()) {
echo ‘<meta property=”og:title” content=”Your site name”/>’;
echo ‘<meta property=”og:description” content=”Your site image”/>’;
echo ‘<meta property=”og:image” content=”http://images.yoursite.com/image.png”/>’;}
else {
echo ‘<meta property=”og:title” content=”‘;
echo single_post_title();
echo ‘” />’;
echo ‘<meta property=”og:description” content=”‘;
echo strip_tags(get_the_excerpt());
echo ‘” />’;
}
?>
Comment out the incorrect og:description code in Jetpack
This one is a bit trickier – so be careful! I brought down my entire network of sites twice because I was trying to get too fancy. Yes, it’s possible to edit Jetpack and put all the code there instead of in your theme, but it’s safer to make as few changes to plugins as possible.
First, edit the Jetpack plugin by going to your WordPress dashboard, select Plugins, then Editor. In the top right select ‘Jetpack’ as the plugin to edit. Now choose the ‘sharedaddy.php’ module on the right by clicking it. Then click on jetpack/modules/sharedaddy/sharing-sources.php, also on the right. Do a search on the page for og:description and you’ll be taken to code that looks something like the below. Comment out the two lines with if ($post… and echo ‘<…
Hopefully Jetpack fixes this in the near future, but until then you’ll need to add the comments back whenever you upgrade your Jetpack plugin.
public function display_header() {
if ( $this->share_type == ‘share’ ) {
// Set the open graph description, otherwise Facebook may pick up some random text from the page
global $post;//Comment out because Jetpack is lame with og:descriptions
// if ( $post && $post->ID > 0 )
// echo ‘<meta property=”og:description” content=”‘.esc_attr( apply_filters( ‘sharing_post_title’, $post->post_title, $post->ID, $this->id ) ).’” />’;
}
}
Set your excerpts to get the correct og:description
Lastly, you need to set your the excerpt on your post to get the correct description. It’s not enough to have a description set in an SEO plugin like All in One SEO Pack, because the get_the_excerpt() function only looks at the WordPress excerpt. The excerpt should be right under your post edit box in WordPress, though it may be hidden in later versions of WordPress. You can bring it back by selecting Screen Options where you’re editing your post.
Phew!
You’re done! Congratulations! Test everything and do a quick share to make sure everything is working.
