diff --git a/www/src/components/showcase-details.js b/www/src/components/showcase-details.js
index 8c2f576125a81..3797ecbc415b5 100644
--- a/www/src/components/showcase-details.js
+++ b/www/src/components/showcase-details.js
@@ -251,7 +251,7 @@ const ShowcaseDetails = ({ parent, data, isModal, categories }) => (
               }}
             >
               <Helmet>
-                <title>{data.sitesYaml.title}</title>
+                <title>{data.sitesYaml.title}: Showcase | GatsbyJS</title>
                 <meta
                   property="og:image"
                   content={`https://www.gatsbyjs.org${
@@ -266,6 +266,25 @@ const ShowcaseDetails = ({ parent, data, isModal, categories }) => (
                       .childImageSharp.resize.src
                   }`}
                 />
+                <meta name="twitter:card" content="summary_large_image" />
+                <meta
+                  name="og:title"
+                  value={`${data.sitesYaml.title}: Showcase | GatsbyJS`}
+                />
+                <meta
+                  property="og:image:width"
+                  content={
+                    data.sitesYaml.childScreenshot.screenshotFile
+                      .childImageSharp.resize.width
+                  }
+                />
+                <meta
+                  property="og:image:height"
+                  content={
+                    data.sitesYaml.childScreenshot.screenshotFile
+                      .childImageSharp.resize.height
+                  }
+                />
               </Helmet>
               <div
                 css={{
diff --git a/www/src/templates/template-showcase-details.js b/www/src/templates/template-showcase-details.js
index 98a987b1e6f6c..f42f2c278ab02 100644
--- a/www/src/templates/template-showcase-details.js
+++ b/www/src/templates/template-showcase-details.js
@@ -111,13 +111,10 @@ export const pageQuery = graphql`
             fluid(maxWidth: 700) {
               ...GatsbyImageSharpFluid_noBase64
             }
-            resize(
-              width: 1500
-              height: 1500
-              cropFocus: CENTER
-              toFormat: JPG
-            ) {
+            resize(width: 1200, height: 627, cropFocus: NORTH, toFormat: JPG) {
               src
+              height
+              width
             }
           }
         }