24

I have set up a series of Twitter cards for my website.

The type of twitter card is [summary_large_image].

The meta-information included in the <head> of my webpage is:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@myTwitterAccount" />
<meta name="twitter:creator" content="@myTwitterAccount" />

<meta name="twitter:image:src" content="http://example.com/social/twitter/large_image.png" />
<meta name="twitter:image:width" content= "280" />
<meta name="twitter:image:height" content= "480" />

<meta property="og:image" content="http://example.com/social/twitter/large_image.png" />
<meta property="og:image:width" content= "280" />
<meta property="og:image:height" content= "480" />

<meta property="og:url" content="http://example.com/myfolder/mysubfolder/" />
<meta property="og:title" content="My Page Title" />
<meta property="og:description" content="My Page Description" />

I recognise there is redundancy in the markup above - prior to the current setup I have tried adding and removing any number of og: & twitter: meta elements to produce (less redundant) alternative combinations...

Twitter has reviewed and whitelisted my domain for [summary_large_image] Twitter cards.

The Twitter Card Validator returns the following log:

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

All elements of the card display absolutely fine on both the validator and in my own Twitter stream, except...

... the image isn't there.

I have managed to get the image to display once on my laptop (but never again, and I'm unsure what I did differently that one time).

There is never any problem getting the image to display on the Native iOS Twitter App - the image always displays on the app.

Any pointers? Thanks.

Rounin
  • 2,385
  • 2
  • 17
  • 35

8 Answers8

16

2020 Update from @MattGreer:

It seems like now the image needs to be 1200x630, and not 2:1 anymore. Once I used that size, my image started showing up. See @johanv's answer.

Original answer from 2015:

There appear to be 2 key considerations which need to be taken care of before the image will display for the [summary_large_image] twitter card:

  1. The image dimensions must conform (at least) to the minimum width (280px) and the minimum height (150px). Any narrower or shorter and the image will not display.

  2. A page cannot (it seems) reference an image for its [summary_large_image] twitter card, which another page's [summary_large_image] twitter card has already referenced. If it attempts to, the image will not display. (This restriction does not apply to the Native iOS Twitter App.)

The way I have circumvented restriction 2) is to use the PHP function

uniqid()

to append a random alphanumeric string to the end of

http://example.com/social/twitter/large_image.png

so that the entire meta element reads:

echo '<meta property="og:image" content="http://example.com/social/twitter/large_image.png?'.uniqid().'" />';
Rounin
  • 2,385
  • 2
  • 17
  • 35
12

In most cases this can simply be Twitter's card cache. It is very slow to update, up to a week.

To force refresh it, see here: https://stackoverflow.com/a/58842765/2873507

  • Go to https://cards-dev.twitter.com/validator
  • Type in the URL you want to update, BUT with a change. For example, add ?utm_source=Whatever
  • Then just reloaded page with whatever tweet had your Twitter card

When Twitter validator encounters this different URL, it clears its cache and fetches the new version.

John Conde
  • 86,484
  • 28
  • 150
  • 244
Vic Seedoubleyew
  • 31
  • 2
  • 5
9

In case this is useful for anyone else, my issue was using a relative path instead of a full URL.

For example /images/example.png I had to change it to https://example.com/images/example.png.

Matt Gaunt
  • 191
  • 1
  • 2
8

In my case my image path had an extra forward slash, which worked fine in-browser, but wasn't picked up by Twitter. It was a one character error that was hard to spot.

E.g. check for this:

https://example.com//myphoto.jpg

And change it to this:

https://example.com/myphoto.jpg
David Calhoun
  • 181
  • 1
  • 1
4

I had the same problem, and I tried a lot of things. I checked the robots.txt, I checked the meta tags, I checked the image specifications on the twitter documentation (aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels. Images must be less than 5MB in size), I messed around, Googled around, tried everything, nothing worked. (The fact that the cards are cached, didn't help either.)

In the end I was looking at my twitter stream, and clicked to a page that did have a picture in its card, looked at the meta tags at that page, and tried to use the image of that page on my post. And guess what: this worked.

So the image of that particular site had dimensions 1200x630. What I did, was changed my picture, so that it also was 1200x630 pixels. I used that one in the twitter:image meta tag and now it works fine.

So maybe the documentation is out of date? Anyway, if you have this problem, you could try changing your picture's dimensions to 1200x630.

johanv
  • 141
  • 1
4

I was scratching my head on this because I had done everything right. It turns out that my page was cached from when it had no meta property tags on it.

The card images showed up straight away on Facebook and Twitter when I used their validators.

Twitter: https://cards-dev.twitter.com/validator

Facebook: https://developers.facebook.com/tools/debug/

Shane Hastings
  • 41
  • 2
1

I had a similar issue.

My problem was that the url came back from the API as //www.example.com/foo.jpg. Adding https: to the beginning fixed it for me.

Matt Dell
  • 111
  • 2
1

My problem was due to my CloudFlare SSL set to minimum TLS 1.3.

When I used Twitter Card Validator to test my cards, I would get unknown error and cards would not show up.

I found solution here.

Issue was that Twitter is (still) not supporting TLS 1.3 and I had to degrade to TLS 1.2.

Immediately my cards were displayed.

Siniša
  • 111
  • 2