Wp-calypso: PNG Featured Images Fail in Social Sharing on Simple Sites

[scosgro]

This bug can only be replicated (from my testing) on WordPress.com Simple Sites. Atomic sites and self-hosted WordPress.org sites seem to function properly.

If a PNG is set as the Featured Image, that image will not appear with the post on social media.

Steps to reproduce

1. Upload a PNG file to your Media Library
2. Create a post. Add the PNG as the Featured Image on the post and publish.
3. Try sharing the post on Twitter or Facebook, or running the post through the Facebook Debug Tool or the Twitter Card Validator:

https://developers.facebook.com/tools/debug/
https://cards-dev.twitter.com/validator

1. The featured image will not appear.

What I expected

Featured Images to appear as the image associated with the post on social media.

What happened instead

PNG files do not get pulled as the Featured Image.

Browser / OS version

All.

Screenshot / Video

Simple site:

Atomic site using the exact same image:

Jurassic Ninja site using the exact same image:

Context / Source

user-report #manual-testing

[cathymcbride]

@scosgro I wonder if this was transient? I'm seeing PNGs work with both my test site and yours. If this is working for you now, feel free to close this. Otherwise, let me know!

[cathymcbride]

I'm going to remove this from the manage backlog until we have a solid go or no go on the repro.

[scosgro]

@scosgro I wonder if this was transient? I'm seeing PNGs work with both my test site and yours. If this is working for you now, feel free to close this. Otherwise, let me know!
I'm going to remove this from the manage backlog until we have a solid go or no go on the repro.

@cathymcbride Interesting. It's kind of a "tip" around Happiness that PNG files don't work, since this pops up fairly frequently (which is why I did some testing and made the Github), but maybe it just takes time for them to work? Is there any reason there would be a significant lag time for PNG files to appear on Simple vs Atomic or .org?

[scosgro]

@scosgro I wonder if this was transient? I'm seeing PNGs work with both my test site and yours. If this is working for you now, feel free to close this. Otherwise, let me know!
I'm going to remove this from the manage backlog until we have a solid go or no go on the repro.

@cathymcbride Interesting. It's kind of a "tip" around Happiness that PNG files don't work, since this pops up fairly frequently (which is why I did some testing and made the Github), but maybe it just takes time for them to work? Is there any reason there would be a significant lag time for PNG files to appear on Simple vs Atomic or .org?

Just tested with a new post, and it worked immediately. I'm not sure. I'd say we can close this for now, and can reopen a new one if it pops up again in the future. 🤔

[cathymcbride]

@scosgro sounds good. In the meantime, I'll see if I can find any info about pngs on simple.

[kristarella]

I had this issue come up in 3362823-zen. Most recent occurrence was Sept 30 (2 days ago). I'm going to reopen the issue in case others come across it.

[scosgro]

And another one in 3365408-zen

[scosgro]

Another one in 3370491-zen

[allilevine]

I was able to reproduce this bug by following the testing steps and using the linked Facebook debug Tool. From some quick research it looks like this issue could be transient and related to caching on Facebook and Twitter.

[blackjackkent]

I can't reproduce this - images are showing up as expected for me in both tools (Twitter and Facebook).

I found this article while googling for info about the image caching element as mentioned by @allilevine - https://inkblotdigital.com/2017/twitter-wont-show-my-wordpress-thumbnail/ It seems to indicate that this can occur if you've ever linked a version of the post without an image, as that version's image (or lack thereof) then gets cached on the service's side.

The article also provides information about how to clear the image cache on Twitter for a particular post. It looks like Facebook provides a similar mechanism - https://soporte.easypromosapp.com/hc/en-us/articles/207885336-Tutorial-How-to-clear-the-Facebook-cache-to-update-the-viral-content-of-the-promotion

[scosgro]

It seems to indicate that this can occur if you've ever linked a version of the post without an image, as that version's image (or lack thereof) then gets cached on the service's side.

True, but the Debug Tool - Scrape Again refreshes Facebook's cache with the latest information. When replicated, this still failed to pull the image when a PNG is used. Switching to JPEG pulled the image immediately.

@allilevine and @blackjackkent - Why, when we can replicate, does this only happen on WordPress.com simple sites?

FWIW, I tried to replicate today, and it worked without any issues. The PNG files showed up immediately.