Search code examples
prerendernetlifyfacebook-opengraphreact-helmet

OG tags not working with react-helmet and Netlify


I cannot for the life of me figure this out. The following site is hosted on Netlify and prerendering is enabled. When inspecting the page, all of the OG tags are correct. These tags are injected using react-helmet.

https://browniepoints.africa/opportunities/volunteer-at-a-soup-kitchen-every-week-on-thursdays

When scraping the above URL on the Facebook debugger, it responds with:

The following required properties are missing: og:url, og:type, og:title, og:image, og:description, fb:app_id

The only one of those errors/warnings that should be there is the app_id, which I don't care about.

I've waited well over 48 hours for caches to clear, I've tried scraping with query strings appended to the URL, and the images have absolute URLs. But not even the description tag is pulling through.

Can somebody that uses react-helmet and Netlify please shed some definitive light onto this problem?


Solution

  • This is related to a known prerendering issue.

    My fix was to remove the <!DOCTYPE html> declaration from the index.html file as a temporary workaround until the above issue is resolved.