To provide a rich preview of a web page and to be used as a universal standard throughout the web.
Each webpage has a bunch of HTML
<meta> tags which are used to create the preview/thumbnail of a website.
Example of one such website
<html prefix="og: https://ogp.me/ns#"> <head> <meta property="og:site_name" content="Last Ent's Thoughts"> <meta property="og:title" content="My Frontend Adventure (2021)"> <meta property="og:url" content="https://last-ent.com/posts/my-frontend-adventure-2021/"> <meta property="og:description" content="What is the best way to get started with Frontend development in 2021? Brief summary of what I found and what I intend to do next."> <meta property="og:type" content="article"> <meta property="article:published_time" content="2021-01-13T00:15:05+01:00"> <meta property="article:tag" content="from-scratch"> <meta property="article:tag" content="frontend"> <meta property="article:tag" content="nightmare"> <\head> <\html>
There are four required properties per page
og:type- Defines the
typeof webpage/"object" and might imply other fields that might be required.
og:url- Canonical URL to be used as permanent ID.
There are a few but I will mention that two that interest me.
og:description- One or two sentence description of the object
og:site_name- Useful to display overall site name.
Object Type is defined as
<meta property="og:type" content="XYZ" />
There are standard and user-defined types. User defined types require namespace as well as definitions
<head prefix="my_namespace: https://example.com/ns#">
<meta property="og:type" content="my_namespace:my_type" />
Object Types can be grouped into verticals. Following are some of the global ones available
Open Graph has a set of predefined types for all the attributes.
Open Graph consumers will only read contents of
<head> </head> for Open Graph
It might be possible for Servers to inject the dynamic content before actual response.