Twitter card [summary_large_image] not displaying image
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:
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.
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().'" />';
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.
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