How to make a link preview for discord

Question

Im very new to html and im wondering how to do people do this with their site? https://i.leastrio.net/CVUCo5PIR6.png I would like to do this with my site but im very confused. Thanks!

Answer 1

Technical Background

Many social network such as Discord generate link previews by grabbing the metadata of the web page. Most of the time they grab the following metadata.

<meta property="og:type" content="website">
<meta property="og:url" content="https://linkfork.co/">
<meta property="og:title" content="LinkFork | Link Preview Customization">
<meta property="og:description" content="LinkFork lets you shorten, and customize how your link will appear when shared on social media, for free.">
<meta property="og:image" content="https://linkfork.co/images/poster.png">

So to change this for your website you need to be able to modify the HTML source code. Each social network grabs different metadata. Therefor you need to modify it for the all social network you are targeting.

Easy Solution

One easy solution is using a service that allows you to customize the link preview for any link such as LinkFork. LinkFork will allow you customize the image, title, and description of the link preview. It will generate a shorten link that you can post to any social network and have consistent link preview for all your social media.