Fix broken Facebook sharing – Jetpack only shows the post title in og:description

Fix broken Facebook sharing – Jetpack only shows the post title in og:description

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:

  1. Add code to your theme to correctly set the og:description property
  2. Comment out the code in the Jetpack plugin that incorrectly sets this
  3. 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.

9
Join the Discussion

avatar
6 Comment threads
3 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
8 Comment authors
deepakaufurayMomo Eldslukareallymoray Recent comment authors
  Subscribe  
Notify of
Nik
Guest
Nik

After last update of Jetpack, it doesn’t works anymore 🙁

Vanessa Howell
Guest

Ugh… I pinged their team to try get them to fix it. Until then I think I’ll hold off on updating. It seems like a really bad oversight given how prevalent sharing on social sites is these days.

Momo Eldslukare
Guest

Seems like it’s fixed, ie. working well if you write a manual excerpt… (that solved it for me at least.)

Fyn
Guest

Thank you for that article! It’s exactly the problem I’m having.
But I just deleted those lines in the plugin file and let a seo plugin handle the correct open graph meta data. I’m positive that they’ll fixt the problem with their next release.

Vanessa Howell
Guest

Wonderful!
I bugged someone on WordPress over Twitter a few weeks back, so hopefully they’ll fix it.

moray
Guest

everytime i comment out the the excerpt in sharedaddy and error comes up and i have to delete sharedddy files vis FTP and start again….very annoying. This problem is killling me. I have a plugin that is putting right FB meta data in but sharedaddy isnt working with it – its only showing TITLE via All In One SEO, Blog Title (instead of description) and image.

Any ideas…heres and example of a post http://www.mutantspace.com/matt-cusick-map-works-collages/

thanks

ally
Guest
ally

how can you set it to pull the content and not the excerpt?

aufuray
Guest

Thank you so so so much. This works!!!

deepak
Guest
deepak

Does Not works in Mobile theme 🙁