open-graph-protocol-matt-oneill.jpg

The Open Graph Protocol - The Basics

A basic implementation of the Open Graph Protocol enables the connection of web content with social media distribution mechanisms

2 minute read

Background

Created by Facebook, Open Graph Protocol (OGP) is a set of instructions, implemented via metadata, that enables a mechanism for controlling how web content is displayed on social media. Introducing simple meta tags on a webpage facilitates the customisation of content attributes when sharing on social media, a link to a webpage, i.e. As a social media post on LinkedIn, Facebook and Twitter.

There are core attributes, optional attributes and advanced implementations as part of the specification.

With and without

Without:

When sharing a link without the core attributes, the link does its best to find the data required, populating title and description from already available meta data which may or may not be appropriate. Often, the values of such attributes are not the friendliest.


With:

 


With data available as a rich object - title, image, description, URL and image appear in a shareable format which is friendly. Using the advanced attributes can give more control and more options to the user when sharing, i.e. Multiple images to choose from.

Implementation

For a basic implementation, the following meta tags inside the website <head> will enable a friendly experience when sharing a link to the web page:

<meta property="og:title" content="My Webpage Title" />
<meta property="og:description" content="This is my webpage description" />
<meta property="og:url" content="http://mattoneill.london" />
<meta property="og:image" content="http://mattoneill.london/media/1042/matt-oneill-web-ui-mon.jpg" />

The tags need to be rendered server side, not injected with JavaScript. The best implementations will enable content authors to configure the values of the tag attributes, but should have a fallback as non-mandatory fields.

Particularly on blog sites, these tags should be automatically populated so that when users share the URL they have a friendly format share link.

 

Share this page and try it out!

More information on the full specification here


  • Serverside
  • Development
  • Digital Marketing
  • Best Practice
  • HTML

Leave a comment

Submit