Making WordPress.org

Opened 3 years ago

Last modified 2 years ago

#5826 new enhancement

Twitter card not working for some plugin pages

Reported by: pedromendonca's profile pedromendonca Owned by:
Milestone: Priority: normal
Component: Plugin Directory Keywords: has-patch
Cc:

Description

Some plugins have banner and icon, some have just icon or banner, some have none.

To start, the current Twitter card type for sharing a plugin page is always "summary_large_image", which is far from ideal for all the cases described above.

These different situations might require different approaches on social_meta_data().
https://meta.trac.wordpress.org/browser/sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/functions.php?#L321

Currently

For the Twitter card type, all plugins use "summary_large_image".

For the image itself, here is the current logic on social_meta_data():

  • If 2x banner exist: Use it only for twitter:image
  • If 1x banner exist: Use it only for og:image

Enhancement

The cart type should depend on the available images and image ratio:

  • If banner (2x or 1x) exist: Set Twitter card type to "summary_large_image"
  • If banner don't exist: Fallback to Twitter card type "summary" to print a small square image (plugin icon or WordPress logo)

For the image itself, probably it will be ok to include the 1x banner for Twitter if there is no 2x banner, and also probably it will be better to include the 2x banner for Facebook in the first place.
So I suggest the same logic for both Twitter and Facebook:

  • If banner exist: Use it for twitter:image and og:image (2x with fallback to 1x)
  • If only icon exist: Use it for twitter:image and og:image (2x with fallback to 1x)
  • If none exist: Fallback to WordPress square logo for twitter:image and og:image

Twitter cards documentation

Here is the current documentation for Twitter cards specs:
https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary
https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image

Twitter card validator:
https://cards-dev.twitter.com/validator

Change History (5)

This ticket was mentioned in PR #35 on WordPress/wordpress.org by pedro-mendonca.


3 years ago
#1

  • Keywords has-patch added

The Twitter cart type should depend on the available images and image ratio:

  • If banner (2x or 1x) exist: Set Twitter card type to "summary_large_image"
  • If banner don't exist: Fallback to Twitter card type "summary" to print a small square image (plugin icon or WordPress logo)

For the image itself, probably it will be ok to include the 1x banner for Twitter if there is no 2x banner, and also probably it will be better to include the 2x banner for Facebook in the first place.
So I suggest the same logic for both Twitter and Facebook:

  • If banner exist: Use it for twitter:image and og:image (2x with fallback to 1x)
  • If only icon exist: Use it for twitter:image and og:image (2x with fallback to 1x)
  • If none exist: Fallback to WordPress square logo for twitter:image and og:image

https://meta.trac.wordpress.org/ticket/5826

This ticket was mentioned in Slack in #meta by pedromendonca. View the logs.


3 years ago

#3 @mayukojpn
3 years ago

+1 That’s great idea 👏
When I publish baby plugins, I won't make all of asset images. But I may want to replace icon otherwise dummy icon will appears in plugin install page of WordPress admin. Even baby plugins, it may help motivate them to continue their maintenance by having the opportunity to share them on social networks much nicer.

dd32 commented on PR #35:


2 years ago
#4

@pedro-mendonca Apologies on ^. We migrated to a trunk main branch a while ago, but due to this repo's structure it wasn't a rename. Due to some unrelated things it's caused the master branch to be deleted and closed/invalidated your PR in the process. Please feel free to either rebase upon trunk, or leave it as-is as the diff/patch is still accessible.

pedro-mendonca commented on PR #35:


2 years ago
#5

Thanks @dd32 for the heads up.
Rebased :-)

Note: See TracTickets for help on using tickets.