Add OG and Twitter card images

[csbailey5t]

Could go with logo, but @grenerad and @annamgibson will research and reflect.

[annamgibson]

Added twitterlogo image to images folder (not in a subfolder, but we can put it in one if need be). #180 /images/twitterlogo.jpg

@csbailey5t Will the little Twitter preview pull description text directly from index.astro when we link to dickensnotes.com on twitter? Or do we need to create a custom "description" for this? If so, let's go with: "Exploring serial novel form with Charles Dickens's Working Notes."

[csbailey5t]

@annamgibson we'll explicitly set it, but we can re-use descriptions and such. Here's a good article that gives background on these: https://www.digitalocean.com/community/tutorials/how-to-add-twitter-card-and-open-graph-social-metadata-to-your-webpage-with-html

[annamgibson]

This is really helpful, thanks! This makes me think that we should probably create custom twitter card text for the homepage as well as for each novel's Working Notes landing page. It strikes me that these are the pages we are most likely to want to advertise directly. @csbailey5t If you're able to help me figure out where precisely to put the meta tags on these pages, I can try to add the details.

@grenerad, I wonder if we should consider having Twitter card images of a page of transcriptions for the individual Working Notes landing pages (starting with Bleak House), or just stick with the logo we'll use for the homepage?

[csbailey5t]

@annamgibson I'll get this set up so with the MainHead component so adding this will be basically the same as adding the regular title and description metadata in the frontmatter of each page.

Do you expect to have pages where the page title is different than the title you might want in the Twitter card? Same with the description.

[annamgibson]

I’ll have to check re the description (will do so today), but I can’t imagine we’d want different titles.

[csbailey5t]

Noting here that depending on which pages you want different cards, we'll need to specify the og:type per this ontology: https://ogp.me/#types

[annamgibson]

@csbailey5t I imagine that most of the types will be "website"? I'll work on creating card images that fit the parameters you mentioned. We won't have them for every page, though. Will try to get this done by tmw and upload the images to the repository

[annamgibson]

Sent email with twitter card image options.

[annamgibson]

I've added the twitter card images to the repository (#196). I can fill in any metadata tags I need to once they're there. We'll need them for the following pages:

• [x] Index (Home with logo.jpg)
• [x] Scholarly Intro (IntroCard with logo.jpg)
• [x] General Intro (IntroCard with logo.jpg)
• [x] David Copperfield (DC card.jpg)
• [x] Bleak House (BH card.jpg)

[csbailey5t]

Re-opening this to be addressed after domain switch.

[csbailey5t]

I've tested on Twitter, and the social cards are working.