Social sharing of pub packages not as rich as sharing a github repo

[sethladd]

We noticed that there are some opportunities to improve the social sharing experience of a pub package hosted on pub.dev. Specifically: more auto-generated context and "splash image" of the pub package.

In comparison, here is what it looks like to share a github project (via X):

Note the large image with content around what the package is, contributors, stars, forks, etc (giving a more accurate impression about the status of the project).

Compare that with a social share from the same project's pub package:

Note the static stock image for "pub", with no package branding/identification/stats

To help people promote their awesome work as hosted on pub.dev, we should consider how to make a more rich "social share snippet image". We can use GitHub as the inspiration here.

Ideally, when sharing a package's pub.dev URL via social services like X, it would be good to:

• auto-generate a snippet image
• including the name of the package
• including any primary image from the package
• including a one-line description of the package
• including some basic stats like stars, pub score

Thanks for considering!

[sigurdm]

Seems like for twitter we need some meta tags: https://developer.x.com/en/docs/twitter-for-websites/cards/guides/getting-started

Google chat seems to use opengraph (hinted here https://webapps.stackexchange.com/questions/151458/is-it-possible-to-change-the-image-google-chat-shows-for-a-url-link): https://ogp.me/ (og:image, og:description)

[sigurdm]

Seems we are already creating these tags, but the content is not as precise as wanted.

pub-dev/app/lib/frontend/templates/views/shared/layout.dart

Line 75 in bf3d702

'${urls.siteRoot}${staticUrls.getAssetUrl('/static/img/pub-dev-icon-cover-image.png')}',

We could specialize the image if there is one in the readme or perhaps use one of the screenshots.

https://robolly.com/open-graph-preview/?url=https://pub.dev/packages/retry

[halildurmus]

I believe the best approach would be adding a new field to the pubspec.yaml, for example social_image, which would allow package authors to specify a preferred image for social previews. If omitted, an image from the screenshots or one embedded in the README could be used. In cases where no images are available, pub.dev could generate a preview image, similar to how GitHub does.

Alternatively, if the social_image field is omitted, the preview image generated by pub.dev would be used.

[isoos]

I think we shouldn't add yet another tag into pubspec.yaml for this, as if you have a screenshot, you already order them by importance, and the first one will be the one displayed on the package listing pages. We should just reuse it for social media sharing.

[sigurdm]

and the first one will be the one displayed on the package listing pages.

However, the intended semantics of screenshots is to be ... screenshots - not clear that that is the same as a display image.

[sigurdm]

But I agree, adding yet another pubspec property just for this also sucks

[halildurmus]

and the first one will be the one displayed on the package listing pages.

However, the intended semantics of screenshots is to be ... screenshots - not clear that that is the same as a display image.

+1 to this. Also, the documentation of the screenshots property states:

Don't include logos or other branding imagery in this section.