How to implement Open Graph Protocol

Open Graph Protocol

What is Open Graph Protocol

Open Graph Protocol enables any web page to become a rich object in a social graph. When you share your website on the social media platform, it will display the title, description, and the preview image.

Open Graph Protocol sample

 

How to implement Open Graph Protocol

To implement this metadata you need some basic coding knowledge. But I promise this will be easy to understand. Let’s look at all the properties available.

Required Metadata
  • og:title – The title 
  • og:type – The type of content such as website, article, books, movies, 
  • og:image – The image URL
  • og:url – The canonical URL / the content URL

Example

<meta property=”og:title” content=”Oren Digital: I&#039;m a digital media specialist based in Singapore since 2007.” />

<meta property=”og:type” content=”website” />

<meta property=”og:url” content=”https://www.oren-digital.com/” />

<meta property=”og:image” content=”https://www.oren-digital.com/wp-content/uploads/2019/09/facebook-featured.jpg” />

 

Optional Metadata
  • og:audio – A audio URL
  • og:description – A description of your content
  • og:determiner – The word that appears before this object’s title in a sentence. 
  • og:locale – The language format, usually is en_US or en_GB
  • og:locale:alternate – An array of other locales this page is available in.
  • og:site_name – Your site name
  • og:video – A video URL
Example

<meta property=”og:audio” content=”https://www.oren-digital.com/wp-content/uploads/2019/09/audio.mp3” />

<meta property=”og:description” content=”Hello! I&#039;m Seng Yi, a digital media specialist based in Singapore since 2007. I love spending time reading up on digital media-related stuff to keep myself up to date.” />

<meta property=”og:determiner” content=”the” />

<meta property=”og:locale” content=”en_GB” />

<meta property=”og:locale:alternate” content=”fr_FR” />

<meta property=”og:locale:alternate” content=”es_ES” />

<meta property=”og:site_name” content=”Oren Digital” />

<meta property=”og:video” content=”https://www.oren-digital.com/wp-content/uploads/2019/09/video.mp4” />

 

How to clear your metadata cache

If you have updated your code but the change is not reflected what you can do is clear the metadata cache. Facebook has a debugger page call Sharing Debugger. All you have to do is to key in the URL in the Debug box.

sharing debugger sample

Share

facebook icon twitter icon linkedin icon what app icon

Comments