diff --git a/demo/favicon.svg b/demo/favicon.svg
new file mode 100644
index 0000000..ce605fd
--- /dev/null
+++ b/demo/favicon.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="14" fill="#0f1117"/>
+  <rect x="12" y="17" width="40" height="11" rx="5.5" fill="rgba(248,81,73,0.28)"/>
+  <rect x="15" y="21.5" width="34" height="2" fill="#ffa198"/>
+  <rect x="12" y="36" width="28" height="11" rx="5.5" fill="rgba(63,185,80,0.32)"/>
+  <rect x="15" y="40" width="22" height="3" rx="1.5" fill="#7ee787"/>
+</svg>
diff --git a/demo/index.html b/demo/index.html
index 4e7fb91..fcb783b 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -3,7 +3,47 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>@krkarma777/string-diff — demo</title>
+<title>Text Diff Tool — Compare Two Strings Online | string-diff</title>
+<meta name="description" content="Compare two strings by word, character, or line — differences highlighted instantly. Built on @krkarma777/string-diff, a fast, zero-dependency Myers diff library for JavaScript & TypeScript.">
+<link rel="canonical" href="https://krkarma777.github.io/string-diff/">
+<link rel="icon" type="image/svg+xml" href="./favicon.svg">
+<meta name="theme-color" content="#0f1117">
+
+<meta property="og:type" content="website">
+<meta property="og:site_name" content="string-diff">
+<meta property="og:title" content="string-diff — Fast Text Diff & String Comparison for JS/TS">
+<meta property="og:description" content="Compare two strings by word, character, or line — Myers O(ND) shortest edit script, zero dependencies, Unicode-safe (Korean, CJK, emoji), ~2.9 kB min+gzip.">
+<meta property="og:url" content="https://krkarma777.github.io/string-diff/">
+<meta property="og:image" content="https://krkarma777.github.io/string-diff/og-image.png">
+<meta property="og:image:width" content="2560">
+<meta property="og:image:height" content="1280">
+<meta property="og:image:alt" content="string-diff — fast text diff for JavaScript and TypeScript. Myers O(ND), zero dependencies, Unicode-safe.">
+
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="string-diff — Fast Text Diff & String Comparison for JS/TS">
+<meta name="twitter:description" content="Compare two strings by word, character, or line — Myers O(ND) shortest edit script, zero dependencies, Unicode-safe (Korean, CJK, emoji), ~2.9 kB min+gzip.">
+<meta name="twitter:image" content="https://krkarma777.github.io/string-diff/og-image.png">
+
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "WebApplication",
+  "name": "string-diff",
+  "alternateName": "@krkarma777/string-diff",
+  "url": "https://krkarma777.github.io/string-diff/",
+  "description": "Online text diff tool that compares two strings by word, character, or line using the Myers O(ND) shortest edit script algorithm. Zero dependencies, Unicode-safe.",
+  "applicationCategory": "DeveloperApplication",
+  "operatingSystem": "Any",
+  "browserRequirements": "Requires JavaScript",
+  "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
+  "author": { "@type": "Person", "name": "krkarma777", "url": "https://github.com/krkarma777" },
+  "sameAs": [
+    "https://github.com/krkarma777/string-diff",
+    "https://www.npmjs.com/package/@krkarma777/string-diff"
+  ],
+  "license": "https://github.com/krkarma777/string-diff/blob/master/LICENSE"
+}
+</script>
 <style>
   :root {
     --bg: #0f1117;
@@ -96,12 +136,16 @@
   #result .del { background: var(--del-bg); color: var(--del-text); text-decoration: line-through; border-radius: 3px; }
   #result .ins { background: var(--ins-bg); color: var(--ins-text); border-radius: 3px; }
   #result .empty { color: var(--muted); }
+  footer { margin-top: 28px; color: var(--muted); font-size: 13px; }
+  footer a { color: var(--accent); text-decoration: none; }
+  footer a:hover { text-decoration: underline; }
+  footer code { font-family: ui-monospace, "SF Mono", Menlo, monospace; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; }
 </style>
 </head>
 <body>
 <main>
   <h1><code>@krkarma777/string-diff</code> demo</h1>
-  <p class="sub">Myers O(ND) shortest-edit-script diff · token interning · typed arrays · zero dependencies</p>
+  <p class="sub">Compare two strings by word, character, or line — Myers O(ND) shortest-edit-script diff · typed arrays · zero dependencies</p>
 
   <div class="inputs">
     <div>
@@ -127,6 +171,12 @@ <h1><code>@krkarma777/string-diff</code> demo</h1>
   </div>
 
   <div id="result"><span class="empty">Press Compare to see the diff.</span></div>
+
+  <footer>
+    <a href="https://github.com/krkarma777/string-diff">GitHub</a> ·
+    <a href="https://www.npmjs.com/package/@krkarma777/string-diff">npm</a> ·
+    <code>npm i @krkarma777/string-diff</code> · MIT
+  </footer>
 </main>
 
 <script src="./string-diff.min.js"></script>
diff --git a/demo/og-image.png b/demo/og-image.png
new file mode 100644
index 0000000..d73c09b
Binary files /dev/null and b/demo/og-image.png differ
diff --git a/scripts/og-image.html b/scripts/og-image.html
new file mode 100644
index 0000000..2b4e1c7
--- /dev/null
+++ b/scripts/og-image.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<!--
+  Source for demo/og-image.png (GitHub social preview + og:image).
+  Regenerate with:
+    "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless=new --disable-gpu \
+      --screenshot=demo/og-image.png --window-size=1280,640 --force-device-scale-factor=2 \
+      scripts/og-image.html
+-->
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<style>
+  :root {
+    --bg: #0f1117;
+    --panel: #171a23;
+    --border: #2a2f3d;
+    --text: #e6e9f0;
+    --muted: #8b91a3;
+    --accent: #6ea8fe;
+    --del-bg: rgba(248, 81, 73, 0.22);
+    --del-text: #ffa198;
+    --ins-bg: rgba(63, 185, 80, 0.22);
+    --ins-text: #7ee787;
+  }
+  * { box-sizing: border-box; margin: 0; }
+  html, body { width: 1280px; height: 640px; overflow: hidden; }
+  body {
+    background:
+      radial-gradient(900px 500px at 85% -10%, rgba(110, 168, 254, 0.14), transparent 65%),
+      radial-gradient(700px 400px at -5% 110%, rgba(63, 185, 80, 0.10), transparent 60%),
+      var(--bg);
+    color: var(--text);
+    font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
+    padding: 72px 84px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .pkg {
+    font-family: ui-monospace, "SF Mono", Menlo, monospace;
+    font-size: 26px;
+    color: var(--accent);
+  }
+  h1 {
+    font-size: 78px;
+    font-weight: 800;
+    letter-spacing: -0.02em;
+    line-height: 1.12;
+  }
+  .sample {
+    display: inline-block;
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    padding: 22px 30px;
+    font-family: ui-monospace, "SF Mono", Menlo, monospace;
+    font-size: 32px;
+    align-self: flex-start;
+  }
+  .sample .del { background: var(--del-bg); color: var(--del-text); text-decoration: line-through; border-radius: 6px; padding: 2px 6px; }
+  .sample .ins { background: var(--ins-bg); color: var(--ins-text); border-radius: 6px; padding: 2px 6px; }
+  .sample .ms { color: var(--muted); font-size: 24px; margin-left: 18px; }
+  .chips { display: flex; gap: 16px; }
+  .chip {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    padding: 12px 26px;
+    font-size: 24px;
+    color: var(--muted);
+    white-space: nowrap;
+  }
+  .chip strong { color: var(--text); font-weight: 600; }
+</style>
+</head>
+<body>
+  <div class="pkg">@krkarma777/string-diff</div>
+  <h1>Fast text diff for<br>JavaScript &amp; TypeScript</h1>
+  <div class="sample">the <span class="del">quick</span> <span class="ins">slow</span> fox — 안녕하세요 <span class="del">👋</span> <span class="ins">🌍</span><span class="ms">diff in 0.03 ms</span></div>
+  <div class="chips">
+    <div class="chip"><strong>Myers O(ND)</strong>&nbsp;exact</div>
+    <div class="chip"><strong>0</strong>&nbsp;dependencies</div>
+    <div class="chip"><strong>~2.9 kB</strong>&nbsp;min+gzip</div>
+    <div class="chip"><strong>Unicode-safe</strong>&nbsp;· CJK · emoji</div>
+  </div>
+</body>
+</html>
