In a previous blog post and video, we looked at the code that controls the display of link previews on Facebook. This is outlined by Facebook's Open Graph protocol, where we modify the <meta> tags within the <head> of our HTML web page to say what the title, description, image, and other info should appear in our preview.
In that post, I showed how to manually modify those HTML tags. While it's good to learn what's going on behind the scenes, in reality, it would be kind of crazy to ask your content editors to modify this code for each piece of content they add. In fact, if you're using a CMS, it would be impossible for them to do so.
So instead, let's allow the CMS to make our jobs easier. In this video, let's look at the Drupal Metatag module and the included Metatag: Open Graph module to save us time and make our job easier. At the end of this, we will have added <meta> tags in the <head> of our article to reflect how we want our preview on Facebook to appear.
Install the Modules
First, let's download the Metatag module. Inside of this module are many sub-modules, each of which is designed to handle the expected meta tags for other social networks, search engines and products.
For this tutorial, you'll only need to enable the Metatag and Metatag: Open Graph modules. Although we are going to be dealing with Facebook link previews, we will not require the Metatag: Facebook module for this tutorial.
Create Metatag Field on Content Type
In order to give your editors the ability to change the meta information that gets printed to the <head>, we need to add a field to our content type.
- Go to Structure > Content Types > Manage Fields on the content type you want to affect
- Click Add Field > General > Meta tags
- Give your field a name ('Metatags' will do)
- Save Settings
Now when we go to add or edit a piece of content of this type, we have a collapsible 'Metatags' group on the right hand side of the page. It has a few different sections:
- Basic Tags
- Advanced
- Open Graph
We can write inside of these fields and when we do, this will add the <meta> tags to our page. This gives your editors control over what gets printed in those tags and (eventually) what can be shown in the Facebook link preview.
But we can also set some defaults. For instance, there's a lot options in the 'Advanced' section. Some of these fields we may never use, so let's turn them off and configure some others.
Configuring our Metatag Field
A new option appears on the Configuration page when we go to the Search and Metatag section. Click that and go to the Settings tab at the top of the page.
Hiding the Advanced Section
On that page, we get a list of different entities, including the content type that we just added the field to. Opening that section, it shows the Basic, Advanced, and Open Graph areas we saw before. Because none of them are checked, they all appear, but if we check the boxes next to Basic and Open Graph, now only those two sections will appear on our content type.
Hard-Coding Defaults
There are some Metatag fields that we probably don't expect our editors to fill out or have to change. So, we can set the default. For example, if we have an Article content type, we probably want to set the Facebook Open Graph og:type value to article. To change this:
- Go to Configuration > Search and Metatag
- Scroll to the Content section and click Edit
- Open the Open Graph section and in the Content type field, type article
- Click Save
Now, the og:type meta tag will be filled in automatically with the value article. This works for a value that remains constant, but what about fields that change on every piece of content, like the Title field?
Setting Dynamic Defaults with the Token Module
First, install and enable the Token module.
To set the Facebook Open Graph tags to match what we add in our content, we have to use the Token browser at the top of the page to select the field value we need. In this example, we'll set the og:title to match the node title:
- Open the Open Graph section and click on the Title field, making sure your text cursor is on the field
- Scroll to the top of the page and click Browse available tokens. A draggable modal window will appear
- Open the Nodes section
- Click on
[node:title]
This will insert [node:title]in the Title field, automatically putting in that piece of content's Title. You can repeat this for other fields.
A Note on Images
One of the Open Graph tags you probably want to automatically fill in is the og:image field. When configuring the default for this with the Token module, it might be tempting just to click on the image field on your content type, such as [node:field_image].
This won't work. We need the URL of the image, and this token does not provide that.
Instead, you have to open the triangle beside the field, which reveals the different available Image Styles. Open the appropriate style, and get the URL of it, which appears like so: [node:field_image:large:url].
Wrapping Up
Setting up sensible defaults for your content editors is a great idea, and the Metatag module lets you get very specific with the data. And of course, these fields are editable on the content in case your editors do need to override them.
To get more in-depth web development training, check out our training page.