Add head properties needed for twitter card (#2206)

## Description

Occasioanlly it didn't seem to like the "normal" open graph properties
when playing around with a personal website, perhaps a follow up PR is
needed to re-declare the og properties to work (e.g.
`twitter:description`)? Although it could also be a issue with twitter/x
caching things.

Added a twitter card type + set the image using a full path. The are two
types of cards

summary

<img width="691" height="279" alt="Image"
src="https://github.com/user-attachments/assets/451fe636-127c-4880-a8e1-6cd27462b8f4"
/>

or

summary_large_image

<img width="612" height="417" alt="Screenshot 2025-10-25 at 18 51 48"
src="https://github.com/user-attachments/assets/f20b4474-b560-4e96-b55f-e6622c85b30a"
/>

I went with the first one. The image doesn't look correctly formatted
however after #1963
it might just resolve itself...

Closes #2196


### Supplementary material

* https://cards-dev.x.com/validator
* https://developer.x.com/en/docs/x-for-websites/cards/overview/markup

---------

Co-authored-by: Piotr Monwid-Olechnowicz <hasparus@gmail.com>

Author: IestynGage

public/img/og-logo.png

@@ -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" />
+          </>
+        )}
       </>
     )
   },