One of my WordPress-based sites uses this particular combination of plugins and utilities:
- WordPress version 4.8.2
- W3 Total Cache
- MaxCDN
And this was the disappointing, image-less result I got whenever I shared one of its posts on Twitter:
Twitter/Facebook missing image debugging tools
Here are two tools I used while debugging my missing images problems on social media.
Rather than spam your friends or pollute your feed with tests, you can use Twitter’s own validator and Facebook’s sharing debugger to try your posts and see how they render.
Twitter: https://cards-dev.twitter.com/validator
Facebook: https://developers.facebook.com/tools/debug/sharing/ (you may need to hit the “Scrape again” button in between tries)
The Twitter/Facebook 403 fix
There were two problems with my site:
Problem 1: My site’s posts didn’t define any Open Graph images in the first place. I figured Twitter, Facebook, etc. were smart enough to scrape the post and pick an image all on their own, but it seems that’s not always the case.
To explicitly declare a social media image for each post, I installed the “Facebook Open Graph, Google+, and Twitter Card Tags” WordPress plugin.
Now, at the bottom of every post, is the option to explicitly define an image to use when sharing. This image can be larger than images you might normally include in a post (maybe even custom-made for the purpose) and need not appear in the post itself. (Unfortunately, you do have to go back and manually add an image to each post.)
After doing this I was still getting a 403 when previewing my post in the Facebook and Twitter tools.
Problem 2: The other part of the problem was with my CDN settings themselves. Twitter (and Facebook, etc.) aren’t actually allowed to link to images hosted on my CDN – they aren’t whitelisted. My CDN is set up to only serve images on my site itself, so other people can’t link directly to my CDN images and effectively steal the bandwidth that I pay for (truthfully, I wish people were this eager to link to my content).
I had to add Facebook and Twitter to my W3 Total Cache’s list of rejected user agents.
Under the Performance tab (left side of WordPress interface), click on CDN:
Then scroll down into the Advanced section and find “Rejected user agents”. Type facebook.com and twitter.com. These agents are not allowed to access files hosted within the CDN. (Which is what we want, because the CDN won’t let them do it anyway.)
You may need to also do Performance > Purge All Caches from the top toolbar in WordPress, too.
Finally, the Twitter and Facebook previews have images!
