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>
);
}
images
and is a valid image that can be accessed.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?
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.