I know sometime you might have wondered how websites such as GitHub and Dev 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.
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
<!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)
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
Top comments (0)