I want to add some opengraph tags for my create-react-app powered website. The problem is that when I add them dynamically with something like Helmet they are not parsed correctly. Are there any good workarounds for this?
You're managing a web application built with React and You may have many routes on your application, such as an /about page, or /post/:id pages where each post has a different content.
For each route, you want to set different meta tags, like the title, description, OG image, and other such things.
You might have used something like React Helmet to manage your meta tags within your React code. But the problem is that when a page or post gets shared with Facebook or Twitter, the crawlers don't run the JavaScript on your site. They simply take the metatags from the initial bundle.
This won't do, because you obviously don't want to have the same metatags for every page on the entire application. So, you need to dynamically set the meta tags server-side, so that the correct previews get shown.
Here is an article which gives you step by step process of achieving same: Link
And a demo repo here: Repo Link
Hope this is helpful!