Welcome!

to the Open Graph Testing site
created by Wolf Software.

Logo

Facebook introduced Open Graph in 2010. It promotes integration between Facebook and other websites by allowing them to become rich “graph” objects with the same functionality as other Facebook objects. The Open Graph protocol was originally created at Facebook and is inspired by Dublin Core, link-rel canonical, Microformats, and RDFa.

Put simply, a degree of control is possible over how information travels from a third-party website to Facebook when a page is shared (or liked, etc.). In order to make this possible, information is sent via Open Graph meta tags in the <head> part of the website’s code.

Now, other social media sites also are taking advantage of social meta tags. All of the other major platforms, Twitter, LinkedIn, and Google+, recognize Open Graph tags. Twitter actually has its own meta tags for Twitter Cards, but if Twitter robots cannot find any, Twitter uses Open Graph tags instead.

All of Open Graph META tags are prefixed with og:, then continue with the specific property to be set. The data relative to the property set goes within the content attribute:.

<meta property="og:{tagName}" content="{tagValue}"/>

Now lets look at a real world example of a basic set of Open Graph tags that are used by the majority of sites. For this example we will use the tags that are actually implemented on this site.

<meta property="og:site_name" content="Open Graph Tester" />
<meta property="og:title" content="Open Graph Tester" />
<meta property="og:description" content="Open Graph Tester - Description." />
<meta property="og:type" content="website">
<meta property="og:url" content="http://www.opengraphtester.com/" />
<meta property="og:image" content="http://www.opengraphtester.com/assets/images/logos/og-image.png" />
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="256">
<meta property="og:image:height" content="256">

The above example demonstrates what we would suggest to be the minimum set of tags you should add to your site if you are going to add Open Graphs. If you would like to know more about the Open Graph tags that can be set please refer to the protocol page.