CODEWITHSUNDEEP
reactjsfacebook-opengraphreact-helmet
user.io
user.io

Reputation: 466

React CRA - meta og tags for specific page (Spring Boot)

We want links to be shared across social media which display a preview image of the page. This image can be different every time. Our app is a CRA with client side rendering and a Java Spring Boot backend.

Is this possible? SEO isn't important to us at all as it's a B2B product. I've added React Helmet to the page in question. I've read that SSR is used for this but our application isn't built or intended to be this way so we would like to keep it as is. We only need the OG meta tag for one page so it's more of an exception than a rule. A contrived example is below:

const userData = useGetUser();

<Helmet>
    <MainContainer>
        <Box>{userData?.name}</Box>
        <Box>{userData?.image}</Box>
     </MainContainer>
     <meta property="og:image" content={userData?.image} />
</Helmet>

If anybody knows how to get this working I'd really appreciate it. Thanks all!

Upvotes: 0

Views: 1001

Answers (1)

Janez Kuhar
Janez Kuhar

Reputation: 4266

React Helmet adds the following attribute at the end of every tag that you specify as a child of the <Helmet/> component:

data-react-helmet="true"

So this:

<Helmet>
  <meta property="og:image" content="image link" />
</Helmet>

renders into:

<head>
  <meta property="og:image" content="image link" data-react-helmet="true">
</head>

This invalidates the meta tags for the online sharing preview debug tools, such as Facebook's Sharing Debugger and https://www.opengraph.xyz/.

If this attribute is removed, the link to your site displays as expected in the above mentioned validation tools.

There's an open issue to remove this attribute from the tags generated via React Helmet.

Upvotes: 1

Related Questions