fix(seo): declare the real og:image dimensions

[pucedoteth]

The bug

src/components/Head.tsx advertises the social preview image as square:

<meta property="og:image" content={ogImage} />
<meta property="og:image:width" content="1080" />
<meta property="og:image:height" content="1080" />

The image it points at is not square. Reading the PNG header of public/logo/build-the-future.png:

actual   : 1920 x 1080
declared : 1080 x 1080
ratio    : 1.778  (declared 1.000)

Every page on the site therefore ships a 1:1 aspect ratio for a 16:9 image.

Why it matters

og:image:width and og:image:height are not decoration — they exist so a scraper can lay the card out before it has fetched the image bytes. Facebook, LinkedIn and Slack reserve space from these values on first crawl, so an image announced as square is fitted into a square box and then scaled or cropped when the real 16:9 file arrives.

The image itself is fine: 1920x1080 is 1.78:1, comfortably inside what twitter:card=summary_large_image wants. Only the declaration is wrong.

The fix

Set the width to what the file actually is, and leave a note next to the tags that they track the asset — that coupling is what drifted in the first place.

Note on #440

#440 also touches Head.tsx, generating OG images with vercel/og instead of serving the static PNG. That is a different change — a feature, +272 lines and a new dependency — and it has been dormant since November 2025 with mergeable: UNKNOWN. This fix corrects the metadata for the image that is being served today, and would simply be superseded if #440 ever lands. Happy to close this if you would rather take that route.

Test plan

pnpm prettier --check src/components/Head.tsx   # All matched files use Prettier code style!
pnpm eslint src/components/Head.tsx             # clean
pnpm tsc --noEmit                               # clean
pnpm next build                                 # ✓ Compiled successfully

Verified in the build output rather than just the source — the generated HTML now carries the corrected value:

$ grep -roh 'og:image:width[^/]*' .next/server
og:image:width" content="1920" data-next-head=""

Dimensions read straight from the file header, so the number is not a guess:

$ python3 -c "import struct;d=open('public/logo/build-the-future.png','rb').read(24);print(struct.unpack('>II', d[16:24]))"
(1920, 1080)

🤖 Generated with Claude Code