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="http://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 'http://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

8 thoughts on “Default OpenGraph Image for Jetpack

  1. Pingback: WordPress : Jetpackが生成する og:image のデフォルト画像「blank.jpg」を変更したい | MUSHIKAGO APPS MEMO

    1. Christoph Nahr Post author

      Your site seems to embed the correct images, but note that Facebook wants 200×200 pixels or more. And you don’t seem to have Twitter Cards activated with Twitter yet.

      Reply
  2. Samuel Elh.

    Thank you so much Chris! I always suffered from Facebook not finding images on certain topics in my bbPress forum, but thanks to jetpack and your code this is no longer an issue.
    Thank you :)

    Reply
  3. Pingback: [WordPress] Jetpackプラグインの生成するOGPタグ(og:image)のデフォルト画像を変更したい | mkoba のお部屋 : DREAMHIVE Staff Blog

  4. Anonymous

    While you were worrying about Facebook you forgot Google and didn’t enter the Description Meta Tag ~ For those that don’t know ~ The meta description tag is a brief and concise summary of your page’s content. It also provides search engines with a description for search engine Index purposes. The description tag is not displayed on the website itself.

    Reply
    1. Christoph Nahr Post author

      Was that a reply to some earlier comment? Jetpack automatically generates correct og:description tags from WordPress posts when Publicize is enabled, no need to add them manually.

      Reply

Leave a Reply