[Feature]: Add Open Graph image cards for each package

[timheuer]

The Elevator Pitch

Sharing links has been commonplace on the web and most places that attempt to render the shared link use open graph (og:image) aspects in a rich way (Twitter, Facebook, iOS messages, etc.) that provide a great UX around quick information around the link...in this case a package.

Opportunity to help promote the package more visually appealing in places that understand og:image...

Example:

Additional Context and Details

GitHub is beautiful when you share links...I want NuGet to be more beautiful in link sharing :-)

[joelverhagen]

The mock-up looks beautiful. Thanks for pushing this discussion.

We do have some Open Graph metadata set up already. For example, this is the og: stuff for Alexa.NET today:

    <meta property="og:title" content="Alexa.NET 1.22.0-preview" />
    <meta property="og:type" content="nugetgallery:package" />
    <meta property="og:url" content="https://www.nuget.org/packages/Alexa.NET/" />
    <meta property="og:description" content="A simple .NET Core library for handling Alexa Skill request/responses." />
    <meta property="og:determiner" content="a" />
    <meta property="og:image" content="https://api.nuget.org/v3-flatcontainer/alexa.net/1.22.0-preview/icon" />

GitHub is beautiful when you share links...I want NuGet to be more beautiful in link sharing :-)

Am I understanding that things actually are not working as expected? Perhaps we need twitter: specific markup?

Using some Open Graph tester I found on Google, it looks close but not exactly like your mockup.
https://opengraph.dev/panel?url=https%3A%2F%2Fwww.nuget.org%2Fpackages%2FAlexa.NET%2F1.22.0-preview

For example, it looks like the package owner is not visible and the README content isn't cracked out of the Markdown and put into the Open Graph attributes. The Description field is used instead.

What are your thoughts on the current behavior vs. the desired behavior?

/cc @clairernovotny

[timheuer]

@joelverhagen notice the Twitter one doesn't render (also: https://cards-dev.twitter.com/validator). But yeah these are just smashing the icon (and sizing it). The FB/Discord ones look closest. I guess I was hoping for something 'more better' :-P

The curated communicates more information...e.g., from GitHub:

Maybe just allowing me to specify an image ala GitHub: https://github.blog/2019-04-17-custom-open-graph-images-for-repositories/

Also: https://github.blog/2021-06-22-framework-building-open-graph-images/