Optimising content previews for Drupal 8 using Opengraph

When we share our content on social media we have one goal in mind - getting people to click on the link.

I want to explore a few ways we can improve the click through rate for the content we share in order to get more traffic directed to our website.

Social Media posts

First I'll show you an example of what we don't want - a link posted on social media and displayed without pulling in any associated content:

http://www.codepositive.com/articles/specification-example

This is what that link should look like when you post it on social media:

Opengraph

Improve click rate

The reason we need to make sure we have these optimised previews available is to improve the click rate. We do this by associating an image, title and description so that the link is far more interactive.

The objective is to add context to what we are sharing through useful information. An image is always a good place to start as people tend to look at the image before they read the text, so it works as a hook.

We have the image as one hook and then the title as a second hook. Choosing what we put into these fields is very important. We want to attract an audience to our pages, but we don't want to mislead in terms of what the content is about.

It's important to find a balance between the two - use attractive, interesting headlines and images, but make sure they fit the subject matter.

How to setup with Drupal:

Opengraph is the standard used by social media sites to produce optimised previews of the content being shared.

Social media that uses Opengraph:

  • Facebook
  • Pinterest
  • LinkedIn
  • Twitter
  • Google Plus

For Opengraph to work the following 4 tags must be in the header of your HTML. All of the values for these tags should be unique to each page.

  • og:title
  • og:type
  • og:image
  • og:url
  • og:description (not required)

To achieve this in Drupal we use the Metatag module which allows us to easily assign values to a specific tag. Use tokens wherever possible to make sure each tag has a unique value for each page it is on.

og:title is the title of the current page. In Drupal simply use the [current-page:title] token.

og:type is the type of business but generally 'Website' is the standard value. Follow the link if you'd like to find out about the available types.

og:image is the image that appears in the preview.

og:url is the url of the current page. In Drupal simply use the [current-page:url:absolute] token.

og:description is a short description of the page.

Technical notes:

When configuring your meta tags for Opengraph we highly recommend using tokens where possible.

We also recommend adding two fields to all node types - a field for the og:image and another for og:description. This is so that you can use a token for the meta tag which points directly to this field. In doing so you avoid having a page with no content for these meta tags.

Another reason for doing this is that you don't have to have this description and image displayed on the page, which means you can really optimise the text to be used just for the purpose of a description. The same applies for the image, you may have multiple images on a page but none that describe the page as a whole.

Choosing an image just for that  purpose can achieve a higher click rate.

When choosing an og:image make sure to consider these things:

  • Does it add context to the page title and description?
  • Generally flat design and material design work well for this type of image as they keep detail even when resized.

The Next Step

If you'd like to discuss how to use social media marketing to engage with your audience, or improve the effectiveness of social media on your Drupal website get in touch.