Default OpenGraph Image for Jetpack

Jetpack’s “Publicize” feature automatically adds a set of OpenGraph tags to WordPress posts. (You don’t need to connect any publicize channels to get these tags, but you do need to activate the module itself in the Jetpack control panel.) Generally this works quite well, except for one situation: when you publish posts without images. Unfortunately I do that a lot, and the result is this:

<meta property="og:image" content="https://s0.wp.com/i/blank.jpg" />

When Jetpack can’t find any image specifically associated with a post or page, it falls back on a blank 200×200 image served up by WordPress.com. This makes Facebook happy because Facebook wants a complete set of OpenGraph tags, including an image whose size is at least 200×200 pixels, but obviously it’s not exactly ideal.

(Note: Jetpack 3.3+ defaults social media images to the site logo or icon if no post image is present. You can configure a site icon on the Jetpack settings page, and I believe the site logo must be defined by a theme that supports this feature. However, I wrote my workaround before this feature became available, and since it continues to work fine I’ve never tried the new feature.)

Adding a Default Image

What I (and presumably any blogger) want is to present a nice thumbnail image for my blog whenever a more specific image is not available. By default, WordPress automatically creates a thumbnail for uploaded images such as the Akropolis header image above… but here’s the first catch: that thumbnail defaults to 150×150 pixels which is too small for Facebook. So I first went into Settings: Media and increased the thumbnail size to 200×200, then deleted and re-uploaded my header image.

The next step is to add an OpenGraph tag for the thumbnail image. On my static website where I directly control all the HTML content, that’s very easy. I just placed the following line among the OpenGraph tags in the HTML head (adjust for your own thumbnail URL):

<meta property="og:image" content="https://news.kynosarges.org/wp-content/uploads/AkropolisHeader-200x200.jpg" />

Now how to convince Jetpack to add this tag instead of its blank WordPress.com image? This requires customizing your theme’s functions.php file, as outlined by Jetpack’s Jeremy Herve. His example only covers the front page which never has a specific image associated with it, but we want to cover any post or page without a dedicated image. The required PHP code looks like this:

/**
 * Override Jetpack's default OpenGraph image.
 * Standard is blank WordPress image (https://s0.wp.com/i/blank.jpg).
 * Christoph Nahr 2015-07-07
 */
add_filter( 'jetpack_open_graph_image_default', function() {
    return 'https://news.kynosarges.org/wp-content/uploads/AkropolisHeader-200x200.jpg';
});

So we simply plug into the filter that Jetpack provides for this purpose. Older versions also added useless og:image:secure_url tags for non-default images that needed to be suppressed. Fortunately this has been fixed, and Jetpack 3.6 only adds secure_url tags for known services (such as WordPress.com or Jetpack Photon) that can actually provide HTTPS versions of their images.

2015-07-07: Updated for Jetpack 3.6
2017-03-01: Moved Twitter card coverage to dedicated post