How to share Drupal content via Facebook with correct images
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.
Step 1:
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]
Update for Drupal 8: the token [node:field_image] may not work on Drupal 8 sites, you will probably need to use [node:field_image:entity:url] instead to specify the exact url that Facebook needs to catch.
You can use the Facebook Share Debug tool to check: https://developers.facebook.com/tools/debug/sharing/
Save the form, your article node now will have the Open Graph meta tag which is good for Facebook image detection.
Facebook Recommendations
- Implement the Facebook Crawler to generate a preview of your publicly available Facebook content.
- Use Open Graph meta tags to ensure the Facebook Crawler scrapes useful information, such as title, description, and preview image, about your website when it is shared on Facebook.
- Use the Sharing Debugger tool to test how your websites are viewed by our scraper. The debug tool also refreshes any scraped content we have for your websites, so it can be useful if you need to update them more often than the standard 24 hour update period.
- Pre-cache your images by running the URL through the URL Sharing Debugger tool to pre-fetch metadata for the website. You should also do this if you update the image for a piece of content.
Reference and Important Links
- symphony Themes -
https://www.symphonythemes.com/drupal-blog/how-share-drupal-content-facebook-correct-images - stack overflow -
https://stackoverflow.com/questions/1138460/how-does-facebook-sharer-select-images-and-other-metadata-when-sharing-my-url - drupal org -
https://www.drupal.org/project/metatag - facebook for developers
https://developers.facebook.com/tools/debug/
https://developers.facebook.com/docs/sharing/best-practices
