0

I have a Next.js application in which I am having trouble sharing content to Facebook and Twitter. I have added the needed open graph meta tags in the head tags of the document and am using React Helmet to change those meta tags dynamically. If I use the inspector and view the elements and look inside the head I can see the open graph meta tags being changed with the correct information. However when I click to share to Facebook or Twitter, I am not seeing any of the open graph data being inserted into the resulting post or tweet.

Can anyone give me any advice on what is causing this and how I can go about fixing it? I thought it was as simple as just adding the correct meta tags and then sharing but I am having a very difficult time with this. Any help would be greatly appreciated!

navin1551
  • 61
  • 1
  • 9
  • Use the Facebook Sharing debugger https://developers.facebook.com/tools/debug/ or tell us the URL you have a problem with. – WizKid Oct 27 '20 at 19:08
  • Unfortunately I'm running this on localhost :( – navin1551 Oct 27 '20 at 19:13
  • That is your problem. How would Facebook scrape your application if no one from the outside can access it. – WizKid Oct 27 '20 at 19:18
  • Hm so even thought I have some information hard coded into my open graph meta tags, if I try to share content on Twitter or Facebook when I'm running localhost, the open graph data won't populate the post or tweet?? – navin1551 Oct 27 '20 at 19:37
  • 1
    Doesn't matter. Facebook and Twitter need to be able to scrape your page. So localhost will not work – WizKid Oct 27 '20 at 20:15
  • Got it. I'm going to push up my current changes to the dev environment and see if it works – navin1551 Oct 27 '20 at 20:20
  • So after running my url through the Facebook sharing debugger I get back message saying "Can't validate SSL Certificate" and it also says I'm missing og meta tag properties which I have in my code in the head tag. Any advice? – navin1551 Oct 27 '20 at 21:27
  • 1
    Start with fixing the SSL Cert problem – WizKid Oct 27 '20 at 21:30

1 Answers1

0

Expose your localhost app to the world using ngrok. It provides a basic http-https-tcp tunnel without an authtoken. https://www.npmjs.com/package/ngrok

You can do a global install of the package and then it will proxy your localhost with an HTTPS URL. Use your localhost port (example is port 3000).

npm install ngrok -g
ngrok http 3000

You should then be able to use the ngrok URL for site testing.

Buddy Bob
  • 5,829
  • 1
  • 13
  • 44
David Richards
  • 61
  • 6