feat(meta): give the site a real social preview

app/layout.tsx

@@ -24,8 +24,19 @@ const serif = Fraunces({
 });
 
 export const metadata = {
+  // Load-bearing: Next resolves the generated og:image against metadataBase.
+  // Without it the tag is emitted as http://localhost:3000/opengraph-image —
+  // present, plausible, and unfetchable by every social scraper.
+  metadataBase: new URL(site.url),
   title: `${site.name} — ${site.tagline}`,
   description: site.description,
+  openGraph: {
+    title: `${site.name} — ${site.tagline}`,
+    description: site.description,
+    url: site.url,
+    siteName: site.name,
+    type: 'website',
+  },
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {

app/opengraph-image.tsx

@@ -0,0 +1,75 @@
+import { ImageResponse } from 'next/og';
+import { site } from '@/lib/site';
+
+/**
+ * Social preview card, generated by Next's file convention at 1200x630 —
+ * the 1.91:1 size Slack, Telegram and the OpenGraph scrapers crop to.
+ *
+ * Botsmann shipped no og:image, so every shared link rendered as a blank
+ * rectangle. Copy comes from lib/site.ts so the card cannot drift from the
+ * hero and footer; only the palette is repeated, because Satori cannot read
+ * CSS custom properties. globals.css stays the source of truth for those.
+ */
+
+export const runtime = 'edge';
+export const alt = `${site.name} — ${site.tagline}`;
+export const size = { width: 1200, height: 630 };
+export const contentType = 'image/png';
+
+// Mirrors --primitive-ink-950 / --primitive-paper / --primitive-ochre-600
+const INK = '#1A1714';
+const PAPER = '#FAF8F4';
+const OCHRE = '#B45309';
+const MUTED = '#6F655C';
+
+export default function OGImage() {
+  return new ImageResponse(
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        background: PAPER,
+        padding: '72px 80px',
+        fontFamily: 'serif',
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+        <div
+          style={{ width: 18, height: 18, borderRadius: 4, background: OCHRE, display: 'flex' }}
+        />
+        <div style={{ fontSize: 30, fontWeight: 700, color: INK, letterSpacing: '-0.01em' }}>
+          {site.name}
+        </div>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <div
+          style={{
+            fontSize: 88,
+            fontWeight: 700,
+            letterSpacing: '-0.03em',
+            lineHeight: 1.04,
+            color: INK,
+            maxWidth: 960,
+          }}
+        >
+          {site.tagline}
+        </div>
+        <div style={{ marginTop: 28, fontSize: 32, lineHeight: 1.35, color: MUTED, maxWidth: 900 }}>
+          Private AI that works with your data — answers with citations.
+        </div>
+      </div>
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
+        <div
+          style={{ width: 64, height: 5, borderRadius: 999, background: OCHRE, display: 'flex' }}
+        />
+        <div style={{ fontSize: 24, color: MUTED }}>botsmann.orangecat.ch</div>
+      </div>
+    </div>,
+    { ...size },
+  );
+}

lib/site.ts

@@ -10,7 +10,11 @@ export const site = {
   tagline: 'Your Private AI Professionals',
   description:
     'Private AI that works with your data. Upload documents, ask questions, get answers with citations. Pre-built assistants for legal, medical, research, and more.',
-  url: 'https://botsmann.com',
+  // Where the site ACTUALLY serves. botsmann.com has no DNS A record, so
+  // everything derived from this — canonical URL, og:image, sitemap entries —
+  // pointed at a host that does not resolve. Point it back only once that
+  // domain is live.
+  url: 'https://botsmann.orangecat.ch',
   author: 'Botsmann AI',
   social: {
     github: 'https://github.com/g-but',