Add minimal social preview image and Open Graph tags

index.html

@@ -7,6 +7,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <meta name="theme-color" content="#f97316" />
     <meta name="description" content="Analyze orienteering maps — import GPX tracks, draw routes, and export annotated maps." />
+    <link rel="canonical" href="https://oanalysis.com/" />
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="O-Analysis" />
+    <meta property="og:title" content="O-Analysis — orienteering map analysis" />
+    <meta property="og:description" content="Analyze orienteering maps — import GPX tracks, draw routes, and export annotated maps." />
+    <meta property="og:url" content="https://oanalysis.com/" />
+    <meta property="og:image" content="https://oanalysis.com/og-image.png" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:image:alt" content="A map with GPX tracks and numbered control markers, shown in O-Analysis" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="O-Analysis — orienteering map analysis" />
+    <meta name="twitter:description" content="Analyze orienteering maps — import GPX tracks, draw routes, and export annotated maps." />
+    <meta name="twitter:image" content="https://oanalysis.com/og-image.png" />
     <meta name="application-name" content="O-Analysis" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-title" content="O-Analysis" />

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "generate-icons": "node scripts/generate-pwa-icons.mjs",
+    "generate-og-image": "bun run scripts/generate-og-image.mjs",
     "build": "bun run generate-icons && tsc -b && vite build",
     "lint": "oxlint",
     "test": "vitest run",

scripts/generate-og-image.mjs

@@ -0,0 +1,34 @@
+import { readFileSync, writeFileSync } from 'node:fs'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import sharp from 'sharp'
+
+const root = join(dirname(fileURLToPath(import.meta.url)), '..')
+const WIDTH = 1200
+const HEIGHT = 630
+
+const BACKGROUND = '#111111'
+const TITLE = '#fafafa'
+const TAGLINE = '#a3a3a3'
+const FONT = 'Helvetica, Arial, sans-serif'
+
+const logo = readFileSync(join(root, 'public/favicon.svg')).toString('base64')
+
+// Everything is centred on a single solid background
+const svg = `
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${WIDTH}" height="${HEIGHT}" viewBox="0 0 ${WIDTH} ${HEIGHT}">
+  <rect width="${WIDTH}" height="${HEIGHT}" fill="${BACKGROUND}"/>
+
+  <image href="data:image/svg+xml;base64,${logo}" x="${WIDTH / 2 - 56}" y="153" width="112" height="112"/>
+
+  <text x="${WIDTH / 2}" y="351" text-anchor="middle" font-family="${FONT}" font-size="92" font-weight="700" fill="${TITLE}" letter-spacing="-2">O-Analysis</text>
+
+  <text text-anchor="middle" font-family="${FONT}" font-size="34" fill="${TAGLINE}">
+    <tspan x="${WIDTH / 2}" y="429">Analyze and annotate your</tspan>
+    <tspan x="${WIDTH / 2}" y="473">orienteering sessions</tspan>
+  </text>
+</svg>`
+
+const png = await sharp(Buffer.from(svg)).png().toBuffer()
+writeFileSync(join(root, 'public/og-image.png'), png)
+console.log(`Generated og-image.png (${WIDTH}x${HEIGHT})`)