How to Fix Facebook Opengraph Images on Secure Sites with Wordpress

The Symptom

Facebook Share Not Working on SSL

The Diagnosis

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

The Fix

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

How to Automate the Fix

/**
/** 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');

NB

  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.

--

--

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