reactjsgatsbyfacebook-opengraphserver-side-renderingshare-open-graph

Dynamic Open Graph meta tags in a static GatsbyJS site hosted on S3


The app can take users's info and signup his account. Then the user can post his referral link, like www.site.com/username, to social media and a unique image (having user's name and username), generated for each user on sign up, should be displayed as Open Graph image on social platforms.

I have tried using Gatsby Helmet Plugin but apparently, the meta tags added by helmet are not added to the index file that can be scraped by crawlers.

The only possible way I can see for now is migrating my app to NextJS and that's going to be quite some work. Is there is any way I can make it work in Gatsby? Any kind of help will be appreciated.

Thank You.

Edit: Another possible way could be to deploy this gatsby app to a server, render the app on the server, and then returning the rendered response. Basically converting it to a server-side rendered app. Is this possible or is there any good way of achieving it?


Solution

  • TL;DR

    Netlify


    So basically Netlify has it's own "Prerendering" feature. I attached my Github CI/CD with Netlify, turned that Prerendering option on, and it worked like charm.

    Thanks to google and all those random articles that pointed me to Netlify. Lambda@edge is another thing that people are using for similar server side rendering where they point CloudFront directly with Lambda@Edge instead of S3. I might shift my web app to Lambda@Edge if I got that to work, but for now, Netlify won!