React Open Graph Preview not working in Facebook debugger

Question

I am using react, and using react-helmet for generating dynamic meta tags, its meta tags showing in developers elements sections and not showing in a page source

When I deploy my app to the server and try to share my image, the open graph preview is not showing.

And when tested in Facebook Debugger it is showing warning :

Warning: The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.

I am trying to update meta tags when I get a response from api. I want

Code :

import { Helmet } from 'react-helmet';

<Helmet>
                <meta name="title" content={title}/>
                <meta name="description" content={description}/>

                {/*  Non-Essential, But Recommended */}
                <meta property="og:site_name" content="Temp Title!"/>

                {/*  Non-Essential, But Required for Analytics */}
                <meta property="fb:app_id" content="4537338XXXXX" />

                {/* Open Graph / Facebook */}
                <meta property="og:type" content="website" />
                <meta property="og:url" content={window.location.href} />
                <meta property="og:title" content={title}/>
                <meta property="og:description" content={description} />
                <meta property="og:image:type" content="image/jpeg" />
                <meta property="og:image:secure_url" content={'https://images.unsplash.com/photo-1613415959194-0cb09aa135f1?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'} />
                <meta property="og:image" content={'https://images.unsplash.com/photo-1613415959194-0cb09aa135f1?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'} />

</Helmet>

Answer 1

*Be aware that Facebook ignores JavaScript, so the og:image tag must be in the original source and not dynamically added via JavaScript.

It is because your app is rendered on the client side, so when Facebook crawler visits your website, it will get all the original metatags before your javascript had a chance to put new metatags in the headers. The solution is to either manually put metatags in the index.html file or you could create a React Static App or use React-Helmet with Prerender.io.

*Also note you can put static html files in the "public" folder in a React website and these can contain the og:image and etc tags and redirect to a dynamic page, eg /shopping/coffee/morroco redirects to /shopping/coffee/#morroco. Unfortunately each time you post a link to FB, the crawler will check/update its cache so you do need something static at the endpoint (you can't upload the html files, force a batch FB link/cache update, then delete the html files).

*Editor.