Twitter Card Images not working on Gatsby app

I'm working on a Gatsby app with Netlify CMS (and hosted on Netlify).

The metadata is all right, but the images aren't showing on the Twitter validator or if I try to post to Twitter. The problem appears to be the images themselves, which are hosted using Gatsby and Cloudinary on site (using Gatsby Image Sharp).

Example relevant metadata:

<meta name="twitter:url" content="https://example.com/" data-react-helmet="true">
<meta name="twitter:image" content="https://example.com/static/blah/c5b20/blah.jpg" data-react-helmet="true">
<meta data-react-helmet="true" name="twitter:title" content="Site title">
<meta data-react-helmet="true" name="twitter:card" content="summary_large_image">

I know they're the issue, because if I replace my image URL (which is the full image URL) with an external URL, it works fine, showing the full card with image.

Any idea what could be causing this? I'm sizing the image down so it loads quickly, and it seems to load just fine directly (eg).

One thought is that the image is processed on request, somehow, which times out the Twitter crawler? But it seems to load instantaneously for me. And shouldn't Gatsby pre-render, rather than respond on demand?

(I tested the Gatsby pre-render by putting a hidden field with a random number on each page, and the random number seems to re-calculate in the prod app on refresh. Isn't this not supposed to be happening?)



Read more here: https://stackoverflow.com/questions/67942759/twitter-card-images-not-working-on-gatsby-app

Content Attribution

This content was originally published by Sasha at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: