Open Graph Protocol

Open Graph (OG) is an internet protocol which standardizes the use of metadata within a webpage to represent the content of a page. These metadata like name, thumbnail helps social media sites like Twitter to give a nice thumbnail for your webpage.

meta tag

Open Graph tags are implemented in the HTML page using meta tag. All OG tags follow the below convention:

<meta property="og:name" content="some content"/>

List of OG tags

These are the required OG tags:

<meta property="og:title" content="My Cooking Recipes"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content=""/>


og:image links to an image that you want to show on the social media preview of your page.

<meta property="og:image" content="/pasta.jpg"/>

You can add more metadata about this image via the following image-related OG tags:

<meta property="og:image" content="300"/>
<meta property="og:image:height" content="300"/>

Other OG tags that you can add include:

<meta property="og:description" content="A page to share my recipes"/>
<meta property="og:locale" content="en_US"/>

Testing OG tags

You can test your webpage with OG tags via tools provided by popular social media sites: