Setup
It's a React App with React Helmet. It's deployed with Docker on a VPS and is exposed with Nginx. Cloudflare is used for SSL and as a Prerender.io worker.
Problem explaination
I make a change to my meta tag. Then I deploy it to a VPS. Then I force recache in Prerender.io GUI. Then I click on the "Scrape Again" button inside Sharing Debugger. And here's the problem. Sharing Debugger doesn't fetch updated OpenGraph tags (I'm able to check this with "See exactly what our scraper sees for your URL" link).
However... according to Facebook Crawler docs I can reproduce crawler call with:
curl -v --compressed -H "Range: bytes=0-524288" -H "Connection: close" -A "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" "$URL"
By doing this I get what I want - an updated OG tags. What am I missing here? Shouldn't that curl response be on the Sharing Debugger website?
Code
Basically, there are two components used to setup the Helmet tags. First is a wrapper for every component (but the next one - WorkDetails) it looks like this:
export function Public({ component }: Props) {
const handleClientStateChange = (newState: any) => {
setTimeout(() => {
window.prerenderReady = true;
}, 1000);
};
return (
<ThemeProvider>
<Helmet onChangeClientState={handleClientStateChange}>
<meta property="fb:app_id" content="1234567890" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.example.eu" />
<meta property="og:site_name" content="EXAMPLE" />
<meta property="og:description" content="EXAMPLE DESC" />
<meta property="og:image" content="https://example.com/foo.png" />
<meta property="og:title" content="EXAMPLE" />
</Helmet>
<QueryClientProvider>
<ParallaxProvider>
<MetaContextProvider>
<Box>
<Menu />
{component}
</Box>
</MetaContextProvider>
</ParallaxProvider>
</QueryClientProvider>
</ThemeProvider>
);
}
Second is a detailed view of an article:
export const ArticleDetails: React.FC<Props> = () => {
const handleClientStateChange = (newState: any) => {
setTimeout(() => {
window.prerenderReady = true;
}, 1000);
};
return (
<React.Fragment>
{article?.mainPhoto ? (
<Helmet onChangeClientState={handleClientStateChange}>
<meta property="fb:app_id" content="1234567890" />
<meta property="og:type" content="article" />
<meta
property="og:url"
content="https://www.example.eu"
/>
<meta property="og:site_name" content="EXAMPLE" />
<meta property="og:description" content="EXAMPLE DESC" />
<meta
property="og:image"
content={getPath(article.mainPhoto.path)}
/>
<meta property="og:title" content={article?.title} />
</Helmet>
) : (
<></>
)}
{/* other components here */}
</React.Fragment>
);
};
In public/index.html there are no OG tags, just the other ones like title, description or google-site-verification. I had to remove them from there because it caused tags to be duplicated sometimes. It's worth mentioning window.prerenderReady is set there:
<html>
<head>...<script>window.prerenderReady = false;</script></head>
<body>...</body>
</html>
