Gaurab Wagle

# How to make your website look good while sharing the link? A link preview guide with "The Open Graph protocol" ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1761066009434/9271bf8c-a1f0-4020-845f-1c6edf2fb17d.png align="center") From above ^^ to below \\ ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1761065962193/5ad177b6-40bb-472b-b380-6efcc14d2b15.png align="center") ## “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](https://ogp.me/#types) your object, e.g., "[video.movie](http://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/](https://www.imdb.com/title/tt0117500/)". * og:description - A one to two sentence description of your object. ```xml #Example code I wrote for my portfolio website //compare this to the attached image // twitter has it's own way of writing, see on it's docs Gaurab Wagle

``` Compare: ***<meta property="og:title" content="Gaurab's portfolio website" />*** to the title that is showing ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1761065962193/5ad177b6-40bb-472b-b380-6efcc14d2b15.png align="center") 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](https://ogp.me/) Like/Comment if you want to know how to setup dynamic og’s for different pages.