Social media share not picking up meta tags in react-app via react-helmet or react-meta-tags

Question

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?

Answer 1

first install: npm install react-helmet --save

and then Add meta tag: like!

 import React from 'react' import { Helmet } from "react-helmet"; class App extends React.Component { render () { return ( <div> <Helmet> <title>App Title</title> <link rel="canonical" href="https://malikgabroun.com" /> </Helmet> </div> ); } };

EXAMPLE:

 import { Helmet } from 'react-helmet'; import React from 'react'; const Seo = ({ title, description, pathSlug, keywords }) => { const url = `https://malikgabroun.com/${pathSlug}` return ( <Helmet htmlAttributes={{ lang: 'en' }} title={title} meta={[ { name: 'description', content: description, }, { name: 'keywords', content: keywords.join(), }, ]} links={[ { rel: 'canonical', href: url, }, ]} /> ); } export default Seo;

For more details go for this link and read it. https://levelup.gitconnected.com/how-to-add-metadata-in-react-using-react-helmet-6dd316d146c2