Add specific image and title to Facebook sharing link dynamically in react js and Next js Application

Question

My react js web application contains a dynamic list of articles and I am trying to share the current link (which is article details page) on Facebook.I've spent an hours to find a way to send/share an image but did not found the proper solution using which I can share Images and Title of article along with Link. anyone have an idea ? Please suggest me some example links or ideas to implement this in my react js application.

Answer 1

Any Link you share MUST have OG tags in the initial HTML source. Dynamic Tags are not possible, Facebook ignores JavaScript. With Next.js, you can use SSR (Server Side Rendering) to avoid this. Every article must have a static URL with specific OG tags.

Alternatively, you can use https://prerender.io/ for this. But since you are using Next.js already, i would rather go for a custom server with SSR.