html - Meta tags for URL with description and image (In Skype, Discord)

Question

Welcome To Ask or Share your Answers For Others

html - Meta tags for URL with description and image (In Skype, Discord)

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - Meta tags for URL with description and image (In Skype, Discord)

When someone sends a link in Skype or Discord, it can show an image and description, for example:
Skype (Img + Descr)
Discord (Img + Descr)

I think it's because of <meta> tags in the HTML <head> element. But HTML supports hundreds of <meta> tags... I found this page on GitHub, Link: https://gist.github.com/lancejpollard/1978404 And that's so many tags. Is there someone who knows which tags are used to provide these images and descriptions on Skype and Discord?

I tried adding some meta tags, favicon, and title, but it doesn't work and I don't know which <meta> tags I need.

Code I tried:

<title>Weird Website</title>
<meta name="description" content="Ehm.. weird website"/>
<meta name="url" content="http://www.weirdwebsite.idk/">
<link rel="icon" href="favicon.ico" type="image/x-icon" />

And it looks like this...

Skype is taking the <title> contents but missing the image:
Skype (Title of page)

Discord only shows a basic link:
Discord (Only URL)

Does anyone know how to automatically add image and some text when a link is shared in these apps? (btw zzz.com isn't my website, only for example)

Thanks,
Oliver.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:40:07+0000

<meta property="og:title" content="Site Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://my.site.com" />
<meta property="og:image" content="http://my.site.com/images/thumb.png" />
<meta property="og:description" content="Site description" />
<meta name="theme-color" content="#FF0000">

<!-- Include this to make the og:image larger -->
<meta name="twitter:card" content="summary_large_image">

And the image displayed as the link preview on Skype is the thumb image specified in og:image (that is not available anywhere else on the page).

Keep in mind that Skype may also cache information.

Categories

html - Meta tags for URL with description and image (In Skype, Discord)

html - Meta tags for URL with description and image (In Skype, Discord)

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags