Open Graph Meta Tags

Praaveen Vr
praaveen
Published in
2 min readJun 14, 2022

--

represent the content of a page

Basic Metadata

Open Graph is an internet protocol that was originally created by Facebook to standardize the use of metadata within a webpage to represent the content of a page.

  • og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
  • og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
  • og:image - An image URL which should represent your object within the graph.
  • og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "https://www.imdb.com/title/tt0117500/".

As an example, the following is the Open Graph protocol markup:

<head>
<meta property="og:url" content="https://www.byeindonesia.com/">
<meta property="og:type" content="website">
<meta property="og:title" content="Bye Indonesia - Renunciation of Indonesian Citizenship Guide 2021">
<meta property="og:description" content="Renunciation of Indonesian citizenship process changed in 2020. This site aims to answer all your questions on the new process.">
<meta property="og:image" content="https://www.byeindonesia.com/og-bye-indonesia.png">
</head>

Once added, by using url representation of the content can be previewed using opengraph
Output :

During development ngrok can be used

Put localhost on the internet
ngrok is the fastest way to put your app on the internet. Demo websites without deploying.

Download ngrok

Referrence :

--

--