Insert Open Graph meta data

[ryancwalsh]

Learn about Open Graph https://ogp.me/. Edit the tag (in a NextJs way) of the web-app/pages/certificate/[tokenId].tsx page to include social metadata to make that page generate a preview when people share it on social platforms. E.g. https://www.linkedin.com/post-inspector/ and https://cards-dev.twitter.com/validator will show you what sharing any particular URL will look like. Since we're working on localhost and don't automatically have a publicly-viewable URL, you'll probably need to generate a temporary public URL for your machine using localtunnel https://theboroer.github.io/localtunnel-www/ or https://github.com/fusebit/tunnel or something similar (in order to use those sharing-preview tools).

Check that the sharing buttons at http://localhost:3000/certificate/103216412112497cb6c193152a27c49a successfully post to Twitter and LinkedIn. (See note above about localtunnel.) Currently https://near-certification-tools-tpq1.onrender.com/certificate/103216412112497cb6c193152a27c49a doesn't look like it attaches the image to Twitter yet, probably because the https://near-certification-tools-tpq1.onrender.com/api/cert/103216412112497cb6c193152a27c49a.png URL that it shares doesn't yet have an Open Graph meta data that specifies that it's an image.

[ryancwalsh]

@rashaabdulrazzak I assume we can close this issue now? It seems like from your testing, this feature works now, right?

[rashaabdulrazzak]

yeah the feature works now so we can close it