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:imageog: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: