In today's Drupal tutorial series I will write down my notes, how to add open graph protocol for Drupal 8 website.
The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook. While many different technologies and schemas exist and could be combined together, there isn't a single technology which provides enough information to richly represent any web page within the social graph. The Open Graph protocol builds on these existing technologies and gives developers one thing to implement. Developer simplicity is a key goal of the Open Graph protocol which has informed many of the technical design decisions.
Make sure you check out more information about Open Graph protocol and its use: The Open Graph protocol
Also, for Drupal 7 example, you should check out this tutorial: How to add Open Graph protocol for your Drupal site
Now let's start with a basic, out of the box, Drupal 8 website, with no Open Graph enabled yet, let's try to share some of the articles on Facebook wall (no mater your personal or Facebook business page wall)
Open Graph not configured
Out of the box Facebook share screen works already pretty good - it takes URL and nicely gets title from it. a short description is added and of course link back to your website. Though we have missing one important element - image - there are no image. And honestly speaking I would love to have better control of what is shared in the title section, I don't want | [site:name] shared in it. And maybe I would like to have a better control of what is written in description box. Do you find the same? Then, let's fix that, and here comes in open graph protocol.
Open Graph protocol for Drupal 8
If you have followed my article on How To Override Drupal 8 Frontpage Title, you already are familiar Metatag module, which will brilliantly handle all of the required work.
- Download and enable metatag module
- From admin/config/search/metatag select edit Content
- Scroll down to Open Graph settings
- Page URL: [node:url]
- Title: [node:title]
- Description: [node:body]
- For Image settings enter node[node:field_image], for displaying default image tag, if you are using custom image field, use browse available tokens to find field name
Open Graph image field settings for Drupal 8
Adjust Open Graph settings according to your needs. Click save for now
Save and make sure to clear cache, now visit Open Graph Debugger and test your URL. Follow on screen recommendations for any issues to fix.
Now here is how this post looks if shared on Facebook again
Open Graph debugger for Drupal 8
Much better!