Generate Social-Images via API

[Ryuno-Ki]

This spun off in #3590 (comment)

The dev.to platform is using for https://docs.htmlcsstoimage.com/ - which could be an option for generating images customized to MDN pages.

[peterbe]

I don't know who would have an opinion on this. Would be greater-than-zero nice to have but is it important?
@HerminaC @chrisdavidmills ?

The topic at hand is that we can make the preview prettier on things like Twitter and Facebook if someone posts an MDN URL.
On my personal blog, I usually take a screenshot of some code (because so many of my personal blog posts are about coding) and use that as an image. Another option would be to generate a screenshot from the top portion of the document at some decent ratio (e.g. 16:9). Or, a third option is to do what dev.to does which is to generate an image on the fly based on some text.

Another option is to do nothing. Perhaps how the preview of a URL looks like in Twitter isn't greatly important to our traffic.

[chrisdavidmills]

I don't think this is hugely important, but it'd be nice to get this sorted with minimal fuss.

Since most of our pages don't have nice screenshots to adapt, can we just do something like have an MDN logo that gets used for all social cards, and just put the document title above it?

[tannerdolby]

@peterbe I pulled into your feature branch and added a <meta name="og:image"> tag along with a <meta name="twitter:image"> to the HTML and supplied content="" with the MDN Web Docs svg logo.

It might end up being more fuss to deal with the title/dino logo/twitter handle for the social image, when we could use this logo (or dino) for pages like mozilla hacks does. With the logo shown below plus the <title> and <meta name="description"> tags the summary card looks really nice.

[peterbe]

@tannerdolby Not sure what your point is here. Does it work, using the og:* if you just add the og:image and twitter:image?

[tannerdolby]

@peterbe My point was to illustrate how the summary card would look if we only add the missing <meta name="og:image" content=""> tag to your PR along with twitter:card, no need for twitter:image.

When the <meta name="twitter:card" content=""> tag is provided the twitter processor correctly falls back to the og:* tags without having to include the other twitter:* tags like you originally shared with us from the docs.

[schalkneethling]

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

[tannerdolby]

^ Super informative article, thanks for sharing @schalkneethling !