Add twitter card metadata

[rjwignar]

This fixes #432.

Summary

• Added an og:type property.
  From https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup,
  
  A Twitter Summary card can be rendered if an og:type, og:title and og:description exist but not twitter:card, but I ended up also adding required Twitter meta tags for robustness.
• added Twitter meta tags required to render a Summary Card w/ Image

Testing Requirements?

I am going to run the generated preview against the Twitter Card Validator.
I hope the validator can test the preview website

[cloudflare-pages]

Deploying with    Cloudflare Pages

Latest commit:	7ca66d0
Status:	✅  Deploy successful!
Preview URL:	https://038a0b88.console-overthinker-dev.pages.dev
Branch Preview URL:	https://rjwignar-issue-432.console-overthinker-dev.pages.dev

View logs

[rjwignar]

Test Results

It looks like Twitter detects the tags now when I run https://rjwignar-issue-432.console-overthinker-dev.pages.dev/c/vst_bZGotyMpzM2e0ZcHz against it,

This is what the card looks like in the preview:

Problem

Our image doesn't appear on the Card. I think our image dimensions are too small (32x32).
The Summary Card supports minimum image dimensions of 144x144:

The Summary Card with Large Image
supports minimum image dimensions of 300x157:

[humphd]

In a follow-up, I'd like to see us take a screenshot of the final message, and upload that along with the chat when we share, and we could use it as our image. For now, no image is fine.

[humphd]

This is a good start.

But can you add it to the share logic too?

chatcraft.org/src/lib/share.ts

Line 59 in 4016e91

// Set various types of titles/summaries

[kliu57]

Just tested on twitter with the preview url, works well.

[rjwignar]

Tested Twitter meta tags in shared chat, https://rjwignar-issue-432.console-overthinker-dev.pages.dev/api/share/chatcraft_dev/BD3ThijHaa5gfs51H0JEN, against Twitter Card validator and it passes:

Here's what it looks like in the Tweet Composer (using summary_large_image):

In a follow-up, I'd like to see us take a screenshot of the final message, and upload that along with the chat when we share, and we could use it as our image. For now, no image is fine.

TODO in followup: Modify twitter:image meta tags to use screenshot of final message.