2 min to read
How to generate preview links
Using meta tags
Share
Copy to clipboard
Have you ever wondered that if you share a link in the whatsapp, telegram, and in social media platforms how you will get the description and image related to the website? and one more thing, do you know how search engines parse the data in your websites and show it in the search results according to it.
Meta tags are the things which will do these things. The minimal way of creating the meta tags are
<meta charset="UTF-8">
<meta name="description" content="Tech news">
<meta name="keywords" content="Devs, Krate, DevsKrate, Tech">
<meta name="author" content="Puneeth">
The below are Open Graph protocol, which enables any web page to become a rich object in a social graph(mainly used by social media).
<meta property="og:title" content="Generating Preview Links" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://DevsKrate.com" />
<meta property="og:image" content="http://DevsKrate.com/image.webp" />
<meta property="og:description" content="A tech website for developers, where you get everything about tech" />
Twitter uses open graph, but for gettings previews in the cards and to be more specific, twitter has it’s own meta tags. You can see how your preview works in twitter at “Twitter link preview”
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@DevsKrate" />
<meta name="twitter:creator" content="@puneeth" />
<meta property="og:url" content="https://DevsKrate.com" />
<meta property="og:title" content="DevsKrate - Tech for everyone" />
<meta property="og:description" content="Your description here" />
<meta property="og:image" content="https://DevsKrate.com/images/" />
For more information on the twitter cards, visit “Twitter cards”
Whatsapp, Telegram, Linkedin and other major social platforms uses the opengraph tags for the preview generation.
Official debuggers:
There is tool by google called Structured Data Testing Tool, which is used to know what information is parsed.
