Twitter Card Options for Posts

[BMonsalvatge]

Is your feature request related to a problem? Please describe.
Currently when linking to a post from my blog on Twitter it doesn't seem to include the main image from the post in the Twitter card. Additionally, the card seems to just show the link to the website and the Title of the blog post, rather than also including description.

Describe the solution you'd like
Include some options for Twitter cards. Include existing data per post (such as description, and title) for adding to the Twitter card data for each blog post automatically, rather than having to include the meta data tags per post.

https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started

Describe alternatives you've considered
Currently it seems that you should be able to include the html meta tags, suggested in the link above, directly into the .md files for each post.

Additional context
There may be a better way to achieve this that I am not aware of, or others my have it working and this is just an error on my end. If so, let me know!

[alehel]

Fixing the description is easy enough. All you have to do is edit the Layout.js file and add the following line inside the Helmet tag, just after the twitter:title line.

<meta name="twitter:description" content={description} />

A simple enough fix. However, before I do a PR on this I'd like to see if we can figure out a good way of also including an image. Not really sure how best to do that. An option would be to add a tag to the metadata of the md files called something like "socialImage". Then, if the socialImage is set, we use that, if not, we use the photo.jpg image.

[alxshelepenok]

I think the best way to do this is with the plugin. But I have not yet been able to find a suitable.

The image can be generated at build time using these plugins https://www.gatsbyjs.org/packages/gatsby-remark-social-cards
https://github.com/andrioid/andri.dk/tree/master/plugins/social-card

but it seems they do not support the parsing first image from markdown body.

[alehel]

Hey @BMonsalvatge , a PR which got merged today should resolve this issue for you. From now on, all you have to do is add the socialImage tag to your md files pointing to the image you want to be part of the Twitter card. This works for both posts and pages. All the sample md files in the starter have also been updated to reflect this, so you can see examples of how its done.

[BMonsalvatge]

The PR looks great. Should be able to test and confirm the changes within a couple days (out of town without my laptop til tomorrow 🙁).