Next.js Discord

Discord Forum

MetaData

Unanswered
vsw posted this in #help-forum
Open in Discord
vswOP
I'm confused by the docs, how do I add an image to my metadata?

I want it to show in a discord embed

92 Replies

Northern Rough-winged Swallow
image to metadata ?
or do you mean some metadata to image ?
could you explain?
Northern Rough-winged Swallow
can you ellaborate on your usecase
vswOP
export const metadata = {

  applicationName: "sosa",

  title: "sosa",

  description: "merging your online presence into a single page.",

  keywords: ["biolinks", "biolink"],

  icons: [{ rel: "icon", url: "/favicon.ico" }],

  authors: [{ name: 'Jake' }, { name: 'Vince' }, { name: 'Jacques' }],

};
i want to add an image to my metadata
so that
when i send my url
https://example.com
theres
an image
in the embed
Eurasian Wigeon
the embed image
vswOP
ye
Northern Rough-winged Swallow
do you mean a favicon ?
@Northern Rough-winged Swallow do you mean a favicon ?
vswOP
no, thats the site icon right?
Eurasian Wigeon
nah he means
https://google.com
Northern Rough-winged Swallow
yes
Eurasian Wigeon
the image
except that one doesn’t have an image lol
vswOP
i want an image here
Eurasian Wigeon
https://github.com/masonbesmer/masonbesmer.me
that image
vswOP
ye
Northern Rough-winged Swallow
so you want a image as a link ?
vswOP
if that's what it requires
im not sure what i need
I have the img in my src/assets/
Eurasian Wigeon
ah
it’s called
opengraph
and that’s how you set it up
Northern Rough-winged Swallow
cant help much seeing as im new to nextjs and i dont get the issue
vswOP
yeah so
i landed on this page
in the docs
export const metadata = {
  openGraph: {
    title: 'Next.js',
    description: 'The React Framework for the Web',
    url: 'https://nextjs.org',
    siteName: 'Next.js',
    images: [
      {
        url: 'https://nextjs.org/og.png', // Must be an absolute URL
        width: 800,
        height: 600,
      },
      {
        url: 'https://nextjs.org/og-alt.png', // Must be an absolute URL
        width: 1800,
        height: 1600,
        alt: 'My custom alt',
      },
    ],
    locale: 'en_US',
    type: 'website',
  },
}
this snippet shows
vswOP
an openGraph object with images right
ah ok
no worries
ill have a look
Eurasian Wigeon
they seem to have it working
vswOP
oh wait yeah thats perfect
its prefixed
lovely
thank you
Northern Rough-winged Swallow
ya ive posted a issue someone help me too 🙏🏻 🙏🏻 🙏🏻 🙏🏻 🙏🏻
Madeiran sardinella
export const metadata = {
openGraph: {
images: "/path/to/file.jpg",
// Other props...
}
}
@Madeiran sardinella export const metadata = { openGraph: { images: "/path/to/file.jpg", // Other props... } }
vswOP
ill try this again if the above solution doesnt work
yeah it didnt
@vsw ill try this again if the above solution doesnt work
Madeiran sardinella
Sure, that always worked for me
Eurasian Wigeon
I think he meant my solution
lol
vswOP
ah so
it did "work"
but
https://sosa.lol
not in embed
not sure why
might be a discord cache thing
Eurasian Wigeon
remove the ?dhdjfnfkcksksnsn crap after .png?
Madeiran sardinella
Can you access to that url on the browser?
vswOP
⚠ metadataBase property in metadata export is not set for resolving social open graph or twitter images, using "http://localhost:3000". See https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase
i get this
it doesn't break the app but it's just hinting ive set it up wrong
Madeiran sardinella
Maybe you should add metadataBase prop in the metadata exported object in the root layout
vswOP
export const metadata = {

  applicationName: "sosa",

  title: "sosa",

  description: "merging your online presence into a single page.",

  keywords: ["biolinks", "biolink"],

  icons: [{ rel: "icon", url: "/favicon.ico" }],

  authors: [{ name: 'Jake' }, { name: 'Vince' }, { name: 'Jacques' }],


};
does it matter where
like
in the example
they defined
at the top
ig this is fine
seems to of worked
@vsw Click to see attachment
Madeiran sardinella
Idk, it looks ok
vswOP
https://sosa.lol
still no
oh well
Eurasian Wigeon
Might be one of those things that discord caches for a few hours before checking again
Try changing the text and see if it changes immediately
If not then there’s the problem
Madeiran sardinella
It works in WhatsApp
Eurasian Wigeon
yes so it’s cached
give it a while
Madeiran sardinella
Yeah, I think so