fix: social sharing for blog posts (#22535)

* use lg. social image for twitter, other platforms

* chore: remove extra TOC from gatsby-image doc

* keep resize for backcompat, downsize img to 1500

Author: Marcy Sutton

docs/blog/2020-03-23-introducing-gatsby-web-creators/images/gatsby-web-creators.jpg

@@ -2,8 +2,9 @@
 title: Introducing Gatsby Web Creators
 date: 2020-03-23
 author: "Marcy Sutton"
-image: "images/abstract-social-sq.png"
+image: "images/gatsby-web-creators.jpg"
 imageTitle: Calling curious and creative people
+twittercard: "summary_large_image"
 showImageInArticle: false
 excerpt: "Gatsby Web Creators is a free livestream series aimed at curious people aged 13 and up, starting Wednesday, March 25. Twice a week for the next 5 weeks, Gatsby Learning Team members and their special guests will teach the basic skills involved for creating web pages, starting with HTML and CSS, and gradually building up to JavaScript."
 tags:

docs/blog/2020-03-23-introducing-gatsby-web-creators/index.md

@@ -8,17 +8,6 @@ Part of what makes Gatsby sites so fast is its recommended approach to handling
 
 Demo: [https://using-gatsby-image.gatsbyjs.org/](https://using-gatsby-image.gatsbyjs.org/)
 
-## In this doc
-
-- [Setting up Gatsby Image](#setting-up-gatsby-image)
-- [Types of images with gatsby-image](#types-of-images-with-gatsby-image)
-  - [Fixed images and parameters](#images-with-a-fixed-width-and-height)
-  - [Fluid images and parameters](#images-that-stretch-across-a-fluid-container)
-  - [Resized images](#resized-images)
-  - [Shared query parameters](#shared-query-parameters)
-- [Image query fragments](#image-query-fragments)
-- [Gatsby Image props](#gatsby-image-props)
-
 ## Setting up Gatsby Image
 
 To start working with Gatsby Image, install the `gatsby-image` package along with necessary plugins `gatsby-transformer-sharp` and `gatsby-plugin-sharp`. Reference the packages in your `gatsby-config.js` file. You can also provide additional options to [`gatsby-plugin-sharp`](/packages/gatsby-plugin-sharp/) in your config file.

docs/docs/gatsby-image.md

@@ -64,8 +64,9 @@ class BlogPostTemplate extends React.Component {
               />
               <meta name="description" content={post.fields.excerpt} />
 
-              <meta property="og:description" content={post.fields.excerpt} />
               <meta name="twitter:description" content={post.fields.excerpt} />
+              <meta name="twitter:card" content={post.frontmatter.twittercard || 'summary'} />
+              <meta property="og:description" content={post.fields.excerpt} />
               <meta property="og:title" content={post.frontmatter.title} />
               <meta property="og:url" content={href} />
               {post.frontmatter.image && (
@@ -260,6 +261,7 @@ export const pageQuery = graphql`
         imageAuthorLink
         imageTitle
         showImageInArticle
+        twittercard
         author {
           id
           bio