How to fix the Facebook Debugger 404 cannot fetch pages created with GatsbyJS
This issue is caused by a "/*" canonical and is fixed by placing the path variable in the context of your gatsby-node script & using it to form the url in the react-helmet.
The problem with the Facebook Debugger producing a 404 for pages created with GatsbyJS arises if it cannot fetch data for the page and can occur if the page canonical or og:url that it reads is "/*".
This occurs as Gatsby will produce a "/*" for paths at build time. This can be seen if you just a console.log and run yarn build or if you make a CURL GET request to a URL using postman and inspect the canonical and og:url.
Solution
To solve this issue, pass the path variable within the page context in the create pages function of your gatsby-node.js, and use that variable to define the canonical url and og:url.
This solution is available in the sample code below:
This context must be used in tandem with a meta tag similar to the one below, within the react helmet of your page.
Don't forget to replace https://www.delasign.com with your domain's url.
<meta property="og:url" content={"https://www.delasign.com" + context.path } />
Any Questions?
We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.