CODEWITHSUNDEEP
htmlmeta-tags
ZeRealOne
ZeRealOne

Reputation: 163

Html image in a meta tag

I'm using discord, and I saw a lot of people do that thing (the big square in the image). I tried to do that in html with meta tag, but it came out with the result (image number 2). I really want to know how to do this, can someone please help me?

Image number one | image number two

And there is the code I use for doing this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  <meta property="og:title" content="An Image By ItsJustOne#9817">
<meta property="og:description" content="Remember always that there is an end in the tunnel 🥰">
<meta property="og:image" content="https://cdn.discordapp.com/banners/907132383814377502/4aca154cd6040b31aacaaf781877f121.png?size=1024">
    <meta name="viewport" content="width=device-width">
    <title>Why You Are Here?</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    Why You Are Here?
    <script src="script.js"></script>
  </body>
</html>

The image I'm trying to use is my discord banner.

Upvotes: 5

Views: 25909

Answers (2)

pabios
pabios

Reputation: 77

A nice tool that allows you to visualize what it looks like live and generate the corresponding meta tags for you. for several social media.

for facebook this is it

  <head>
    <title> the tools are https://metatags.io/ </title>
    <!-- Open graph / facebook --->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://some-url" />
    <meta property="og:title" content="title to display" />
    <meta property="og:description" content="description to display" />
    <meta property="og:image" content="https://some-image.png" />
  </head>

Upvotes: 1

ZeRealOne
ZeRealOne

Reputation: 163

It was 4 months ago, and I forgot to write here that I found a solution a week after asking here!

The solution is simple, using other meta tags, not the regular. The twitter meta tags.

<meta name="twitter:title" content="Title">
<meta name="twitter:description" content="Cool description">
<meta name="twitter:image" content="the image link">
<meta name="twitter:card" content="summary_large_image">

Replace there the title, description, and the image link.

Upvotes: 10

Related Questions