docs: add twitter metadata tags (#1732)

website/src/components/twitter-meta.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Helmet from 'react-helmet';
+
+const TwitterMeta = ({ title, description, image, imageAlt }) => (
+  <Helmet>
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@netlifycms" />
+    {title && <meta name="twitter:title" content={title} />}
+    {description && <meta name="twitter:description" content={description} />}
+    {image && <meta name="twitter:image" content={image} />}
+    {image && imageAlt && <meta name="twitter:image:alt" content={imageAlt} />}
+  </Helmet>
+);
+
+export default TwitterMeta;

website/src/templates/blog-post.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import Helmet from 'react-helmet';
 import { graphql } from 'gatsby';
+import { trimStart, trimEnd } from 'lodash';
 
+import TwitterMeta from '../components/twitter-meta';
 import Layout from '../components/layout';
 
 export const BlogPostTemplate = ({ title, author, date, body, html }) => (
@@ -22,7 +24,10 @@ export const BlogPostTemplate = ({ title, author, date, body, html }) => (
 
 const BlogPost = ({ data }) => {
   const { html, frontmatter } = data.markdownRemark;
-  const { author, title, date, description, meta_description } = frontmatter;
+  const { author, title, date, description, meta_description, twitter_image } = frontmatter;
+  const { siteUrl } = data.site.siteMetadata;
+  const twitterImageUrl =
+    twitter_image && `${trimEnd(siteUrl, '/')}/${trimStart(twitter_image, '/')}`;
 
   const desc = meta_description || description;
 
@@ -32,6 +37,7 @@ const BlogPost = ({ data }) => {
         <title>{title}</title>
         {desc && <meta name="description" content={desc} />}
       </Helmet>
+      <TwitterMeta title={title} description={desc} image={twitterImageUrl} />
       <BlogPostTemplate title={title} author={author} date={date} html={html} />
     </Layout>
   );
@@ -41,6 +47,11 @@ export default BlogPost;
 
 export const pageQuery = graphql`
   query blogPost($slug: String!) {
+    site {
+      siteMetadata {
+        siteUrl
+      }
+    }
     markdownRemark(fields: { slug: { eq: $slug } }) {
       frontmatter {
         title
@@ -48,6 +59,7 @@ export const pageQuery = graphql`
         # meta_description
         date(formatString: "MMMM D, YYYY")
         author
+        twitter_image
       }
       html
     }