feat(seo): rasterize og-default.png from SVG during build

Add scripts/build-og-image.mjs (sharp) hooked as npm prebuild to materialize a 1200x630 PNG alongside the SVG. BaseLayout now points og:image/twitter:image at the PNG, which the major crawlers preview reliably (SVG support is patchy). The SVG stays in the repo as the source of truth.

package.json

@@ -8,6 +8,7 @@
   },
   "scripts": {
     "dev": "astro dev",
+    "prebuild": "node scripts/build-og-image.mjs",
     "build": "astro build",
     "preview": "astro preview",
     "check": "astro check",

scripts/build-og-image.mjs

@@ -0,0 +1,19 @@
+import { readFile, writeFile, mkdir } from 'node:fs/promises';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import sharp from 'sharp';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const repoRoot = resolve(here, '..');
+const svgPath = resolve(repoRoot, 'public/og-default.svg');
+const pngPath = resolve(repoRoot, 'public/og-default.png');
+
+const svg = await readFile(svgPath);
+const png = await sharp(svg, { density: 192 })
+  .resize({ width: 1200, height: 630, fit: 'contain', background: { r: 239, g: 234, b: 224, alpha: 1 } })
+  .png({ compressionLevel: 9 })
+  .toBuffer();
+
+await mkdir(dirname(pngPath), { recursive: true });
+await writeFile(pngPath, png);
+console.log(`generated ${pngPath} (${png.length} bytes)`);

src/layouts/BaseLayout.astro

@@ -26,7 +26,7 @@ const {
 
 const siteUrl = (Astro.site ?? new URL(Astro.url.origin)).toString().replace(/\/$/, '');
 const canonicalUrl = new URL(canonicalPath ?? Astro.url.pathname, siteUrl).href;
-const socialImageUrl = new URL(ogImage ?? '/og-default.svg', siteUrl).href;
+const socialImageUrl = new URL(ogImage ?? '/og-default.png', siteUrl).href;
 const logoUrl = new URL('/favicon.svg', siteUrl).href;
 const isHome = Astro.url.pathname === '/';
 const isHuella = Astro.url.pathname === '/huella';