#1

Description of issue:

Card image is not populating with Twitter Card Validator (or in a tweet), but it is working perfectly fine on Facebook (and in their Sharing Debugger).

URL affected:

https://whattoexpect.pen.org/pledge-wall/?u=8lyvATPpDCQYUZp4zIfRFJPG5jb2

Troubleshooting steps::

We’ve included a variety of metatags, including:

og:image — https://us-central1-pen-america-quiz.cloudfunctions.net/screenshot?url=https%3A%2F%2Fwhattoexpect.pen.org%2Fsocial-pledge%2F%3Fu%3D8lyvATPpDCQYUZp4zIfRFJPG5jb2
og:image:width — 1200
og:image:height — 630

twitter:image — https://us-central1-pen-america-quiz.cloudfunctions.net/screenshot?url=https%3A%2F%2Fwhattoexpect.pen.org%2Fsocial-pledge%2F%3Fu%3D8lyvATPpDCQYUZp4zIfRFJPG5jb2
twitter:image:width — 1200
twitter:image:height — 630

og:title — What to ...
og:description — This fall, ...
og:url — https://whattoexpect.pen.org/pledge-wall/?u=8lyvATPpDCQYUZp4zIfRFJPG5jb2
og:type — website
twitter:card — summary_large_image
twitter:site — @PENamerica
twitter:creator — @PENamerica

The site is hosted on Netlify, built with Gatsby, and uses Netlify’s Prerendering (which in turn uses prerender io) to serve prerendered pages to bots. Additionally, the og:image URL points to a firebase cloud function that generates the image on the fly (which consistently takes about 2.5 seconds).

Facebook has no problem rendering this stack, and there were 2-3 instances where Twitter did actually grab the correct image and tweet it, so I’m not sure where the issue lies.

Interestingly, the other variety of shares on the site is working as expected, using the same tech stack, meta tags, and image-generation cloud function:

https://whattoexpect.pen.org/quiz?q=family-shares-story

When a user signs up, they’re assigned a userID, and this string is what is fed into the url in the u param in the original url.

The card validator doesn’t show any error, and if we look at the JSON returned from the validator, it has three errors that seem somewhat related:

twitter:image:id: "Unknown aspect ratio",
twitter:text:photo_image_full_size_alt_text: "Required meta tag missing",
twitter:text:summary_photo_image_alt_text: "Required meta tag missing",

From the troubleshooting doc, we’ve confirmed:

  • meta tags are all in the source
  • source contains the correct twitter:card tag
  • when curling with -A Twitterbot, the site returns 200 and still contains that tag
  • while the tags are technically dynamically generated, Twitterbot (tested via curl) receives all the prerendered tags correctly (thanks to Netlify’s prerendering)
  • same situation if we curl the actual image in question
  • there is no robots.txt
  • we are not using a CMS like Wordpress
  • we are putting the correct url into the validator (https://whattoexpect.pen.org/pledge-wall/?u=8lyvATPpDCQYUZp4zIfRFJPG5jb2)
  • the url is absolute and full (see above), and the param that contains a url is also encoded (originally it was not encoded, but it seems not to work either way)
  • there are no errors in the validator, except for the fields in the JSON (see above)

Any idea what on earth we’re doing wrong?

#2

We began noticing the same issue today… which is what led me to these forums. Spent all day troubleshooting, trying various things to maybe fix it - switched images, renamed images & pages, resized images, change image formats, swapped out OG tags for twitter:card meta tags… nothing works. Images just no longer show up in the validator. Links with no image in twitter validator all work fine when scraped by the Facebook “Sharing Debugger” tool.

Really frustrating.

4 Likes
#3

This has also been affecting users of our app for the past 2-3 days with the same symptoms of cards not generating in the tweet, and images not showing up after running the linked URL through the card validator.

1 Like
#4

Twitter and Facebook are completely different entites and infrastructures. Although some of the markup may be the same, our servers and backend services are based in different places and are subject to different issues. We appreciate that your markup may be correct, but networks and other issues may come into play here.

Thanks for checking into the JavaScript console. Nothing that you see there is part of the supported Cards Validator - everything we support and document is on the backend.

My current hypothesis is that the cloud function you’re using to do this dynamic image generation is not playing well with our crawler. I see HTTP 200 from the crawler, but clearly the images themselves are not being cached or rendered in the cards. I can ask someone on the engineering side, but this is likely to remain a lower priority in the immediate future - I fully understand that this is not an answer you want to hear, but I want to be honest to set better expectations. Thank you.

Finally, to all of you adding to this thread: please read this important post. We are unable to help you in any way unless you share live URLs (if you find that the forums will not let you share the URLs then please add backtick ` markup around them) and we would appreciate it if you or your webmasters can show that you’ve checked out standard set of common issues. We appreciate that.

#5

Thanks for your response here, Andy. Here are a couple live links where the issue is still occurring:


Please let me know if you need additional information.

#6

As of today, our images seem to be loading on Twitter — we didn’t change anything on our end, so I’m not sure where along the pipeline something clicked into place, but as far as we’re concerned this is resolved for the time being.

2 Likes
#7

@andypiper we have seen one additional instance of this issue in the last 24 hours for this particular Twitter account:

Page: https://www.bizjournals.com/orlando/news/2020/10/07/patterson-real-estate-opens-new-office.html
<meta name="twitter:description" content="The firm has hired a former Northmarq vice president who has facilitated more than $1 billion in transactions." >
<meta name="twitter:title" content="Atlanta real estate finance firm opens Central Florida office" >
<meta name="twitter:image" content="https://media.bizj.us/view/img/10780032/2018photo-laurenhanley*1200xx1500-844-0-240.jpg" >
<meta name="twitter:card" content="summary_large_image" >

Any ideas what’s causing this issue?

#8

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.