Social share with helmet does not provide card

Question

I'm trying to get social share cards to populate across discord, facebook, etc and I've not had success in getting the card to populate.

This is my import import { Helmet } from 'react-helmet-async';

In my view component I have the following

export default function SharePage({ }) {
const [images, setImages] = useState([]);

  return (
    <Box>
      <Helmet>
        <title>Hots&Cots</title>
        <meta name="description" content="Hots&Cots: Your source for Barracks and DFAC Reviews" />
        <meta name="keywords" content="military, barracks, dfac" />
        <meta name="author" content="Hots&Cots" />
        <meta property="og:title" content={`${renderFacilityType(hash, shareData)}`} />
        <meta property="og:description" content="Hots&Cots: Your source for Barracks and DFAC Reviews" />
        <meta property="og:image" content={`${images[0]}`} />
        <meta property="og:url" content="https://feed.hotscots.app/" />
        <meta name="twitter:title" content={`${renderFacilityType(hash, shareData)}`} />
        <meta name="twitter:description" content="Hots&Cots: Your source for Barracks and DFAC Reviews" />
        <meta name="twitter:image" content={`${images[0]}`} />
        <meta name="twitter:card" content={`${images[0]}`} />
      </Helmet>
</Box>
);


}

• I've confirmed in the console that an image is obtained in images and is a valid image that can be accessed.
• I've hardcoded image from the internet unrelated to my work
• I've tried checking on social share preview https://socialsharepreview.com/?url=https://hots-cots-web.vercel.app/share#b44224

Social share does give me the following, but not sure how to resolve this especially since og:description is present.

Image
 og:image can't be found at the defined URL
 The ratio of your og:image isn't optimal 
 Image size is optimal (<8mb)

 The og:description metatag missing

Any suggestions to move forward?

Answer 1

if you are just using reactjs then it wont work. web scrapers dont execute javascript. I think you have to do server side rendering to acheive this.