Communicate across the channels - the Open Graph protocol
By James Chapman on
Have you ever added a link to a site into Facebook, LinkedIn or Twitter? This blog explains how to ensure the right text and image appear when attaching a link.
Yeah ok... we're going to go into the "nuts and bolts" a little bit with this blog, but it will be well worth the effort. Trust me!
So what am I talking about?
Well, it's probably easier if I start with a real world example. A big part of social networking is the ability to share web pages with your network. Social networking platforms such as Facebook, LinkedIn and Twitter allow you to easily link useful articles, much like our blog articles! He he.
When you "attach" a link using LinkedIn, it helpfully goes off to the link you attach and collects information about the article you're linking to. Common information it comes back with includes:
- Page title
- Summary text
- Thumbnail image
See below an example of the information LinkedIn collects, in this case about our Guide to Drupal for Agencies blog.
Unfortunately, social media platforms are not always as clever as we might hope and return undesirable data. An example could be that it returns your generic meta description for the site which is unrelated to the page itself.
So how do you ensure the right information is collected from your site? This is where the Open Graph protocol comes in.
The Open Graph Protocol (OGP)
Without going too deep into the theory behind behind it, the OGP provides a common format that many social media platforms work to. This certainly helps us developers, as it means we don't have to implement several methods of manipulating the information gathered, to cover the various platforms.
Ok, so let's see some code examples, wahay!
Open Graph tags
To use Open Graph "tags", ask your developer to add one or more of the following to the "head" of your website code.
Basic metadata
- og:title - the title of the web page you are linking to
- og: type - the type of content contained within the article, this page would be "blog"
- og:image - the full path to the thumbnail image
- og:url - the full "canonical" web address to the page
Here's what they look like in situ:
<html prefix="og: http://ogp.me/ns#">
<head>
<title>Page Title</title>
<meta property="og:title" content="Page Title" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="http://www.example.co.uk/page-name" />
<meta property="og:image" content="http://www.example.co.uk/thumbnail>
</head>
Optional metadata
The following metadata is optional but we recommend using them:
- og:description - this ensures you get the correct text with your link
- og:site_name - the name of your site, i.e. Development Done Right
- og:locale - the locale the code is written in
- og:video - a direct website address to a video if applicable
- og:audio - a direct website address to an audio file if applicable
There's plenty more, but we won't go into those today.
Summary
We totally recommend adding Open Graph metadata to your site. It helps ensure social media platforms work with your web content, not hinder it.
Ask your web developer to add these for you. Ideally, if you use a content management system (CMS), it's adviseable to be able to manage all of the above on a per-page basis.
If you're having trouble, we'd be happy to help.