the image that will be shown is [the openGraph image](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image). So link it inside your meta tags and the correct image will be visible

do I need do the twitter one mentioned in the docs or just openGraph?

you can add both (make the same) or only use the openGraph image. It doesnt really matter when you don't share it on twitter

i see. and when you say meta tags, where are those for a next project. ive only done vanilla html/css before. I also want this image for the website as a whole. Maybe one day ill different ones per page

you can export a specific variables called metadata inside each page. So add this variable to your page and add your openGraph image there:

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '...',
  description: '...',
}
 
export default function Page() {}

And do I just throw the file with the name in public and do the meta files go like this in the main layout file?

oh i see

i just want one social image for the whole website. is there an easier way

i see

are you using the app router or the pages router?

this is the easiest way: https://nextjs-forum.com/post/1308857154903609415#message-1308861548181323800 (<---- click)

app

perfect just did

Will this be good? @B33fb0n3

the open graph image looks right. This issue is resolved like that.

However you need to learn the fundamentals first. For example: there is no head inside the app router. So learn the fundamentals first directly here: https://nextjs.org/learn

Can you link specifically the head stuff? I have an entire working app i feel like i know the fundamentals for the most part

read this part: https://nextjs.org/docs/app/building-your-application/optimizing/metadata

perfect thank you!

happy to help

@B33fb0n3 I see! I added this to my meta in my root layout.