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
tagOpen 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"/>
property
attribute contains the name of the OG tag. OG tags always have the prefix og:
.content
attribute contains the content appropriate for the OG tag used.These are the required OG tags:
og:title
= Title of your page. e.g.<meta property="og:title" content="My Cooking Recipes"/>
og:type
= Type of your webpage. Examples of type include website
, article
, video
, etc.<meta property="og:type" content="article"/>
og:url
= URL of the current page<meta property="og:url" content="https://www.dasdocs.com/mycookingrecipes.html"/>
og:image
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:
og:image:width
= Defines width of the image<meta property="og:image" content="300"/>
og:image:height
= Defines height of the image<meta property="og:image:height" content="300"/>
Other OG tags that you can add include:
og:description
= A description of your page:<meta property="og:description" content="A page to share my recipes"/>
og:locale
= Add this add locale-related information. The format is locale_TERRITORY
:<meta property="og:locale" content="en_US"/>
You can test your webpage with OG tags via tools provided by popular social media sites: