7

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.

9

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().'" />';
  • 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 at 17:46
1

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.

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.