How to make your website look good while sharing the link? A link prev

From above ^^ to below \

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.

How to make your website look good while sharing the link? A link preview guide with "The Open Graph protocol"

Comments

More from this blog

Success in Getting Real Users Failure in Solving Real Problem

You Don't Need S3 to Back Up Your Home Server or Production Server

How I Had SSH Access But No Internet. Port forwarding 80 into server, cuts off the internet in server

Understanding: OS, UNIX, Kernel, Shell and Terminal and make your terminal attractive

Understanding CSR, SSR, and SSG — What Actually Happens Behind the Scenes

Command Palette

Comments

More from this blog

“It is basicaly a link preview, like you get a small card like view of the link that you are sharing”