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
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 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.
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" />
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