diff --git a/website/content/blog/netlify-cms-2-1-0-adds-external-media-support-with-uploadcare.md b/website/content/blog/netlify-cms-2-1-0-adds-external-media-support-with-uploadcare.md
index 5293b7d7..baead013 100644
--- a/website/content/blog/netlify-cms-2-1-0-adds-external-media-support-with-uploadcare.md
+++ b/website/content/blog/netlify-cms-2-1-0-adds-external-media-support-with-uploadcare.md
@@ -5,6 +5,7 @@ description: >-
   Netlify CMS 2.1.0 adds external media support with Uploadcare, allowing files
   like images and videos to be stored outside of your Git repository.
 date: 2018-09-05T20:52:30.334Z
+twitter_image: /img/netlify-cms-external-media-library.png
 ---
 Storing large files in Git works great if you only have a few, and uploading plain images is fine if that's all your site needs. For everything else, great services like Cloudinary, Filestack, and Uploadcare exist to help you optimize and store images and other media files separately from the rest of your site. Our users have long been asking for a way to work with these kinds of services from within Netlify CMS, and we're happy to say that our latest release makes it possible!
 
diff --git a/website/package.json b/website/package.json
index d59b70b3..7908bedc 100755
--- a/website/package.json
+++ b/website/package.json
@@ -28,6 +28,7 @@
     "gatsby-transformer-json": "next",
     "gatsby-transformer-remark": "next",
     "gatsby-transformer-yaml": "next",
+    "lodash": "^4.17.10",
     "netlify-cms": "^2.0.11",
     "postcss-at2x": "^2.0.0",
     "postcss-cssnext": "^2.7.0",
diff --git a/website/src/components/twitter-meta.js b/website/src/components/twitter-meta.js
new file mode 100644
index 00000000..2369359d
--- /dev/null
+++ b/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;
diff --git a/website/src/templates/blog-post.js b/website/src/templates/blog-post.js
index 9b96f7c8..56296af2 100644
--- a/website/src/templates/blog-post.js
+++ b/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
     }
diff --git a/website/static/admin/config.yml b/website/static/admin/config.yml
index 8a36c805..9c061d94 100644
--- a/website/static/admin/config.yml
+++ b/website/static/admin/config.yml
@@ -29,6 +29,7 @@ collections: # A list of collections the CMS should be able to edit
       - {label: "Author", name: "author", widget: "string"}
       - {label: "Description (for blog list)", name: "description", widget: "text"}
       - {label: "Meta Description (defaults to Description)", name: "meta_description", widget: "text", required: false}
+      - {label: "Twitter Image", name: "twitter_image", widget: "image"}
       - {label: "Date", name: "date", widget: "date"}
       - {label: "Body", name: "body", widget: "markdown"}
   - name: updates