10

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.

10

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().'" />';
| improve this answer | |
  • 2
    In my testing, the image would still not display unless it also had an exact aspect ratio of 2:1, as per the current documentation: "Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels." – jamesk Apr 3 '17 at 8:46
  • About the uniqueness, would that be across the Internet or just within your own website? I have many images disappearing over time and I'm wondering why. They are still there and I can even test with the Card Validator and see the image, but when I go to my twitter feed, it's not there... – Alexis Wilke May 20 '18 at 22:24
  • @jamesk I confirm that this is not the issue. I am using a card with a different aspect ratio. The issue is more likely to be Twitter's card cache, which updates very slowly. To force refresh it, see here: stackoverflow.com/a/58842765/2873507 – Vic Seedoubleyew Nov 13 '19 at 17:46
5

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
| improve this answer | |
4

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.

| improve this answer | |
2

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.

| improve this answer | |
  • Thanks for that addition, @MattGaunt! :-D – Rounin Apr 28 at 9:33
1

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.

| improve this answer | |
0

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.