How to Integrate The Open Graph Protocol with Your Website?

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.

The Basic Metadata

To turn your web pages into graph objects, you need to add basic metadata to your page. We've based the initial version of the protocol on RDFa which means that you'll place additional <meta> tags in the <head> of your web page.

The four required properties for every page are:

og:title - The title of your object as it should appear within the graph, e.g., "Responsive Web Design And Web Development Company | Ingenium Web Solutions".
og:type - The type of your object, e.g., "website". Depending on the type you specify, other properties may also be required
og:image - An image URL which should represent your object within the graph.
og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "http://www.ingeniumweb.com/".

As an example, the following is the Open Graph protocol markup for iNGENIUM Home Page:

<meta property="og:title" data-page-subject="true" content="Responsive Web Design And Web Development Company | Ingenium Web Solutions" />
<meta property="og:type" data-page-subject="true" content="website" />
<meta property="og:site_name" data-page-subject="true" content="Ingenium Web Solutions" />
<meta property="og:locale" content="en_US" /><meta property="og:description" data-page-subject="true" content="iNGENIUM Web Solutions is a responsive web design and web development company who can create a solution that works anywhere, anytime, and on any device. " />

Benefits from using Open Graph protocol on your website

The list of sites and services that pull info from OG tags is growing every day. But some of websites we are already using on the daily basis like Twitter, Facebook, YouTube, LinkedIn, and Google Plus. Right now there is a plethora of services that pull info from OG: tags including major sharing services like ShareThis and Add Tthis. So if you employ easy sharing solutions like ShareThis it’s a good idea to have your OG tags in place. Check with any 3rd party addons, plugins, and services you use to see if they pull data from OG tags.

Even if you don’t use anything that pulls from OG tags it’s still a good idea to implement OG: Tags to help you can control what gets displayed when your content or products get shared. If you don’t use the OG tags then the service will do it’s best to figure out what should be in the description, title, image, etc. and you have to hope the user corrects any mistakes before they share it.