Twitter card not showing image

Hello! I’ve been using Ghost for awhile and love it. However, my website’s image is just not showing in the Twitter card.

My website is Their Timeline, and I have uploaded a 1200 by 670 dimension image under Settings → General → Twitter card.

The preview works nicely:

But when I put the link in Twitter I just a black background.

Can anyone please advise thank you!

I had the same issue not too long ago. I’d say try entering your site name and/or post in Twitter’s validator. https://cards-dev.twitter.com/validator

1 Like

Oh wow it’s working beautifully now, thank you!

Sweet! You’re welcome.

I’ve just tried this solution after posting an article on my twitter. All it did was increase the size of the blank image. Is there another workaround? Screen Shot 2021-04-19 at 8.02.45 PM

naturanovit.net
https://twitter.com/stvnarena

Hi @sonarforte did you ever find the answer to this issue? I’m going through a similar thing right now too. Specifically, I am unable to display an image for specific pages in my domain (ie backstagepass.fyi/progress)
This is what it looks like on twitter

We are having a similar issue but it stems from us using the Ghost Content API to power our own custom frontend. As a result of us having to make the *.ghost.org site private, we no longer have images being revealed due to the robots.txt restricting crawlers.

Is there a way to customize the robots.txt on a private site so we can still allow twitter et. al access to our images?

@chatkick did you find a solution for this? I’m having the same issue .

We did - but not through any Ghost configuration.

We use NextJS and wrapped our images in the NextJS image optimization component. This forces our hosting to proxy to the images off our domain.

I’m using NextJS too, could you share a screenshot - would be massively appreciated! :pray:t2:

We use the Next/Image component and set the next.config.js to have a reference to the Ghost domain (see image below).

Just note it can take a week or so for twitter cards to start rendering properly because of twitterbot.

Once this deploys it will serve images off your domain like so:

chatkick.com/_next/image?url=https%3A%2F%2Fchatkick.ghost.io%2Fcontent%2Fimages%2F2022%2F01%2Fmarketing-managers--1-.jpg&w=640&q=70


I’m having a similar problem with not showing the twitter card image testing with a twitter validator. I am using Cloudflare, is it something from this which could be the cause? I tried switching off a few things but it didn’t help yet.
edit: resolved this because the image was too big, I think over 800px won’t work as a preview so you need to upload a smaller card image.