28 January, 2022 seen 661This is an article back from 2014, when I had the vision to launch a web agency in Tbilisi, Georgia. In the end, I didn…
Open Graph is protocol used to pass meta data to Facebook, and not only. I will not dig deeper in details about protocol itself, you can find more here: http://ogp.me/
Today I'm willing to share my knowledge, how you can use Open Graph protocol on your Drupal site, and be a super cool on Facebook.
By default, if shared a link to Facebook will look like this:
Facebook Default Open Graph
With Open Graph enabled and configured your post could look like this:
How To enable Open Graph protocol for Drupal site
The chances are high you are already using powerful Drupal's module Metatag - if not - go for it - it will not only allow you to configure your Drupal site with Open Graph, but give you more cool SEO useful features:
The Metatag module allows you to automatically provide structured metadata, aka "meta tags", about a website. In the context of search engine optimization, when people refer to meta tags they are usually referring to the meta description tag and the meta keywords tag that may help improve the rankings and display of a site in search engine results. In addition, the module provides support for meta tags (Open Graph Protocol from Facebook, Twitter Cards from Twitter) that allow control of how content appears when shared on social networks.
In case you have Metatags module installed but you don't see Open Graph option from modules page, you should update your Metatag module.
Now, when you are setup - you should see following on your modules page, under Metatag options:
How to enable Drupal OpenGraph
We are going to enable just Metatag:OpenGraph.
Now when Metag:Opengraph has been enabled, we must head to Metatag overview page (admin/config/search/metatags), and here we will find bunch of option to configure
Drupal Metatag settings page
We can create new default, or override existing, I will override existing Content Metatag
I will leave defaults for Page title and Description, what I'm interested is - Open Graph, if you will scroll your browser a little bit down, you will find Open Graph tab
Drupal OpenGraph tab
by clicking on OPEN GRAPH new settings will expand, and here we need to make some adjustments. Basically just one - to point to the image path, if we are using images for our posts (not inline, but as fields)
We have option to browse available tokens and find our field:
Drupal OpenGraph image path
Here you can see for Image URL I'm using [node:field_service_image] what is a custom image field, I have added to my content types.
Now save your changes, flush all caches/ run cron and you should be done.
You can use OpenGraph debugger tool to find out is your OpenGraph working properly.
Here is what I got:
OpenGraph Debugger warnings
OG indicates that there is problems with my image - now I can figure out, to change that image or ignore this warning, because Facebook is showing my images correct:
Facebook Open Graph
I might do few more Run Cron/Flash Caches just to make sure that image shows correct - and after several attempts - it's correct.
Leave me your comment, if you need any assistance of configuring OpenGraph for Drupal.