Pneuma Design

Open Graph: What is it and How is it Shaping the Web

By Keaton Bishop-Marx Published 30 April 2016

The web is continually becoming a more social habitat. It’s getting to the point where brands and their social media are all but indiscernible. The Open Graph Protocol is what gave rise to this capability, and now it’s being used in more ways and by more websites than we’ve ever seen before.

The web is continually becoming a more social habitat. It’s getting to the point where brands and their social media are all but indiscernible. The Open Graph Protocol is what gave rise to this capability, and now it’s being used in more ways and by more websites than we’ve ever seen before.

What is Open Graph?

Open Graph is defined by ogp.me as the following:

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.

Simply put, Open Graph lets developers determine how web content will be presented on various social media platforms—but it also lets social media platforms and major websites connect that content to people.

The aim of this protocol: To make the web a richer and more intuitive place for individuals and brands.

How does it work?

Open Graph is a protocol, meaning that it’s a set of rules rather than an entirely new syntax. Open Graph uses <meta> tags with the property=”…” and content=”…” attributes to define what elements of websites are presented in social media.

What developers see

Implementing Open Graph is as easy as writing HTML. If we wanted to advertise a camera lens coffee mug, we would need to implement the following markup in the <head> of the page:

<head>

<meta property=”og:title” content=”Camera Lens Coffee Mug”>
<meta property=”og:site_name” content=”http://www.amazon.co.uk/dp/B0058CW9UPO/rel=tsm_1_fb_lk”>

<meta property=”og:description” content=”This exceptional cups you can make it appear as if you were a true professional photographer. The original coffee mug that is a real camera lens looks deceptively real and the cover of the lens cup, you can also use it as Keksschale. The stylish coffee cup as a digital camera lens will excite al…”>

<meta property=”og:image” content=”http://ecx.images-amazon.com/images/I/411KNEY1xoL._SX466_.jpg”>

</head>

A complete list of uses Open Graph protocols can be found on the Open Graph website.

What users see

When users opt to share web content via social media, they’re given a window similar to this one:

http://www.ukwda.org/uploads/images/blog/blog-facebook-open-graph-1.png

Image courtesy of The UK Web Design Association

Who Uses Open Graph?

Several of the big social media platforms use the Open Graph protocol, but not all of them use it as a primary method for displaying web content.

  • Facebook – the Company that pioneered Open Graph. Facebook also introduced Open Graph Stories , a new way to share rich content.
  • LinkedIn
  • Not Twitter! – Twitter has a proprietary format called Twitter Cards.
  • Google+ – Except Google+ prefers Schema.org, which isn’t exactly comparable to Open Graph, but serves a similar purpose. If Schema.org standards are not detected, Google+ falls back to Open Graph.
  • Pinterest
  • Instagram

Open Graph Since 2010

I found a TIME magazine article from 2010 that, while parts were somewhat laughable, certainly hit the proverbial nail on its proverbial head.

[Open Graph is] a bit confusing in principle, but it's simple in implementation. Facebook wants all Web pages to have its "Like" button, which it released at the conference. (TIME.com implemented the buttons in advance — you can see one at the top of this page.)

The article goes on to predict the future:

Each time you indicate that you like something, that information is fed back to Facebook and then to the website you're on. If enough of your friends like the same restaurant on Yelp, you'll see that on Yelp and when you log in to Facebook.

Since this time, Open Graph has spread like wildfire, and the example with Yelp here really only begins to scratch the surface. We see this kind of intuitive decision making when we log in to sites with our social media accounts—the next thing we know, Facebook is showing advertisements based on what we did on that website.

What Comes Next?

I predict that the Internet of Things (IoT) will be the next step in technology’s evolution. If this is the case, these devices will depend heavily on the kind of data that Open Graph provides.

Personal Assistant devices like Amazon Echo and Jibo will be able to access your social media platforms to suggest reminders and record calendar events. Smart appliances will learn your schedule based on these same criteria, and perform their respective operations more intuitively. Car head units will notify you of nearby events, restaurants, attractions, and other points of interest, complete with social media data like ratings and pricing.

The future of Open Graph is a smart one.