diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index 890f4f5..44f4e22 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -40,6 +40,25 @@ export default defineConfig({
 			// TODO(Phase B): a header social link to the repo is deliberately omitted
 			// — the source/issues link lives understated in the footer instead.
 			customCss: ['./src/styles/global.css'],
+			// Open Graph / Twitter social card. Starlight emits og:title/url/type
+			// from `site`, but not an image, so add a single site-wide card.
+			// Source: src/assets/og-card.svg → public/og-card.png (rasterise with
+			// sharp; see the SVG header for the one-liner). Absolute URL required
+			// by scrapers — derived from the `site` origin.
+			head: [
+				{ tag: 'meta', attrs: { property: 'og:image', content: 'https://relplay.org/og-card.png' } },
+				{ tag: 'meta', attrs: { property: 'og:image:width', content: '1200' } },
+				{ tag: 'meta', attrs: { property: 'og:image:height', content: '630' } },
+				{
+					tag: 'meta',
+					attrs: {
+						property: 'og:image:alt',
+						content: 'RDBMS Playground — learn relational databases by doing.',
+					},
+				},
+				{ tag: 'meta', attrs: { name: 'twitter:card', content: 'summary_large_image' } },
+				{ tag: 'meta', attrs: { name: 'twitter:image', content: 'https://relplay.org/og-card.png' } },
+			],
 			// Register the simple-mode command grammar with Expressive Code (Shiki).
 			expressiveCode: { shiki: { langs: [rdbmsLang, rdbmsSyntax] } },
 			// Pragmatic structure (ADR-website-001 §7 / website/STYLE.md): Getting
diff --git a/website/public/og-card.png b/website/public/og-card.png
new file mode 100644
index 0000000..7c86a38
Binary files /dev/null and b/website/public/og-card.png differ
diff --git a/website/src/assets/og-card.svg b/website/src/assets/og-card.svg
new file mode 100644
index 0000000..8a5da1a
--- /dev/null
+++ b/website/src/assets/og-card.svg
@@ -0,0 +1,33 @@
+<svg width="1200" height="630" viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg">
+  <!-- Source for the Open Graph social card. Dark = the app's own background;
+       teal = the in-TUI identifier colour; monospace = the terminal aesthetic.
+       Regenerate the PNG after editing:
+       node -e "require('sharp')('src/assets/og-card.svg').resize(1200,630).png().toFile('public/og-card.png')"
+  -->
+  <rect width="1200" height="630" fill="#181B22"/>
+
+  <!-- right: a database-table motif (the brand mark at hero scale) -->
+  <g stroke="#56B6C2" stroke-width="2.4" fill="none" opacity="0.5">
+    <rect x="772" y="166" width="350" height="298" rx="16"/>
+    <path d="M772 232 H1122"/>
+    <path d="M905 166 V464"/>
+    <path d="M772 298 H1122"/>
+    <path d="M772 364 H1122"/>
+    <path d="M772 430 H1122"/>
+  </g>
+  <circle cx="812" cy="199" r="11" fill="#56B6C2" opacity="0.9"/>
+
+  <!-- left: the brand -->
+  <!-- eyebrow: the relplay / RDBMS reveal, in miniature -->
+  <text x="92" y="206" font-family="'Liberation Mono', monospace" font-size="27" letter-spacing="-0.5">
+    <tspan fill="#56B6C2" font-weight="bold">REL</tspan><tspan fill="#8B909A">ational </tspan><tspan fill="#56B6C2" font-weight="bold">PLAY</tspan><tspan fill="#8B909A">ground</tspan>
+  </text>
+
+  <text x="90" y="306" font-family="'Liberation Mono', monospace" font-weight="bold" font-size="60" fill="#E6E6E6" letter-spacing="-1">RDBMS Playground</text>
+
+  <rect x="92" y="332" width="108" height="6" rx="3" fill="#56B6C2"/>
+
+  <text x="92" y="402" font-family="'Liberation Mono', monospace" font-size="30" fill="#A9AEB8">Learn relational databases by doing.</text>
+
+  <text x="92" y="556" font-family="'Liberation Mono', monospace" font-size="29" fill="#56B6C2"><tspan fill="#4A5265">▸ </tspan>relplay.org</text>
+</svg>