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?