I have an application built with React.js and I want to customize the look of the URL that is shared on social media using HTML meta tags.
I have tried to use react-helmet and react-meta-tags that are used for adding meta tags, but they didn't help.
Is the only solution to this problem to use server-side rendering or there is a way to handle it from front-end only?
Not sure about what you trying to achieve. The concept divides into two choices. Server side or client side.
If client side you should be comfortable with react-helmet. What I think about why you can't accomplish react-helmet is you didn't remove static meta codes from your index.html. What happening is you might are getting client side dynamic meta that is generated from helmet but being replaced by already static meta tags from index.html. So remove them and it should work fine...
Now come to dynamic SEO for OG (Open Graph) Meta Tags without SSR. There are few packages that pre render dynamic meta tags that might help to solve your problems without SSR implemented on your React App.
Hope you found them useful. cheers...!!!