killerwolf · killerwolf · Sep 6, 2026 · Sep 6, 2026 · Sep 6, 2026 · Sep 6, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,15 @@ release steps in [CONTRIBUTING.md](CONTRIBUTING.md).
 
 ## [Unreleased]
 
+### Added
+
+- Open Graph and Twitter card metadata on the demo site, plus a description and
+  canonical URL. Links to the demo previously rendered as a bare URL with no
+  preview anywhere they were shared, and search engines had no description to
+  index the page on.
+- A 1200x630 social card, `demo/social-preview.jpg`, rendered from the demo
+  itself so it shows the tool in use.
+
 ### Fixed
 
 - Partial style overrides no longer discard the defaults. Passing something like

diff --git a/demo/index.html b/demo/index.html
@@ -2,8 +2,65 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <title>VisualImageTool – Demos</title>
+    <title>
+      Visual Image Tool — focal point &amp; crop zone picker for the web
+    </title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Zero-dependency vanilla JS tool that lets people pick a focal point and crop zone on an image, and hands you the pixel coordinates. Live demo, no install needed."
+    />
+    <link rel="canonical" href="https://h4md1.fr/visual-image-tool/" />
+
+    <link rel="icon" href="favicon.ico" sizes="any" />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="192x192"
+      href="android-chrome-192x192.png"
+    />
+    <link rel="apple-touch-icon" href="android-chrome-192x192.png" />
+    <meta name="theme-color" content="#222222" />
+
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Visual Image Tool" />
+    <meta
+      property="og:title"
+      content="Visual Image Tool — focal point & crop zone picker"
+    />
+    <meta
+      property="og:description"
+      content="Zero-dependency vanilla JS tool that lets people pick a focal point and crop zone on an image, and hands you the pixel coordinates. Live demo, no install needed."
+    />
+    <meta property="og:url" content="https://h4md1.fr/visual-image-tool/" />
+    <meta
+      property="og:image"
+      content="https://h4md1.fr/visual-image-tool/social-preview.jpg"
+    />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta
+      property="og:image:alt"
+      content="The tool in use: a landscape photo with a crop zone and a red focal point marker over it."
+    />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta
+      name="twitter:title"
+      content="Visual Image Tool — focal point & crop zone picker"
+    />
+    <meta
+      name="twitter:description"
+      content="Zero-dependency vanilla JS tool that lets people pick a focal point and crop zone on an image, and hands you the pixel coordinates. Live demo, no install needed."
+    />
+    <meta
+      name="twitter:image"
+      content="https://h4md1.fr/visual-image-tool/social-preview.jpg"
+    />
+    <meta
+      name="twitter:image:alt"
+      content="The tool in use: a landscape photo with a crop zone and a red focal point marker over it."
+    />
     <!-- Prism.js for syntax highlighting -->
     <link
       rel="stylesheet"
@@ -189,8 +246,8 @@
       />
       <h1 style="margin: 0.2em 0 0.1em 0; font-size: 2rem">VisualImageTool</h1>
       <p style="margin: 0 0 0.2em 0; font-size: 1.08em">
-        A lightweight vanilla JavaScript tool to define focus points and crop
-        zones on images.
+        Let people pick the focal point and crop zone. You get the pixel
+        coordinates.
       </p>
     </header>
     <main>

diff --git a/demo/social-preview.jpg b/demo/social-preview.jpg