Next.js Discord

Discord Forum

Social Images when Sharing URL?

Answered
DylanDev posted this in #help-forum
Open in Discord
How do I add a social image that shows when people share my link?
Answered by B33fb0n3
or add them directly inside your routing (also for each page where you want different images)
View full answer

21 Replies

@DylanDev How do I add a social image that shows when people share my link?
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
@DylanDev 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
@B33fb0n3 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
@DylanDev 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
or add them directly inside your routing (also for each page where you want different images)
Answer
perfect just did
Will this be good? @B33fb0n3
@DylanDev Will this be good? <@301376057326567425>
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
happy to help
@B33fb0n3 I see! I added this to my meta in my root layout.