i want to setup an image for my default page of my app, how?

Answered

American Robin posted this in #help-forum

American RobinOP

2023-09-17T15:07:15.000Z

i wanted to setup an image for my default page of my app, but i dont know how. could anyone help me and tell me how i could set up an image for the default route? "/" ?

thanks for ur help!

Answered by American Robin

export const metadata = {
  openGraph: {
    title: "title",
    description: "description",
    images: [
      {
        url: "/public/opengraph-image.jpg",
        width: 1800,
        height: 1600,
        alt: "alt text",
      },
    ],
  },
};

is this wrong, maybe the url?

View full answer

56 Replies

@American Robin i wanted to setup an image for my default page of my app, but i dont know how. could anyone help me and tell me how i could set up an image for the default route? "/" ? thanks for ur help!

@ts-ignore

2023-09-17T15:07:29.000Z

image?

you mean opengraph image?

American RobinOP

2023-09-17T15:07:37.000Z

yes

@American Robin yes

@ts-ignore

2023-09-17T15:07:58.000Z

[here](https://nextjs.org/docs/app/api-reference/functions/generate-metadata#opengraph)

American RobinOP

2023-09-17T15:08:24.000Z

does this work

@ts-ignore

2023-09-17T15:08:29.000Z

yes

American RobinOP

2023-09-17T15:08:31.000Z

on the default "/"

route too

@ts-ignore

2023-09-17T15:08:36.000Z

yes

add it in app/page.tsx

American RobinOP

2023-09-17T15:09:18.000Z

i had the export const metadata on the layout.tsx

do i have to move it to the page.tsx?

@American Robin i had the export const metadata on the layout.tsx

@ts-ignore

2023-09-17T15:09:51.000Z

metadata will set it globally and then you can override it on the per page basis

American RobinOP

2023-09-17T15:10:00.000Z

oh i see

so in my case

since i dont have any routes

layout.tsx is fine ?

@American Robin layout.tsx is fine ?

@ts-ignore

2023-09-17T15:10:32.000Z

well you need a route to make this work

American RobinOP

2023-09-17T15:10:46.000Z

im only using "/"

@American Robin im only using "/"

@ts-ignore

2023-09-17T15:10:55.000Z

yeah that is also a route

add it in page.tsx

American RobinOP

2023-09-17T15:11:01.000Z

oke i see

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',
        width: 800,
        height: 600,
      },
      {
        url: 'https://nextjs.org/og-alt.png',
        width: 1800,
        height: 1600,
        alt: 'My custom alt',
      },
    ],
    locale: 'en_US',
    type: 'website',
  },
}

this one right?

@American Robin tsx 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', width: 800, height: 600, }, { url: 'https://nextjs.org/og-alt.png', width: 1800, height: 1600, alt: 'My custom alt', }, ], locale: 'en_US', type: 'website', }, } this one right?

@ts-ignore

2023-09-17T15:11:43.000Z

yeah

American RobinOP

2023-09-17T15:12:05.000Z

since my image would be in the public folder, i have to paste the url to it right

@American Robin since my image would be in the public folder, i have to paste the url to it right

@ts-ignore

2023-09-17T15:12:14.000Z

yeah

American RobinOP

2023-09-17T15:13:43.000Z

how would it look, when i only use one image?

images: {
   ...
}

like this?

no array?

@American Robin tsx images: { ... } like this?

@ts-ignore

2023-09-17T15:14:33.000Z

nope, just add one entry in the array

American RobinOP

2023-09-17T15:15:15.000Z

do i have to only add the title, description and images? to the openGraph object

@American Robin do i have to only add the title, description and images? to the openGraph object

@ts-ignore

2023-09-17T15:15:47.000Z

for image, no

American RobinOP

2023-09-17T15:16:08.000Z

so only the image would be enough?

@American Robin so only the image would be enough?

@ts-ignore

2023-09-17T15:16:31.000Z

well if you just need image, then yes

if you want a proper embed like [This](https://nextjs.org) then you need to add them

American RobinOP

2023-09-17T15:17:01.000Z

ah i see

oke ill try it

to see if it works i have to deploy it right

cant use it from localhost

or can i?

@ts-ignore

2023-09-17T15:17:28.000Z

you can use ngrok

American RobinOP

2023-09-17T15:17:34.000Z

ngrok?

@American Robin ngrok?

@ts-ignore

2023-09-17T15:17:48.000Z

https://ngrok.com/

American RobinOP

2023-09-17T15:32:09.000Z

i tried it, but it didnt work

i mean the title and description are showing

but the image isnt

American RobinOP

2023-09-17T15:33:10.000Z

export const metadata = {
  openGraph: {
    title: "title",
    description: "description",
    images: [
      {
        url: "/public/opengraph-image.jpg",
        width: 1800,
        height: 1600,
        alt: "alt text",
      },
    ],
  },
};