Open Graph Meta Tags
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 :