Support Forums

How to preview page content upon sharing a link to your website

Hello, I’m happy with my netlify website. However, when I want to share a link to the home page or one of my website’s blog posts, this is what is previewed :
“React App
luisdevblog.netlify.app • 1 min read
Web site created using create-react-app”

How can I configure my netlify website to display a preview image and some content of the linked page (such as the title of the blog post) when sharing a link?
(I don’t like the shown message at all; would like to replace it with relevant info to he shared link)
Thank you for your support.
My website: https://luisdevblog.netlify.app

Hi @luism,

I believe you wish to add social media previews? In that case, take a look at: https://ahrefs.com/blog/open-graph-meta-tags/

Yes, that’s what I mean! I’m going through the link you shared. Thanks for your help hrishikesh. I’ll reply back if I come up with any other questions.

One more question: how can I make the previewed image be dynamic depending on the link shared? Right now, the homepage (https://luisdevblog.netlify.app/) shows an image I added, but all other links show the same image as well. I would like the post image be previewed when sharing a link for a post. Example, when sharing: luisdevblog.netlify.app/posts/136 I would like the cover image to be shown or something related to the post. Thank you.

You would need to dynamically change the image for each page/route @luism. While not exactly the same Dynamically Render Twitter/Facebook Social Cards and Images With React & Node.js might have some information about achieving this.

Also have a look at prerendering.