WordPress, JetPack and Facebook – The Case of the Mysterious Featured Image

WordPress, JetPack and Facebook – The Case of the Mysterious Featured Image

Got a WordPress blog? Good!

Using JetPack with it? GREAT!

Banging your head against the wall because every time you share a post on Facebook, the wrong image gets picked up for the post? BOOOOOOOOO!

Not cool guys, REALLY not cool.

Don’t hang your head in shame, because SALVATION IS AT HAND!

If you’re using JetPack with your blog (and if you’re not, you really should be), chances are it’s the problem. But don’t get rid of it – it’s too useful for that. We just need to tell it to stop sticking it’s nose in where it’s not wanted.

 

But first, some background…

I had been hitting this problem for months on MattRussell.co. I’d craft the PERFECT blog post. I’d create a delectable Featured Image that tops off the post perfectly. I’d create a custom Facebook-specific sharing image, and I’d use Yoast SEO (again, if you’re not using this, give yourself a swift uppercut and have a long, hard look at your life) to specify that social media should use this special image.

I’d publish the post.

I’d jump into Facebook to share my wisdom with the world.

I’d paste in the URL.

…And Facebook would choose the WRONG IMAGE. Cue wailing and gnashing of teeth.

Broken OG:Image tag

Stupid Facebook!!!!

 

…or was it???

In short, no, it wasn’t Facebook’s fault. Facebook was doing exactly what my blog was telling it to do. And to figure out why, we need to have a quick technical lesson.

How does Facebook choose which image to use, when you share a WordPress blog post?

You used to get a choice. And you used to even be able to upload your own. But that wasn’t really good, because if someone else shared your content by pasting the URL into a new post themselves, all bets were off as to what image would show.

Facebook’s solution was to leverage the Open Graph – a way for your blog to announce to Facebook “This is what this page is about. And this is the image you should use when you’re sharing this page” (amongst other things). By using the Open Graph metadata, it placed control back in your hands (as the publisher) on how best your content should be displayed when it’s shared regardless of who is sharing it.

It’s a Good Thing.

Pretty soon, a bunch of WordPress plugins started to inject OG tags into the raw HTML that makes up any particular page / blog post. They would look at the images available in the post, and select the “best one” for you.

This was, and continues to be, a Good Thing.

Some plugins (Like Yoast SEO – installed it yet???) take things a bit further and allow you to actually specify “This is the image that I want Facebook to use”. You select an image when you create your post, and Yoast injects the correct OG:image tags into the HTML.

Which is why it’s really frustrating when you’re using Yoast SEO to specify the right Facebook sharing image, and Facebook isn’t picking it up.

 

Where’s the problem?

To help narrow down problems such as these, Facebook kindly makes the Sharing Debugger available to general schmucks like you and me. This lets us see exactly what Facebook sees when it looks at our blog post.

Facebook Debugger ScreenshotLooking at this, we can see what our blog is telling Facebook. Specifically, in this instance, we’re looking at the “og:image” tags, both up the top in the nicely formatted table, as well as down below in the raw tags.

Shown above is an example of this working properly for me – you can see that the OG:image is being set to the specific OneDrive-Updates-FB.png graphic, instead of the generic Featured Image.

When I first looked though, this was very wrong. This told me that it’s not Facebook that’s got the problem – there’s something on my side that’s telling Facebook to use the wrong one.

 

Slinging Mud

First up, I thought my Yoast plugin was broken, and wasn’t setting the OG:image properly. So I disabled it, re-enabled it. Turned off the Sharing features. Called it bad names.

Then, when none of that worked, I assumed that my theme must be getting too smart, and trying to overwrite the OG:image tag with each posts’ Featured Image. Another long tirade of baseless accusations and swearing, to no avail.

Then, as you’ll have figured out from the title of this post, I stumbled over this, buried amongst a sea of absolutely irrelevant google search results:

Remove Jetpack’s Open Graph meta tags

JetPack is great – Jetpack is awesome. But I had no idea it did this.

What was happening, best as I can figure, is that Yoast was setting the correct OG:image tags for the post. Then, JetPack was overwriting them with it’s default settings, and setting the OG:image BACK to the Feature Image for the post.

Thankfully, that article provides a handy little filter line to add to your theme’s functions.php file. Just make sure you’re using a Child Theme, like a good web dev – don’t modify your main theme or the change will disappear next time you update it. This is REALLY easy to do. Once done, that filter line instructs JetPack to NOT create or replace any Open Graph tags.

As soon as I had made the change in my Child Theme, I re-scraped the page in the Facebook Debugger and everything started to work as expected.

ogimage-correct

Why does this matter anyway?

It matters because:

  1. It looks ugly. Facebook likes a squarer aspect ratio than my Featured Image caters for. Which means when my Featured Image gets used on Facebook, it crops out the sides of the image. A lovingly, hand-crafted image (Thanks, Canva) that looks perfectly in place with my theme suddenly looks VERY amateur-hour on my biggest social network. Not a great look.
  2. Facebook doesn’t like images with text. It tells you that A LOT. That’s because people started making post images that were just text ads. So Facebook cracked down on images that it determined to contain “too much” text. The upshot of this is that if you share a blog post or a status update with an image that’s got text on it (like a lot of my Featured Images do), Facebook will “downvote” that post and it simply won’t show up as much in people’s newsfeeds. Likewise, when it comes to paid advertising, a post that you promote that has an image with text in it will end up with a MUCH lower reach when compared to the same post with a graphical image. I don’t make the rules.

The end result is that you’re sharing your stuff on Facebook because it’s valuable to people (or so you hope), and they can use what you’ve created in their lives.

Alternatively, you’re sharing your stuff on Facebook and spending money on promoting your content so you can get it in front of people’s eyeballs.

Either way (no judging here), having text in your social sharing image means that Facebook will not distribute your content into as many people’s newsfeeds as otherwise might happen. Not only are you doing yourself a disservice, you’re preventing your content from reaching those people who may well be very interested in reading it.

And if you’re just a bit OCD, and like things “just so”, then you want your tech to support and enable that, not fight against you :).

tl;dr

If your facebook sharing image is getting set wacky (probably to the Featured Image of your post, instead of the one you specifically set), then visit the above link to learn how to tell JetPack to keep it’s hands to itself.

I hope this helps someone, because it’s been driving me mad for months.

Matt Russell

I started MattRussell.co as a way to help business owners cut through the confusion and get real value from their IT systems. If you're a business owner who wants to improve your tools, or if you're an IT consultant helping business owners unlock their potential, you'll find something interesting here.

Latest posts by Matt Russell (see all)