: Twitter card [summary_large_image] not displaying image 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
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.
More posts by @Sherry384
1 Comments
Sorted by latest first Latest Oldest Best
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
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().'" />';
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.