Inconsistent pre-render results - sometimes it works, sometimes it doesn't

Hi there,

We have https://fiftieth.netlify.app/ using the pre-render service. The URL unfurls fine, sometimes, other times it doesn’t. Would really love some help (thanks to your email support for helping us with another issue related to this also!).

And Slack and Discord work fine (IIRC, one of these crawls the completely rendered page anyway)

I am really confused because twitter works. I reviewed the markup that facebook has and it looks like window.prerenderReady might be getting called too early… but that wouldn’t explain why twitter works and facebook doesn’t bcs surely they are crawling the same pre-rendered page?

I am going to try locally debugging it to go further, but if anyone can help I’d really appreciate it.

Many thanks <3

I can confirm, testing this locally, it pre-renders the required SEO component that contains the SEO meta tags, unlike what facebook shows me it is getting.

I should add I did make a code change to try and improve when window.prerenderReady was fired (moved to useEffect from useLayoutEffect). However, I have used this implementation fine for 5+ previous sites on Netlify in the past, so I am not 100% this is the issue (although the code change should help).

I guess my next step is try and curl the requests to the netlify site? Will report back when done.

I want to add that I have seen point 4 of this fantastic post about debugging issues where the unfurl may be different in certain places, however I do not have a ton of CSS in the head. In-case this is getting any eyes, you can see this is visible here;

More strange, if I do curl -A facebookexternalhit/1.1 https://fiftieth.netlify.app/ I get the same content back that twitter gets.

Baffled…

Shame as I’d love to share the site on social media, but I can’t do it without the pretty unfurl.

Edit: the same for curl -v --compressed -H "Range: bytes=0-524288" -H "Connection: close" -A "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" "https://fiftieth.netlify.app/"

To summarise;

If I curl, I get what I would expect, and would provide any recipient the OG meta information required. If I use the services (linkedin and facebook namely), I don’t get the unfurl and if I view what information they report to be getting, it’s different from the curl response.

It has been pointed out that the og:url was not correctly set (thank you Audrey!), and this was the cause of the issue. Honestly, the support I received from Netlify over email has been incredible, thank you so much :heartpulse:

Hope this helps anyone else in a similar situation. Completely my fault too, really appreciate the support.

1 Like