CODEWITHSUNDEEP
html
Leastrio
Leastrio

Reputation: 228

How to make a link preview for discord

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!

Upvotes: 16

Views: 34113

Answers (1)

TuanGeek
TuanGeek

Reputation: 821

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. This will ensure consistent link preview for all your social media.

Upvotes: 27

Related Questions