ReactJS Helmet meta tags not working forTwitter Cards and Telegram previews

Question

This is my current configuration that adds the meta tags:

 {data? <Helmet>
    <title>Site- {data.name ? data.name : ""}</title>
    <meta charSet="utf-8" />
    <meta name="twitter:card" content="summary_large_image" data-react-helmet="true" />
    <meta name="twitter:site" content="@user" data-react-helmet="true" />
    <meta name="twitter:creator" content="@user" data-react-helmet="true" />
    <meta property="og:type" content="website" data-react-helmet="true"/>
    <meta property="og:url" content={document.location.href} data-react-helmet="true" />
    <meta property="og:title" content={data.name ? data.name : ""} data-react-helmet="true" />
    <meta property="og:description" content={data.description?.en?.slice(0, 65) + "..."} data-react-helmet="true" />
    <meta property="og:image" content={data.image?.large} data-react-helmet="true" />
  </Helmet>
    : null}

data is a hook that is populated when the request from the database is done.

Trying on https://cards-dev.twitter.com/validator returns Unable to render Card preview. Any idea how it can be fixed?

Answer 1

I think its issue of CSR (Client Side Rendering). Twitter card fetch meta of link with JavaScript disabled so you need to fill meta on server response in that case you need SSR (Server Side Rendering).I recommend to try to use nextjs.org instead

Answer 2

I think you need to use different meta tags for twitter and maybe other sites, as link preview can be customized by the sites.

For example, this is saying that you need to use twitter:title, twitter:description and twitter:image.

I personally suggest to use react-seo-meta-tags with helmet as they seem to handle those kind of difficulties. You can check their official site.