Thumbnail image
Answered
Shaurya posted this in #help-forum
ShauryaOP
these are all the tags
<meta charset="utf-8">
<title>Shadow | Shaurya Chauhan</title>
<meta name="description" content="Hi! I'm Shaurya Chauhan, a full-stack developer. I build web applications that delight users.">
<meta name="application-name" content="Shaurya Chauhan's Portfolio">
<meta name="keywords" content="shaurya,chauhan,shadow,shaurya chauhan,shadow shaurya,shadow shaurya chauhan,shaurya chauhan shadow,shaurya shadow,shadow chauhan,chauhan shadow,shadow shaurya chauhan,shadow shaurya,shadow chauhan,shaurya shadow">
<meta name="theme-color" content="#1990ff">
<meta name="color-scheme" content="dark light">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="category" content="Portfolio">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Shadow | Shaurya Chauhan">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta property="og:determiner" content="auto">
<meta property="og:title" content="Shadow | Shaurya Chauhan">
<meta property="og:description" content="Hi! I'm Shaurya Chauhan, a full-stack developer. I build web applications that delight users.">
<meta property="og:url" content="https://shadowop.dev/">
<meta property="og:site_name" content="Shadow | Shaurya Chauhan">
<meta property="og:locale" content="en_US">
<meta property="og:country_name" content="India">
<meta property="og:image" content="http://localhost:3000/overview.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Shadow | Shaurya Chauhan">
<meta property="og:email" content="blues9524@gmail.com">
<meta property="og:email" content="shauryac88@gmail.com">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@Shaurya1575">
<meta name="twitter:creator" content="@Shaurya1575">
<meta name="twitter:title" content="Shaurya Chauhan">
<meta name="twitter:description" content="Hi! I'm Shaurya Chauhan, a full-stack developer. I build web applications that delight users.">
<meta name="twitter:image" content="http://localhost:3000/overview.png">
<meta name="twitter:image:width" content="1200">
<meta name="twitter:image:height" content="630">
<meta name="twitter:image:alt" content="Shadow | Shaurya Chauhan">
<link rel="icon" href="\favicon.ico" type="image/x-icon" sizes="any">36 Replies
what is the
og:image for when you deploy the app?ShauryaOP
lemme see that
@joulev what is the `og:image` for when you deploy the app?
ShauryaOP
it's
https://shadowop.dev/overview.png, and when I open the url it open properly alsowell it works now
that was just caching issues
ShauryaOP
no I mean the thumbnail image
like the youtube one
this image is called opengraph image (OG image)
so if you want to edit that image, just edit the
openGraph.images field@joulev https://shadowop.dev/
ShauryaOP
it just keeps loading thoung and doesn't show the image, is that because of the image size?
@joulev i see it working normally though?
ShauryaOP
oh, it shows properly on you, maybe I've to restart discord or something
yeah it works normally now
this is exactly how it should work yes
for youtube's case it is
<meta property="og:image" content="https://www.youtube.com/img/desktop/yt_1200.png">which is that image you see there
@joulev so if you want to edit that image, just edit the `openGraph.images` field
ShauryaOP
openGraph: {
type: "website",
images: [
{
url: "overview.png",
width: 1200,
height: 630,
alt: "Shadow | Shaurya Chauhan",
},
],
},the overview.png image is at the correct place, though, I want to set the logo.png at the thumbnail
@Shaurya tsx
openGraph: {
type: "website",
images: [
{
url: "overview.png",
width: 1200,
height: 630,
alt: "Shadow | Shaurya Chauhan",
},
],
},
but I already have the image in the images field though, do I have to change some type or something?
the overview.png image is at the correct place, though, I want to set the logo.png at the thumbnail
by thumbnail you mean this OG image right? that shows up in discord embed
in that case just edit the url
url: "/logo.png"change
width and height accordingly@Shaurya yes, but it shows my image down, and not at the top right
maybe try a square og image?
@joulev maybe try a square og image?
ShauryaOP
oh, changing the dimensions automatically changes that?
idk, ask discord, discord dictates how it embeds website previews
you need to check on all social media sites
twitter has that
twitter:card which allows you to control this@joulev twitter has that `twitter:card` which allows you to control this
ShauryaOP
yea I have that,
twitter: {
card: "summary_large_image",
images: [
{
url: "overview.png",
width: 1200,
height: 630,
alt: "Shadow | Shaurya Chauhan",
},
],
},@Shaurya yea I have that, ts
twitter: {
card: "summary_large_image",
images: [
{
url: "overview.png",
width: 1200,
height: 630,
alt: "Shadow | Shaurya Chauhan",
},
],
},
I have this for twitter but it doesn't show the image though, or maybe it's correct it just not shows for me because of some caching issues or something
well i cant say i know this well, i just have a preset and reuse it everywhere
export const metadata = {
metadataBase: new URL("https://joulev.dev"),
title,
description,
robots: { index: true, follow: true },
twitter: { card: "summary_large_image", creator: "@joulev_3" },
openGraph: {
title,
description,
url,
siteName: title,
images: [
{
url: "https://static.joulev.dev/og?title=Vu+Van+Dung&subtitle=Software+developer",
alt: title,
width: 1200,
height: 630,
},
],
type: "website",
},
alternates: { canonical: url },
icons: {
icon: [
{ url: "https://static.joulev.dev/images/favicon.svg", type: "image/svg+xml" },
{ url: "https://static.joulev.dev/favicon.ico", type: "image/x-icon", sizes: "any" },
],
apple: [{ url: "https://static.joulev.dev/images/apple-touch-icon.png", sizes: "180x180" }],
},
};this works for me on all social media sites that i test
ShauryaOP
oh
thanks for the help :D