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

After creating a splendid image just for Facebook shares (1200 x 630 pixels, stats fans) and crafting a tantalising description (300 characters or less), you load up these details into the SEO section of your page or post and voila.

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

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

The Diagnosis

After some swearing and a fair bit of Googleage, it turns out that Facebook doesn’t play nicely when an image is served up via https but is specified using the og:image tag.

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

Fortunately, the og:image tag has a bunch of structured properties that allow us to specify the secure URL for the image, so:

<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.

Hurrah.

How to Automate the Fix

Handling this manually is a major pain in the neck.

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

Don’t forget to make sure you’ve cleared all the relevant caches and any CDN’s your site is linked to eg. Jetpack’s Speed up images and photos option as this’ll make it tricky to know whether things are working properly.

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

About Sam Michel

Inquisitive. Hopeful. Jovial. Cantankerous. Digital marketer. Event organiser. Long-time fan of tech, collaboration and innovation. Exploring digital, social, business, technology, society, psychology & startups. Founder Chinwag, Digital Mission, Pitch NYC, ChinwagPsych. Former Exec Dir, Social Media Week London. More short stuff @toodlepip on Twitter.

• 
• 
• 
• 
•