How to Fix Facebook Opengraph Images on Secure Sites with Wordpress

<tl;dr> Using Opengraph tags to specify which images and descriptions Facebook should use when a link is being shared often breaks for secure sites using https. They key? Using og:image:secure_url to specify the link. Here’s a quick fix using Yoast’s hugely popular Wordpress SEO plugin.</tl;dr>

Apologies, this goes geek deep. I don’t know why, but this tiny little thing drove me nuts, so I rolled up sleeves and got elbow deep in Wordpress (kinda).

When sharing pages from your site, particularly the important ones like the homepage, it’s good practice to have a strong image and description that Facebook can grab from the special Opengraph tags. After all, we’re all about creating fabulous stuff that’s going to get shared, aren’t we?

Fortunately, there’s lots of great, easy-to-use, fantastically well featured Wordpress plugins that make this a breeze, especially the famous Wordpress SEO plugin that’s racked up 51,230,245 downloads.

The Symptom

This is what should appear when sharing the URL in a Facebook post:

Facebook Share Not Working on SSL
Facebook Share Not Working on SSL

Wait. What happened to the lovely image I spent ages putting together?

The Diagnosis

The image for the share above that didn’t work lives here:

https://ceprogramme.com/wp-content/uploads/2017/06/Facebook-Promo-Image.jpg

As standard, the Wordpress SEO plugin tells Facebook to use this image by inserting an Opengraph meta tag, adding this to the page’s header:

<meta property="og:image" content="https://ceprogramme.com/wp-content/uploads/2017/06/Facebook-Promo-Image.jpg" />

Turns out, Facebook doesn’t like having an image served from a secure link to the og:image tag.

What to do?

The Fix

<meta property="og:image" content="https://ceprogramme.com/wp-content/uploads/2017/06/Facebook-Promo-Image.jpg" />

becomes:

<meta property="og:image:secure_url" content="https://ceprogramme.com/wp-content/uploads/2017/06/Facebook-Promo-Image.jpg" />

and, hey presto! It works.

Facebook Secure Share Working
Facebook Secure Share Working

Hurrah.

How to Automate the Fix

Fortunately, the Wordpress SEO plugin provides plenty of hooks, so with a few lines of PHP, we can hook into the plugin code and properly handle images served up via https.

Luckily, you just need to add a few lines to the functions.php file in your Wordpress theme file. If it doesn’t exist, you can create one and add:

/**
/** Yoast SEO plugin doesn't handle opengraph image tags properly
* if they're hosted on a secure server. Luckily they provide lots
* of useful filters to adjust this value. This function checks to
* see if the image is on a secure link and if so, adds secure_url
* onto the og tag so it's properly formatted.
* @param string $image URL for the opengraph image
* @return none
*/
function check_ssl_facebook_opengraph_image($image) {
$og = "og:image";
if (preg_match('/^https/', $image)) {
echo '<meta property="'. $og . ':secure_url" content="'. $image . '" />' . "\n";
$image = preg_replace("/^https/", "http", $image);
}
// Chances are the image is also available via http, so let's include
// to keep the Facebook Linter happy
echo '<meta property="'. $og . '" content="'. $image . '" />' . "\n";
}
// Hook into the Yoast plugin's hooks for handling the OG image
add_action('wpseo_opengraph_image', 'check_ssl_facebook_opengraph_image');

That should do the trick. It also includes a link to a non-secure version of the image using http for completeness, but it’s not strictly necessary.

NB

The Facebook Sharing Debugger is your friend:

  1. Firstly, you can use it to check how Facebook will interpret your link and display it when shared.
  2. Secondly, you can use the Batch Invalidator option to zap any cached versions of the share that Facebook stores to make sure the changes are working.

Thanks to Syed posting at Stack Overflow that pointed me in the right direction.

Hope that helps. If I’ve missed anything, you’ve got a better way of handling this, or something isn’t working properly, lemme know.

Photo by William Iven on Unsplash

Originally published at toodlepip.

Inquisitive. Hopeful. Jovial. Exploring tech, digital, social, business, society & startups. @Chinwag @DigitalMission @PitchNYC_ @ChinwagPsych

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store