Control Your Social Media Branding With Open Graph Meta Tags


We invest a lot of time and energy into developing our online brands. We try to shape the way that the world sees us by telling stories with the content we create and share. Our websites are designed to be an embodiment of the way we want audiences to see us.

That process of shaping a brand is fairly easy on platforms we control. But the nature of modern online marketing is such that we don’t have complete control of many of the channels that our audiences choose to use to engage with our brands. Social media is at the heart of much of modern branding, and while we can exercise some level of control over how our own Facebook pages and Twitter streams appear, we have little influence over the way our content appears when others choose to share it.

The Open Graph Protocol allows brands to embed information in their web pages that gives social media sites hints about how we would like our content to appear.

What Is The Open Graph Protocol?

Web pages are built mostly out of HTML, CSS, and often some JavaScript. So long as developers adhere to the rules of these tools, they are free to build pages in any way they like. The multitude of properly — and improperly – coded pages makes it difficult for social media sites to pick out the salient elements to display when content is shared.

The Open Graph Protocol, originally developed by Facebook, gives developers a way to let social media networks know what a webpage is, what its title is, what images to display, and so on.

Understanding the underlying concepts isn’t necessary to use Open Graph, but simply, social media networks see web pages as objects in a graph. A graph is a set of connected objects. The Open Graph Protocol is used to specify properties of those objects with tags, much as search engines use the <description> meta tag to populate the snippet that appears in search engine results pages.

While Facebook and its competitors are usually quite good at figuring out the relevant properties themselves, frequently they can’t, so without Open Graph tags you might end up with this:

Example: Without Example: Open Graph Meta Tags

Instead of this:

Example: Open Graph Meta Tags

Using Open Graph Tags

The Open Graph Protocol is quite extensive, so I’ll focus on a typical example here: that of a blog article.

Open Graph tags are placed in the <head> section of a web page. For a blog article they would look something like this:

 <meta property="og:type" content="article" />
 <meta property="og:site_name" content="My Awesome Blog" />
 <meta property="og:title" content="A Post On My Awesome Blog" />
 <meta property="og:image" content="" />
 <meta property="og:url" content=" />
 <meta property="og:description" content="This is blog article about something by someone" />
 <meta property="article:published_time" content="2013-10-31" />

It isn’t necessary to use all of the tags, but at the very least, the type, title, image, and description tags should be used, so that Facebook and the other networks that support Open Graph, including Twitter and Google+, can create a richer sharing experience.

Open Graph supports many different objects and properties. If you want to see the full range, take a look at the official OG protocol site.

Twitter Cards

While Twitter does support OG tags, it has its own proprietary system that you’ll also need to make the most of the rich media facilities Twitter offers. I won’t go into too much detail about Twitter cards here, but I’ve written about them before, so if you need more information, check out this article.

Open Graph On WordPress

Facebook released an official Open Graph plugin for WordPress, which will save you having to alter your theme files to include the markup. The Yoast SEO plugin also supports Open Graph as well Twitter Cards.

Implementing Open Graph on your site will help you to take control of your branding on social media, while at the same time providing a richer experience for users.

Image source: Flickr