Why isn't my article thumbnail showing on my Twitter share?

We had a client recently wonder why, when they shared articles to Twitter, the article thumbnail didn't always show up with the tweet, even though it was set to.

Intermittent problems are always the most fun, aren't they?! So we studied their Twitter feed to look for any patterns in which shared articles had images on Twitter and which didn't.

We found a possible culprit was the order in which they created the article, uploaded the image, and tweeted the share.

We found often our client was tweeting within minutes of the news page being made. That made us wonder if they were actually sharing the link BEFORE uploading the image. If that was the case then the "card" on Twitter wouldn't update once the photo was added. Whilst this sounds silly - why would you tweet an article before you had finished it? - the real issue could have been a little more nuanced. If the client was composing their article, arranging their URL, and then clicking save in order to get to the image uploading screen, but at that point, copying and pasting the URL they'd just composed into the tweet box on Twitter, that could still have been too soon as even if they didn't click "share", the card on Twitter is generated and cached at the point of pasting in the URL, not at the point of sharing.

Another issue could be the client's own cache. As a very busy news site, they have lots of caching on their site to help it load quickly. So we advised them not to view the article page before uploading the image as viewing the page before the image is uploaded will generate a cache without the image which could then get picked up by Twitter before the cache is cleared with the new image in place.

If your images aren't showing on Twitter it's much more likely you just don't have your tags configured properly to feed the right image to Twitter, but I'm sharing this incase it just gets you or your developer considering the order in which things are done, and how this can effect the delicate caching of big busy sites.