Coffee Space


Open Graph

Preview Image

Previously I discussed doing some search engine optimization, to help search engines pick up the site a bit more and for people to find content. This is a quick discussion on how that is achieved (or attempted).

What Is?

Allowing Open Graph to introduce itself:

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.

While many different technologies and schemas exist and could be combined together, there isn’t a single technology which provides enough information to richly represent any web page within the social graph. The Open Graph protocol builds on these existing technologies and gives developers one thing to implement. Developer simplicity is a key goal of the Open Graph protocol which has informed many of the technical design decisions.

As I understand it, Facebook created some new standard a while back to give those “link previews” on their website, which requires a small amount of content (such as an image and some text) to bait a user into clicking them. While it is possible to pull out this information by default (and most social sites do attempt this), it usually pulls out the wrong information as it doesn’t understand the content correctly.


This standard asks you to add a few more metadata blocks in your page’s header, which they scan for when people paste links to your site. The most basic ones are:

If you can’t provide all of these, it’s almost not worth trying to support any as they’ll struggle to make a proper object. These are some others that I recommend setting as during testing they are used regularly:


Of course for this site, I just expanded the ever increasing build script (that is now too long to even post here). An example for this page (at the time of writing) is:

0001 <meta property="og:title" content="Open Graph" />
0002 <meta property="og:url" content="" />
0003 <meta property="og:image" content="" />
0004 <meta property="og:type" content="article" />
0005 <meta property="og:description" content="Previously I discussed doing some search engine optimization[..]" />
0006 <meta property="og:locale" content="en_GB" />
0007 <meta property="og:audio" content="" />

As you can see, I also provide the audio that is generated for each page. I don’t believe that social media sites actually make use of this additional information, but my intention is to perhaps make life easier for say a blind viewer or some crawler.


After I release my new project, in theory website traffic should increase (if my ideas about large numbers of links is correct). I have already seen a small up-take - perhaps search engines have already begun caching the new page formats.