When you share a post of your Drupal site via Facebook, it will automatically detect the images of your node for you to choose. But sometimes, it does not detect any images, or the detected images are not what you want. How can you deal with that?

An easy method is uploading the main image manually. That's fine, because you are the owner of the site, you know which ones to choose. However, if your readers share that piece of content and it has an ugly image, it does not look attracting at all.

In this tutorial, we show you how to set meta data for your Drupal nodes so the correct images will be chosen, when you share them via Facebook.

How Facebook detects images

According to this thread by bkaid on Stack Overflow, Facebook relies on these following open-graph meta tags to decide which image to show.

<meta property="og:image" content="http://yourwebsite.com/yourimage.jpg"/>
<meta property="og:image:secure_url" content="https://secure.yourwebsite.com/yourimage.jpg" />

When these tags are not present, Facebook tries to look for the <link rel="image_src" href="/myimage.jpg"/> tag.

When none of those tags are available, it will choose the images on your page which have the following criteria: Image must be at least 200px by 200px, have a maximum aspect ratio of 3:1, and in PNG, JPEG or GIF format.

Configure image tags on Drupal with Metatags

Using the Metatag module, a single must-have SEO module for Drupal, we will show you how to configure the tags for Facebook sharing.

Step1: Edit your content type, add an image field which you specify it to be the main image to be shared.

Step 2: Download and install the Metatag module on https://www.drupal.org/project/metatag

Step 3: Enable Metatag core module and Metatag:Open Graph submodule

Step 4: Go to Configuration - Search and metadata - Metatags, and choose "Add a metatag default". On the next screen, pls choose your node type that you want to configure, Article for example, then click Add and Configure.

Step 5: Pls click on the link Browse available tokens, open the Nodes section and look for the field image token that you create on Step 1. On my case, it is named [node:field_image]

Step 6: On the metatag form, open the Open Graph section. On the Image field, pls enter [node:field_image]

Save the form, your article node now will have the Open Graph meta tag which is good for Facebook image detection.

Subscribe to our mailing list

* indicates required