I get "Unable to render Card preview" from the twitter card verifier, even though it says "INFO: Card loaded successfully" in the verification

Question

I am trying to validate my twitter card for https://tjaz.com at: https://cards-dev.twitter.com/validator I get the all clear in the validation log but the card can't load:

My meta tags are defined in pug like this:

       meta(name="description" content="A platform for delivery of online learning, with a special focus on solving the challenges with delivering the online learning B2B. If you deliver online learning B2B you'll want to check out Tjaz.")

        <!-- Google / Search Engine Tags -->
        meta(itemprop="name" content="Tjaz - a platform for delivering online learning.")
        meta(itemprop="description" content="A platform for delivery of online learning, with a special focus on solving the challenges with delivering the online learning B2B. If you deliver online learning B2B you'll want to check out Tjaz.")
        meta(itemprop="image" content="https://tjaz.com/og-logo.png")

        <!-- Facebook Meta Tags -->
        meta(property="og:url" content="https://tjaz.com")
        meta(property="og:type" content="website")
        meta(property="og:title" content="Tjaz - a platform for delivering online learning.")
        meta(property="og:description" content="A platform for delivery of online learning, with a special focus on solving the challenges with delivering the online learning B2B. If you deliver online learning B2B you'll want to check out Tjaz.")
        meta(property="og:image" content="https://tjaz.com/og-logo.png")

        <!-- Twitter Meta Tags -->
        meta(name="twitter:card" content="summary_large_image")
        meta(name="twitter:title" content="Tjaz - a platform for delivering online learning.")
        meta(name="twitter:description" content="A platform for delivery of online learning, with a special focus on solving the challenges with delivering the online learning B2B. If you deliver online learning B2B you'll want to check out Tjaz.")
        meta(name="twitter:image" content="https://tjaz.com/og-logo.png")       

It works fine when I use various other tools to check, and it works fine on LinkedIn. I'm stuck please help if you can?

I tried many variations of the meta tags with the same problem, I was expecting the twitter card to load successfully.

Answer 1

Edit: The preview functionality has been disabled by Twitter mid 2022, that's why it doesn't work:

https://twittercommunity.com/t/card-error-unable-to-render-or-no-image-read-this-first/62736

https://twittercommunity.com/t/card-validator-preview-removal/175006

I found a way to update the old cached image, add ?1 to the url of the image in the meta tag, as described here https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/troubleshooting-cards#refreshing_tags

And used the twitter card validator a couple of times, and then about 15 mins later it was using the new image.

Answer 2

This is happening to me too, but it looks like there might be a delay between the time the Card goes live on the web and the time Twitter can actually render the card. It took about 20 minutes, during which time neither the live card nor the validator was working: the Card showed no image and the validator showed "Unable to render Card preview" even though the validator log was showing this:

INFO:  Page fetched successfully
INFO:  19 metatags were found
INFO:  twitter:card = summary_large_image tag found
INFO:  Card loaded successfully

Now, I'm getting the Card when a tweet is created, but the validator still shows 'Unable to render Card preview'. I'll keep trying the validator, but anyone who has this problem, all I can say is, keep trying the card - it might work even though the validator isn't playing nice.

It's possible that Twitter has crawlers that determine the validity of the site referenced in the card. I read that previously, each website referenced in a card had to have some kind of manual approval process. That's not the case anymore, but I'm sure they have some mechanism for probing the target site before the card can be published.