Social Images when Sharing URL?
Answered
DylanDev posted this in #help-forum
Answered by B33fb0n3
or add them directly inside your routing (also for each page where you want different images)
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
@B33fb0n3 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
DylanDevOP
do I need do the twitter one mentioned in the docs or just openGraph?
@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
DylanDevOP
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() {}
DylanDevOP
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
@B33fb0n3 you can export a specific variables called ``metadata`` inside each page. So add this variable to your page and add your openGraph image there:
tsx
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: '...',
description: '...',
}
export default function Page() {}
DylanDevOP
i just want one social image for the whole website. is there an easier way
i see
@DylanDev 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?
are you using the app router or the pages router?
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
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
@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
DylanDevOP
Can you link specifically the head stuff? I have an entire working app i feel like i know the fundamentals for the most part
happy to help