How to fix: No card found (Card Error) on Twitter

Are you struggling to see your blog article render properly on the Twitter card?

Someone recently Tweeted at me

Thanks for the nice article. https://t.co/6qrQ4NtVQq via @rleija_

— Qiaowen (@Qiaowen15) April 19, 2020

But, it got me curious, “why isn’t the Twitter card not rendering properly?”

I had the following meta tags.

<meta property='twitter:title' content="some title"/>
<meta property='twitter:image' content="https://domain.com/some/url/path/to/image"/>

I went to the Twitter card validator, and this the messages I’d see when I entered one of blog’s url.

INFO: Page fetched successfully
INFO: 13 metatags were found
ERROR: No card found (Card error)

Solution: Add these 3 metatags

<meta property='twitter:title' content="some title"/>
<meta property='twitter:image' content="https://domain.com/some/url/path/to/image"/>
<meta name="twitter:card" content="summary_large_image"/>

The metatag that I was missing, was the twitter:card metatag

<meta name="twitter:card" content="summary_large_image"/>

That’s it. Happy coding!

I like to tweet about HTML and post helpful code snippets. Follow me there if you would like some too!