How to make your website look good while sharing the link? A link preview guide with "The Open Graph protocol"
From above ^^ to below \
“It is basicaly a link preview, like you get a small card like view of the link that you are sharing”
Case*: If you are asked to improve the* SEO of your website, you will have to provide specific metadata and other dynamic meta tags for better results. Open Graph makes it possible for you by providing this link preview.
(Notice the og prefix added to each of them. This ‘og is what helps Open Graph protocol know that the developer wants to convert his webpage into a graph object.)
og:title - The title of your object as it should appear within the graph.
og:image - An image URL which should represent your object within the graph.
og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
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/".
og:description - A one to two sentence description of your object.
#Example code I wrote for my portfolio website
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
//compare this to the attached image
<meta property="og:title" content="Gaurab's portfolio website" />
<meta property="og:description" content="By clicking onto the website you know a little about me, my life and my projects. Let's make some projects together !!"/>
<meta property="og:image" content="https://avatars.githubusercontent.com/u/41935487?v=4" />
<meta property="og:url" content="https://gaurabme.vercel.app/" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Gaurab's portfolio website" />
<meta name="twitter:description" content="By clicking onto the website you know a little about me, my life and my projects. Let's make some projects together !!" />
<meta name="twitter:image" content="https://avatars.githubusercontent.com/u/41935487?v=4" />
// twitter has it's own way of writing, see on it's docs
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link href="/src/style.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gaurab Wagle</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Compare: <meta property="og:title" content="Gaurab's portfolio website" /> to the title that is showing
For a better understanding please refer to this official website and get detailed understanding.
I will further upload the blog about writing the dynamic og tags because as our app grows bigger, we need dynamic descriptions.
Click: Open Graph Protocol, og, official website
Like/Comment if you want to know how to setup dynamic og’s for different pages.
