One of the strangest bugs I've had to deal with was ensuring that content was "likeable" and "shareable" on Facebook. The [Ushahidi platform][u] is an amazing tool for sourcing data from the crowd in crisis situations. However, when we deployed it for [eq.org.nz][eq], there was a problem. When someone tried to share the link on Facebook, the blurb looked something like this: > The content of this site is licensed under a Creative Commons Attribution 3.0 New Zealand License. To satisfy attribution requirements, include "Source: http://eq.org.nz" in your derived content. This website is provided as is, and your use of it is exclusively at your own risk. ... Fairly uninviting discovering us via social media. In order to get around this, we actually introduced a paragraph tag that wouldn't be rendered by browsers, but would be picked up by Facebook's crawler. Our HTML source looks like this:
As it turns out, like many things in life, there's probably a better way to do it. Introducing the Open Graph Protocol ----------------------------------------------------- Sidebar: graph means a mathematical graph, not a visual one. Now, if you studied mathematics or computer science at university, you may not have a clue what's intended here. In mathematics, graphs represent networks. The upshot here is that computers can understand the relationships between all the bits of content on the web. The Open Graph Protocol is a way to add metadata, content about your content, to Facebook. It uses the `` tag within HTML. Let's look through an example from the Internet Movie Database: The Rock (1996) ... ... Uh... what? Let's look over things line by line. This tells computer that the HTML uses the Open Graph Protocol. You can expand the pieces out: `xmlns` means XML [namespace](http://en.wikipedia.org/wiki/Namespace), `og` means open graph, and the weblink is just an official reference to the protocol itself. It's actually a dead link, but will mean something to computers (e.g. Facebook) that know about the protocol. The Rock (1996) This is actually an example of what we want to avoid. We have the title, "The Rock" and information about the movie together. This looks ugly when shared through social media. With decent metadata, we make `` refer to just to titles. This would make for a much more pleasant browsing experience: This is the meat of the example. Here, we describe to Facebook what to put on its pages. We have a link to the right URL, not some crazy long one. We have a link to the right thumbnail. We have the title in isolation. We're also telling Facebook that we're referring to a movie, which might make searching easier. However, we still haven't solved our problem. We need to add one final piece: Success! Once you've added the `og:description`, it'll be used. Sweet. Doesn't this already exist? -------------------------------------- Yes. There have been other efforts in this area. The most common are known as [Dublin Core][http://en.wikipedia.org/wiki/Dublin_Core] and [FOAF][http://en.wikipedia.org/wiki/FOAF]. However, using multiple standards one one website is complex. You can see the result of when each of these standards are meshed together, on slide 16 of [this presentation][fb]. Diving deeper ------------------- The [Open Graph Protocol's website][og] provides a great overview of the features. You can learn add to tell Facebook the location, how to describe your page as a product page or add contact information. There are client libraries for several programming languages and a few tools, such as Wordpress. Open Graph Protocol will follow a similar path as KML has in the geospatial field. When Google acquired Keyhole, there were several competing standards. With Google's dominant market position, it was able to establish KML as the de facto standard. It is a simpler standard than competing alternatives. But, more importantly, everyone in the geospatial field needed to be able to talk to Google Earth and Google Maps. That's where the consumers were. Open Graph Protocol will do a similar thing. There are other ways to add metadata to web pages. Dublin Core and FOAF have a long tradition in the semantic web community. However, Facebook can exert its market dominance to make this simpler standard adopted. Businesses finally have a reason to get involved with semantic content. That's where the consumers are. [u]: http://www.ushahidi.com [eq]: http://eq.org.nz [og]: http://ogp.me/ [fb]: http://www.scribd.com/doc/30715288/The-Open-Graph-Protocol-Design-Decisions
