I have a blog site created using React-v18 and node-js. I have added default meta tags in index.html which shows the link preview when shared on social media sites.
For every article on the blog, I am fetching the article info using APIs and updating title and meta tags dynamically using react-helmet-async.
I can see the title and meta tags getting updated in elements under chrome devtools but when I share the article link on social media, it still shows the default meta tags which was added to index.html.
I tried using two different approaches for updating tags
react-helmet-asyncwhich is updating the tags but adds the updated tags at the bottom of the head section. Also these tags are getting cut-off from the head section. The issue is mentioned here.- To tackle the above issue, I added a script which replaces the content of the tags rather than deleting and placing new tags at the bottom. This made sure that tags wont get cut off.
After going through number of posts online, I got to the following conclusion.
This may not work because my site has Client Side Rendering.
The header management performed by React Helmet is executed by javascript on the client. In other words, we can assume that by the time the crawler grabbed the info, it either hasn’t allowed the javascript to make the change OR it’s simply interpreting the raw html.
Now, the problem is its too late to convert my site to next JS which has SSR.
I would like to know the suggestions for this.