Your website deserves to look good on social medias
Tags: html, seo, website, frontend
Published: 2024-07-04 12:17:05

I know sometime you might have wondered how websites such as [GitHub](https://github.com) and [Dev](https://dev.to) do to make their image and description appear when you share their links through social medias on even some messaging applications as illustrated here in WhatsApp.

![An overview of how the https://github.com/jay-ike link looks on WhatsApp, showcasing the user avatar and the user bio on the GitHub platform](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ski7ypwuev5u9h9u811k.png)

I have good news for you, it's not that complicated, it's even simple (*not kidding I really mean it*). All what they do is implementing the **opengraph protocol** to make it happen so that social medias robots can parse it to get some information in order to render it that way.

So if you are looking for a quick snippet, you can stop here to grab the following

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <! Other infos of the head goes here -->
    <! -- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://ike-designo-website.vercel.app/">
    <meta property="og:locale" content="en_US">
    <meta property="og:title" content="Designo a digital agency for your digital needs">
    <meta property="og:description" content="With over 10 years in the industry, we are experienced
        in creating fully responsive websites, app design, and engaging brand experiences.
        Find out more about our services.">
    <meta property="og:image" content="https://ike-designo-website.vercel.app/assets/home-og-image.png">
    <meta property="og:image:width" content="1110">
    <meta property="og:image:height" content="610">
    <meta property="og:image:alt" content="the screen shot of the web page at https://ike-designo-website.vercel.app">
</head>

<body>
    <! the body goes here -->
</body>
</html>
```
Now, if you get this far, it means that you're looking for a thorough explanation. As you've seen, everything is listed in the head of the page as metadata. So I will try to explain it step by step.

> **Note**: If you have some knowledge about the meta tag you should've noticed that the **property** attribute is non-standard in the context of HTML. This can be explained by the will to avoid conflicts with the language 

## og:type

This represents the type of content you are providing, in our case it's a website 

## og:url

This is the URL of your website, it will be used by the robot as an identifier of your website

## og:locale

This property is used to provide information about the primary language of your website (for internationalization purpose)

## og:title

The title of the website as it will appear to the potential visitors

## og:description

A short description about the page to give an overview of the content (*it's important to make at most 2 sentences in order to not confuse your potential visitors*)

## og:image
a URL representing the image you want to showcase for your website (*This can be tricky to choose, but if you don't know what to choose, it is better to take a screenshot of your page*)

## og:image:alt

A description of what is in the image, this is very important because it will provide information to people who cannot see or are having difficulties to see your image. So I urge you to never forget this one if you want to provide an image

## og:image:width, og:image:height

Provide information about the number of pixels wide and high of your image. This information is optional, but it's worth providing it

All these data will produce the following result (*this is a site project I've worked on recently*)

![An overview of the landing page of the designo website on WhatsApp when sending the link https://ike-designo-website.vercel.app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3hzgjur7e1sh3hct3igs.png)

To sum up, thanks to the opengraph protocol, we can give an overview of our content when we share our link on social medias. So now it's your turn to make your website look good on social medias.

Thank you for reading, and any feedback is appreciated.

**Further reading**
- [The opengraph protocol documentation](https://ogp.me)