feat(seo): add Open Graph and Twitter card tags to dashboard

PROGRESS.md

@@ -319,3 +319,16 @@ is closed — see [CONTRIBUTING.md](CONTRIBUTING.md).
 - **By:** ALLEN-AYODEJI
 - **Closes:** N/A
 - **Status:** Merged.
+
+### Web dashboard — Open Graph and Twitter card tags
+
+- **What:** Shared dashboard links previously showed no preview card. Added
+  `og:title`, `og:description`, `og:type`, `og:url`, `og:image`
+  (1200×630 PNG in `frontend/public/og-image.png`) plus `og:image:width` /
+  `og:image:height` / `og:image:type` and matching `twitter:card`
+  `summary_large_image` tags to `frontend/index.html`. The card is derived
+  from `assets/banner.svg` — same background gradient, teal→blue title
+  gradient, radar mark, and "LIVE ON STELLAR TESTNET" pill.
+- **By:** Adventure Agent
+- **Closes:** #169
+- **Status:** Open PR.

frontend/index.html

@@ -7,6 +7,18 @@
     <meta name="theme-color" content="#060a14" />
     <title>DepRadar — Bounty Dashboard</title>
     <meta name="description" content="Read-only dashboard for DepRadar supply-chain security bounties on Stellar." />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://github.com/DepRadarOrg/DepRadar" />
+    <meta property="og:title" content="DepRadar — Supply-Chain Security Bounties on Stellar" />
+    <meta property="og:description" content="Securing the open source supply chain, one bounty at a time. Typosquat + CVE bounties on Stellar testnet." />
+    <meta property="og:image" content="https://raw.githubusercontent.com/DepRadarOrg/DepRadar/main/frontend/public/og-image.png" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:image:type" content="image/png" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="DepRadar — Supply-Chain Security Bounties on Stellar" />
+    <meta name="twitter:description" content="Securing the open source supply chain, one bounty at a time. Typosquat + CVE bounties on Stellar testnet." />
+    <meta name="twitter:image" content="https://raw.githubusercontent.com/DepRadarOrg/DepRadar/main/frontend/public/og-image.png" />
   </head>
   <body>
     <div id="root"></div>

screenshots/preview-card.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Link preview harness — DepRadar</title>
+<style>
+  body { margin: 0; background: #10151f; display: flex; align-items: center; justify-content: center; min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
+  .card {
+    width: 640px; background: #fff; border-radius: 16px; overflow: hidden;
+    box-shadow: 0 24px 70px rgba(0,0,0,.55);
+  }
+  .meta {
+    padding: 14px 16px; border-top: 1px solid #e6e9ee;
+  }
+  .site { color: #8899a6; font-size: 13px; line-height: 1.4; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+  .title { color: #0f1419; font-weight: 700; font-size: 15px; line-height: 1.35; margin-top: 4px; }
+  .desc { color: #5b6b7b; font-size: 14px; line-height: 1.4; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+</style>
+</head>
+<body>
+  <div class="card">
+    <img src="og-image.png" alt="DepRadar OG card" width="640" height="336" style="display:block;width:100%;">
+    <div class="meta">
+      <div class="site">github.com/DepRadarOrg/DepRadar</div>
+      <div class="title">DepRadar — Supply-Chain Security Bounties on Stellar</div>
+      <div class="desc">Securing the open source supply chain, one bounty at a time. Typosquat + CVE bounties on Stellar testnet.</div>
+    </div>
+  </div>
+</body>
+</html>