diff --git a/public/img/og-logo.png b/public/img/og-logo.png
new file mode 100644
index 0000000000..d64cc1b319
Binary files /dev/null and b/public/img/og-logo.png differ
diff --git a/theme.config.tsx b/theme.config.tsx
index e6f76c4024..6a9b27a097 100644
--- a/theme.config.tsx
+++ b/theme.config.tsx
@@ -12,6 +12,11 @@ const graphQLLogo = (
   <GraphQLWordmarkLogo className="nextra-logo h-6" title="GraphQL" />
 )
 
+const absoluteUrl =
+  `https://${process.env.VERCEL_URL}` ||
+  process.env.__NEXT_PRIVATE_ORIGIN ||
+  "http://localhost:3000"
+
 export default {
   backgroundColor: {
     light: "251,251,249",
@@ -42,9 +47,24 @@ export default {
           </>
         )}
         {canonical && <link rel="canonical" href={canonical} />}
-        {image && <meta name="og:image" content={image} />}
-        <meta property="og:image" content="/img/og-image.png" />
+
         <meta property="twitter:site" content="@graphql" />
+
+        {image ? (
+          <>
+            {/* if there is an OG image, we show a bigger card */}
+            <meta property="og:image" content={image} />
+            <meta name="twitter:card" content="summary_large_image" />
+          </>
+        ) : (
+          <>
+            <meta
+              property="og:image"
+              content={`${absoluteUrl}/img/og-logo.png`}
+            />
+            <meta name="twitter:card" content="summary" />
+          </>
+        )}
       </>
     )
   },