Twitter URL Preview Card Not Showing Image

Question

I'm trying to get <meta/> tags set up on my website so that social media sites such as Facebook and Twitter show a preview card when posting a link to my site, but I can't get twitter to show an image in the preview card.

The website is https://spiriteddrive.club and the <meta/> tags and have set up as follows:

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@spirited_drive"/>
<meta name="twitter:creator" content="@spirited_drive"/>
<meta property="twitter:domain" content="spiriteddrive.club">
<meta property="twitter:url" content="https://spiriteddrive.club">
<meta name="twitter:title" content="Spirited Drive">
<meta name="twitter:description" content="A crowdsourced online database of the world's best driving roads.">
<meta name="twitter:image" content="https://cdn.spiriteddrive.club/images/banner-twitter.jpg">
<meta name="twitter:image:alt" content="Banner logo image for Spirited Drive">
    
<meta property="og:title" content="Spirited Drive"/>
<meta property="og:description" content="A crowdsourced online database of the world's best driving roads."/>
<meta property="og:url" content="https://spiriteddrive.club"/>
<meta property="og:image" content="https://cdn.spiriteddrive.club/images/banner-twitter.jpg"/>
<meta property="og:image:alt" content="Banner logo image for Spirited Drive"/>
<meta property="og:site_name" content="Spirited Drive"/>
<meta property="og:type" content="website"/>

<meta property="article:published_time" content=""/>
<meta property="article:modified_time" content=""/>
<meta property="article:author" content=""/>
<meta property="profile:username" content=""/>

These tags are generated server-side, not in client-side JavaScript so Twitter's scraper shouldn't have any problem seeing them.

I tried it in Twitter's card preview validator here https://cards-dev.twitter.com/validator but the image is always missing even though the output is:

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

Image is also missing when posting direct to Twitter, however it shows fine in the Facebook card tester: https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fspiriteddrive.club

My image was originally 2:1, but then someone on SO suggested 1200x630 so I tried that but still nothing.

Answer 1

Hey I found your question as I was having the same issue.

Try adding href="https://cdn.spiriteddrive.club/images/banner-twitter.jpg" along/or content="https://cdn.spiriteddrive.club/images/banner-twitter.jpg"

It worked for me.

Accept as answer if it helps :)