diff --git a/components/MetaHead.js b/components/MetaHead.js
index f5a2243..70a83c8 100644
--- a/components/MetaHead.js
+++ b/components/MetaHead.js
@@ -43,12 +43,12 @@ export default function MetaHead(props) {
       <meta property="og:locale" content="en_US" />
 			<meta property="og:image:type" content="image/png" />
 			<meta property="og:image:width" content="1200" />
-			<meta property="og:image:height" content="630" />
+			<meta property="og:image:height" content="627" />
       <meta property="og:image:alt" content={metaTitle} />
 			<meta name="twitter:image:alt" content={metaTitle} />
 
       <meta name="twitter:creator" content={`@` + blog.twitter} />
-			<meta name="twitter:site" content={blog.twitter} />
+			<meta name="twitter:site" content={`@` + blog.twitter} />
 			<meta name="twitter:card" content="summary_large_image" />
     </Head>
   )
diff --git a/pages/learn/[category]/[post].js b/pages/learn/[category]/[post].js
index 3e20a65..0bdc4fd 100644
--- a/pages/learn/[category]/[post].js
+++ b/pages/learn/[category]/[post].js
@@ -11,7 +11,7 @@ export default function Post({ post, category, tags }) {
   return (
     <article className="py-24 px-wrap relative">
       <div className="absolute top-0 left-0 w-full h-full pattern-cross-dots-md text-tan z-0 opacity-30" aria-hidden="true" />
-      <MetaHead title={`${post.title}`} />
+      <MetaHead title={`${post.title}`} description={post.excerpt} image={post.thumbnail} type="article" />
       <header className="mb-8 relative z-10">
         <div className="mx-auto max-w-2xl">
           <ScrollAnimation animateIn="fadeInDown" animateOnce={true} delay={300} offset={0}>
diff --git a/pages/portfolio/[project].js b/pages/portfolio/[project].js
index 7f9cc5c..1f3167d 100644
--- a/pages/portfolio/[project].js
+++ b/pages/portfolio/[project].js
@@ -19,7 +19,12 @@ export default function Project({ project, types, windows, images }) {
 
   return (
     <article>
-      <MetaHead title={`${project.title}${blog.seo.sep}Portfolio`} description={project.excerpt} />
+      <MetaHead
+        title={`${project.title}${blog.seo.sep}Portfolio`}
+        description={project.excerpt}
+        image={project.thumbnail}
+        type="article"
+      />
       <HeaderBanner color={project.color} absolute={true}>
         <div className="flex flex-col lg:items-center justify-between lg:flex-row">
           <div className="flex-1 mb-12 lg:mb-0 lg:mr-12">
diff --git a/public/images/social-card.png b/public/images/social-card.png
new file mode 100644
index 0000000..2ff414e
Binary files /dev/null and b/public/images/social-card.png differ