Sharing on social media, the URL does not render any meta data

Question

We have built a project (Web Application) in React .net core using react in client-side rendering.

We\'ve used react-helmet for dynamically assigning meta tags.

Answer 1

The meta tags for Open Graph need to be present in the HTML which is sent back to the client when fetching a URL. Browsers or bots will not wait until the app is rendered on the client side to determine what the metatags are - they will only look at the initially loaded HTML.

If you need the content of your Open Graph metadata to be dynamic (showing different content depending on the URL, device, browser etc.) you need to add something like react-meta-tags into your server code.

There are no type definitions available for any of the react meta tags libraries, but you can add your own. It can be a bit tricky, but check out the official documentation and the templates they have provided to get started.

If you don't need it to be dynamic, you could add the tags into the static parts of the -tag in your index.html.