Facebook debugger cannot fetch the pages

[deebov]

Description

As you can see here facebook debugger fails to fetch the page. But when you view the page's source code via browser everything is fine. The site is hosted on netlify. I tried to tweak some things in the code but nothing fixed it.

Steps to reproduce

I am not sure if the problem is in the code or Netlify.

Expected result

Facebook debugger should scrap the pages properly

Actual result

Facebook debugger fails to fetch the pages

Environment

System: OS: macOS 10.15.2 CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz Shell: 3.2.57 - /bin/bash Binaries: Node: 12.9.1 - /usr/local/bin/node Yarn: 1.17.3 - /usr/local/bin/yarn npm: 6.10.2 - /usr/local/bin/npm Languages: Python: 2.7.16 - /usr/bin/python Browsers: Chrome: 79.0.3945.117 Safari: 13.0.4 npmPackages: gatsby: ^2.13.73 => 2.15.28 gatsby-background-image: ^0.8.5 => 0.8.14 gatsby-image: ^2.2.14 => 2.2.23 gatsby-plugin-facebook-pixel: ^1.0.3 => 1.0.3 gatsby-plugin-feed: ^2.3.11 => 2.3.15 gatsby-plugin-google-tagmanager: ^2.1.20 => 2.1.20 gatsby-plugin-gtag: ^1.0.11 => 1.0.11 gatsby-plugin-heap: ^1.1.0 => 1.1.0 gatsby-plugin-intl: ^0.2.8 => 0.2.8 gatsby-plugin-manifest: ^2.2.13 => 2.2.20 gatsby-plugin-purgecss: ^4.0.1 => 4.0.1 gatsby-plugin-react-helmet: ^3.1.5 => 3.1.10 gatsby-plugin-react-svg: ^2.1.2 => 2.1.2 gatsby-plugin-robots-txt: ^1.5.0 => 1.5.0 gatsby-plugin-sharp: ^2.3.9 => 2.3.9 gatsby-plugin-sitemap: ^2.2.10 => 2.2.16 gatsby-plugin-styled-components: ^3.1.3 => 3.1.8 gatsby-source-filesystem: ^2.1.18 => 2.1.28 gatsby-source-strapi: ^0.0.9 => 0.0.9 gatsby-transformer-sharp: ^2.2.12 => 2.2.19

[vladar]

Looks like you have og:url somewhere in your code which points to a weird URL:

https://foundingbird.com/*

Facebook is trying to access it but it obviously returns 404 code. For Facebook og:url is like a redirect. Check out their docs for more details.

I hope it helps.

[stevecastaneda]

I'm having the same issue. Did a project search and I'm not finding any other calls to og:url.

[stevecastaneda]

@deebov Just fixed it. Go into Netlify and enable prerendering under build and deploy.

[deebov]

@stevecastaneda oh thank you so much. It fixed the issue. thank you ))))

[andreasknoepfle]

@deebov I just had the same issue and put some time debugging into this, since I didn't want to use prerendering.

I discovered that the rendered og:url is set to http://domain.com/* when I requested the page via curl while the property is filled with http://domain.com/action-site, when I accessed the page through a browser.

In our site we used the path property that is passed into the component by gatsby to display this path via react-helmet. But unfortunately for some reason this property is * at build time, so the og:url turns out wrong. Then in the browser the path is populated with the right value, so you never see the issue when JS is running.

Instead of accessing the path like this, I accessed it through the location property now (taken from https://github.com/gatsbyjs/gatsby/issues/8787#issuecomment-427216043) and this works like a charm without prerendering.

[delasign]

I followed @andreasknoepfle's response but got a little lost.

My issue was a little different and involved using the path sent from the createPages function of the gatsby-node script. This always gave "/*" during yarn build. However, if I passed it through the context and used this variable, it worked.

I documented the solution here incase anyone wants to check it out.

https://delasign.com/blog/fb-debugger-404-gatsby/