javascriptreactjsreact-helmet

Social share with helmet does not provide card


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>
);


}

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?


Solution

  • 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.