How to add opengraph image for every route?
Answered
Netherland Dwarf posted this in #help-forum
Netherland DwarfOP
Hello, I able to add an op image on the main route, but if i share an about page i dont see the og image. I am reading their docs:
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image
But i dont understand exactly what they mean by segement- does this mean i have to add an or image at every route path?
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image
But i dont understand exactly what they mean by segement- does this mean i have to add an or image at every route path?
Answered by joulev
app/opengraph-image.png is only for /. Similarly, app/foo/opengraph-image.png is only for /foo and not /foo/bar.
To add a global og image I just put it in public/opengraph-image.png and use the metadata object syntax to declare it https://nextjs.org/docs/app/api-reference/functions/generate-metadata#opengraph
To add a global og image I just put it in public/opengraph-image.png and use the metadata object syntax to declare it https://nextjs.org/docs/app/api-reference/functions/generate-metadata#opengraph
3 Replies
Netherland DwarfOP
how i am adding an or image is by adding opengraph-image.png in my /app directory for next.js 14
@Netherland Dwarf Hello, I able to add an op image on the main route, but if i share an about page i dont see the og image. I am reading their docs:
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image
But i dont understand exactly what they mean by segement- does this mean i have to add an or image at every route path?
app/opengraph-image.png is only for /. Similarly, app/foo/opengraph-image.png is only for /foo and not /foo/bar.
To add a global og image I just put it in public/opengraph-image.png and use the metadata object syntax to declare it https://nextjs.org/docs/app/api-reference/functions/generate-metadata#opengraph
To add a global og image I just put it in public/opengraph-image.png and use the metadata object syntax to declare it https://nextjs.org/docs/app/api-reference/functions/generate-metadata#opengraph
Answer
Netherland DwarfOP
Okay thank you- yes i wanted to generate a global og image