From f9867f7ca55ba34190269c3f4b47d8cf9d1470f9 Mon Sep 17 00:00:00 2001
From: pucedoteth <119044801+pucedoteth@users.noreply.github.com>
Date: Wed, 26 Aug 2026 02:42:47 +0200
Subject: [PATCH] fix(seo): declare the real og:image dimensions

Head.tsx advertises the social preview image as 1080x1080, but
public/logo/build-the-future.png is 1920x1080. The PNG header reports
1920x1080, so every page has shipped a square aspect ratio for a 16:9 image.

og:image:width and og:image:height exist so a scraper can lay the card out
before it has fetched the image. Facebook, LinkedIn and Slack reserve space
from these values, so a 1.78:1 image announced as 1:1 is scaled or cropped
into the wrong box.

Set the width to the value the file actually has, and note next to the tags
that they track the asset.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/components/Head.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Head.tsx b/src/components/Head.tsx
index cad22ab1..1e9ae73b 100644
--- a/src/components/Head.tsx
+++ b/src/components/Head.tsx
@@ -26,7 +26,9 @@ export const Head = () => {
       <meta property="og:title" content={title} />
       <meta property="og:description" content={description} />
       <meta property="og:image" content={ogImage} />
-      <meta property="og:image:width" content="1080" />
+      {/* Must match public/logo/build-the-future.png, which is 1920x1080.
+          Scrapers size the card from these before fetching the image. */}
+      <meta property="og:image:width" content="1920" />
       <meta property="og:image:height" content="1080" />
       <meta property="og:site_name" content="Ink Documentation" />