In this Drupal tutorial I will show how one (perhaps you) can add a default image for Open Graph to be used in case no image has been attached to a node. Open Graph functionality for Drupal is handled by by Metatag module. Make sure you have downloaded and enabled this module.

Open Graph is protocol used to pass meta data from your website to Facebook, and not only. I will not dig deeper in details about protocol itself, you can find more information here: http://ogp.me

I'm using Open Graph to display custom image added to a node when shared across many social networks (Facebook and Google+ for example).

You can follow my tutorial how to add Open Graph protocol for Drupal site if you haven't already.

Now the problem arises when there is no default image provided to a node and Open Graph cannot pass image - in such scenario you are left with two options - either Open Graph will pick up some random image and attach it to shared post, either it wont attach any image at all.

Speaking of me - For a last 6 months I'm trying to add a custom image for each post I publish, and even more I'm adding a custom created image (not some copy/paste from internet) by using awesome canva.com web app. 

But still there are times I'm not attaching custom image for my nodes (posts) - for example in posts about Eurovision I'm adding a you tube video of contestants instead of some custom image. Again this is a custom feature I have built in my blog by using Youtube Field module, but still - when posts like those are shared over social networks, they just don't stand out.

I found a simple but yet powerful solution in case of me, best of all, it doesn't require any additional modules or coding if you are already using Drupal Metatag Module with Open Graph enabled.

1. Create a Custom Default Image

By using canva.com I created a default image to show in Open Graph, when image field is empty:

Default Image For Open Graph

As you can see nothing fancy here just my name on a blue background. 

You should then upload your image to your server, choose a folder as you like, I uploaded mine at my themes images folder

2. Overriding Metatag Default Behaviour

Metatag Settings Page

Now if you followed my tutorial how to add Open Graph to your site, then you defined your custom image for each content type seperate, if so all you have to do is to override a values for Global

Open Graph Global Value

Make sure value for your content types are still using custom image fields:

Open Graph Custom Content Type Value

 

3. Debug using Open Graph Debugger

 

Before that make sure you have cleared all caches, then head to https://developers.facebook.com/tools/debug and test your URL

Here is an example with post containing a Youtube field instead of custom image

Actual blog post

Open Graph Debugger

Values you entered as global will work for any other pages you have not defined custom values, like taxonomy pages, custom Drupal views pages or front page.

I hope this article helped, please feel free to leave a comment or contact me if any question arises.