score:2

With React client side rendering, you should manage documents head with react-helmet.

import React from 'react';
import { Helmet } from 'react-helmet';

class Application extends React.Component {
  render() {
    return (
      <div className="application">
        <Helmet>
          <meta charSet="utf-8" />
          <title>My Title</title>
          <link rel="canonical" href="mysite.com/example" />
        </Helmet>
        ...
      </div>
    );
  }
}

Other possible solution with SSG or SSR rendering check frameworks like Next.js and Gatsby.js

score:7

You need to set the Open Graph Meta tags: https://ogp.me

React renders on the client per default. In some cases (for example when sharing links on facebook), they don't render your site to detect these meta tags. In this case you need Server-Side-Rendering (e.g. use NextJS or https://prerender.io)


Related Query

More Query from same tag