From f477e44c46356423505eb5c52442250053d1b26f Mon Sep 17 00:00:00 2001
From: neonwatty <jermwatt@gmail.com>
Date: Mon, 11 May 2026 08:18:35 -0700
Subject: [PATCH] Improve SEO and GEO coverage

---
 next.config.ts                                |   5 -
 package.json                                  |   3 +-
 public/9e9b2f84b7c74e7c95ff41b4d1a4d10f.txt   |   1 +
 scripts/submit-indexnow.mjs                   |  29 ++
 src/app/compare/[slug]/page.tsx               |  25 +-
 src/app/compare/page.tsx                      |  34 ++-
 src/app/demo/page.tsx                         | 112 ++++++++
 src/app/docs/[slug]/page.tsx                  |  36 ++-
 src/app/docs/page.tsx                         |  32 ++-
 src/app/layout.tsx                            |  10 +-
 src/app/page.tsx                              |  69 +----
 src/app/robots.ts                             |   9 +-
 src/app/sitemap.ts                            |  20 +-
 src/app/use-cases/[slug]/page.tsx             |  25 +-
 src/app/use-cases/page.tsx                    |  35 ++-
 src/components/footer.tsx                     |  16 +-
 src/components/landing/features.tsx           |  12 +-
 src/components/landing/hero.tsx               |  26 +-
 src/content/compare/bugherd.mdx               |  34 +++
 src/content/compare/marker-io.mdx             |  34 +++
 .../compare/open-source-feedback-tools.mdx    |  36 +++
 src/content/compare/usersnap.mdx              |  32 +++
 .../use-cases/github-issues-feedback.mdx      |  26 ++
 .../use-cases/nextjs-feedback-widget.mdx      |  30 +++
 .../use-cases/visual-bug-reporting.mdx        |  25 ++
 src/lib/compare-nav.ts                        |  24 ++
 src/lib/docs-nav.ts                           |  78 +++++-
 src/lib/seo.ts                                | 255 ++++++++++++++++++
 src/lib/use-cases-nav.ts                      |  21 ++
 29 files changed, 953 insertions(+), 141 deletions(-)
 create mode 100644 public/9e9b2f84b7c74e7c95ff41b4d1a4d10f.txt
 create mode 100644 scripts/submit-indexnow.mjs
 create mode 100644 src/app/demo/page.tsx
 create mode 100644 src/content/compare/bugherd.mdx
 create mode 100644 src/content/compare/marker-io.mdx
 create mode 100644 src/content/compare/open-source-feedback-tools.mdx
 create mode 100644 src/content/compare/usersnap.mdx
 create mode 100644 src/content/use-cases/github-issues-feedback.mdx
 create mode 100644 src/content/use-cases/nextjs-feedback-widget.mdx
 create mode 100644 src/content/use-cases/visual-bug-reporting.mdx
 create mode 100644 src/lib/seo.ts

diff --git a/next.config.ts b/next.config.ts
index d389e9c..4acd9e4 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -19,11 +19,6 @@ const nextConfig: NextConfig = {
   },
   async redirects() {
     return [
-      {
-        source: "/demo",
-        destination: "https://bugdrop-widget-test.vercel.app",
-        permanent: false,
-      },
       {
         source: "/:path*",
         has: [{ type: "host", value: "www.bugdrop.dev" }],
diff --git a/package.json b/package.json
index 342eb01..ab57d40 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint"
+    "lint": "eslint",
+    "indexnow": "node scripts/submit-indexnow.mjs"
   },
   "dependencies": {
     "@base-ui/react": "^1.3.0",
diff --git a/public/9e9b2f84b7c74e7c95ff41b4d1a4d10f.txt b/public/9e9b2f84b7c74e7c95ff41b4d1a4d10f.txt
new file mode 100644
index 0000000..8126c21
--- /dev/null
+++ b/public/9e9b2f84b7c74e7c95ff41b4d1a4d10f.txt
@@ -0,0 +1 @@
+9e9b2f84b7c74e7c95ff41b4d1a4d10f
diff --git a/scripts/submit-indexnow.mjs b/scripts/submit-indexnow.mjs
new file mode 100644
index 0000000..09e10b2
--- /dev/null
+++ b/scripts/submit-indexnow.mjs
@@ -0,0 +1,29 @@
+const key = "9e9b2f84b7c74e7c95ff41b4d1a4d10f";
+const host = "bugdrop.dev";
+const keyLocation = `https://${host}/${key}.txt`;
+
+const sitemap = await fetch(`https://${host}/sitemap.xml`).then((response) => {
+  if (!response.ok) {
+    throw new Error(`Failed to fetch sitemap: ${response.status}`);
+  }
+  return response.text();
+});
+
+const urlList = [...sitemap.matchAll(/<loc>(.*?)<\/loc>/g)].map((match) => match[1]);
+
+const response = await fetch("https://api.indexnow.org/IndexNow", {
+  method: "POST",
+  headers: { "content-type": "application/json; charset=utf-8" },
+  body: JSON.stringify({
+    host,
+    key,
+    keyLocation,
+    urlList,
+  }),
+});
+
+if (!response.ok) {
+  throw new Error(`IndexNow submission failed: ${response.status} ${await response.text()}`);
+}
+
+console.log(`Submitted ${urlList.length} URLs to IndexNow.`);
diff --git a/src/app/compare/[slug]/page.tsx b/src/app/compare/[slug]/page.tsx
index c6e1116..11c04b2 100644
--- a/src/app/compare/[slug]/page.tsx
+++ b/src/app/compare/[slug]/page.tsx
@@ -3,6 +3,8 @@ import { notFound } from "next/navigation";
 import { compareNav } from "@/lib/compare-nav";
 import { MARKETPLACE_URL } from "@/lib/links";
 import Link from "next/link";
+import { JsonLd } from "@/components/json-ld";
+import { articleSchema, breadcrumbSchema, pageMetadata } from "@/lib/seo";
 
 export function generateStaticParams() {
   return compareNav.map((c) => ({ slug: c.slug }));
@@ -17,13 +19,12 @@ export async function generateMetadata({
   const comparison = compareNav.find((c) => c.slug === slug);
   if (!comparison) notFound();
 
-  return {
+  return pageMetadata({
     title: `${comparison.title} — BugDrop`,
     description: comparison.description,
-    alternates: {
-      canonical: `/compare/${slug}`,
-    },
-  };
+    path: `/compare/${slug}`,
+    type: "article",
+  });
 }
 
 export default async function ComparePage({
@@ -38,6 +39,20 @@ export default async function ComparePage({
     const Content = (await import(`@/content/compare/${slug}.mdx`)).default;
     return (
       <div>
+        <JsonLd
+          data={breadcrumbSchema([
+            { name: "Home", path: "/" },
+            { name: "Compare", path: "/compare" },
+            { name: comparison.title, path: `/compare/${slug}` },
+          ])}
+        />
+        <JsonLd
+          data={articleSchema({
+            title: `${comparison.title} — BugDrop`,
+            description: comparison.description,
+            path: `/compare/${slug}`,
+          })}
+        />
         <Link
           href="/compare"
           className="text-accent-cyan hover:underline text-sm mb-6 block"
diff --git a/src/app/compare/page.tsx b/src/app/compare/page.tsx
index 41d76a3..c5b9699 100644
--- a/src/app/compare/page.tsx
+++ b/src/app/compare/page.tsx
@@ -1,21 +1,39 @@
 import Link from "next/link";
 import type { Metadata } from "next";
 import { compareNav } from "@/lib/compare-nav";
+import { JsonLd } from "@/components/json-ld";
+import { articleSchema, breadcrumbSchema, pageMetadata } from "@/lib/seo";
 
-export const metadata: Metadata = {
-  title: "Compare — BugDrop",
-  description: "See how BugDrop compares to other feedback tools.",
-  alternates: {
-    canonical: "/compare",
-  },
-};
+const description =
+  "Compare BugDrop with Userback, Canny, Sentry User Feedback, Marker.io, BugHerd, Usersnap, and other website feedback tools.";
+
+export const metadata: Metadata = pageMetadata({
+  title: "Compare BugDrop",
+  description,
+  path: "/compare",
+  type: "article",
+});
 
 export default function CompareIndex() {
   return (
     <div>
+      <JsonLd
+        data={breadcrumbSchema([
+          { name: "Home", path: "/" },
+          { name: "Compare", path: "/compare" },
+        ])}
+      />
+      <JsonLd
+        data={articleSchema({
+          title: "Compare BugDrop",
+          description,
+          path: "/compare",
+        })}
+      />
       <h1 className="text-3xl font-bold text-text-primary mb-2">Compare</h1>
       <p className="text-text-subtle mb-10">
-        See how BugDrop compares to other feedback tools.
+        Compare BugDrop with visual feedback, roadmap, and customer feedback
+        tools to choose the right workflow for GitHub-native bug reports.
       </p>
       <div className="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-6">
         {compareNav.map((c) => (
diff --git a/src/app/demo/page.tsx b/src/app/demo/page.tsx
new file mode 100644
index 0000000..5ea26d8
--- /dev/null
+++ b/src/app/demo/page.tsx
@@ -0,0 +1,112 @@
+import type { Metadata } from "next";
+import { ArrowUpRight, CirclePlay, Code2, MessageSquare } from "lucide-react";
+import { JsonLd } from "@/components/json-ld";
+import { DEMO_URL, GITHUB_REPO_URL, MARKETPLACE_URL } from "@/lib/links";
+import { breadcrumbSchema, pageMetadata, videoSchema } from "@/lib/seo";
+
+const description =
+  "Try the BugDrop demo to test a website feedback widget that captures screenshots, annotations, redaction, system info, and GitHub Issues.";
+
+export const metadata: Metadata = pageMetadata({
+  title: "BugDrop Demo",
+  description,
+  path: "/demo",
+});
+
+export default function DemoPage() {
+  return (
+    <main>
+      <JsonLd
+        data={breadcrumbSchema([
+          { name: "Home", path: "/" },
+          { name: "Demo", path: "/demo" },
+        ])}
+      />
+      <JsonLd data={videoSchema()} />
+      <section className="mb-12">
+        <p className="mb-3 text-sm font-medium text-accent-cyan">Live demo</p>
+        <h1 className="mb-5 text-4xl font-semibold leading-tight text-text-primary max-sm:text-3xl">
+          Try BugDrop on a sample app
+        </h1>
+        <p className="max-w-[720px] text-lg leading-relaxed text-text-subtle">
+          The BugDrop demo shows the full website feedback flow: open the widget,
+          capture a screenshot, annotate the problem, redact sensitive regions,
+          and submit a GitHub Issue with browser and page context.
+        </p>
+      </section>
+
+      <div className="mb-14 grid gap-4 md:grid-cols-3">
+        <a
+          href={DEMO_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center justify-center gap-2 rounded-[10px] bg-accent-cyan px-5 py-3 font-medium text-bg-deep transition-all hover:-translate-y-0.5"
+        >
+          <ArrowUpRight className="size-4" aria-hidden="true" />
+          Open Live Demo
+        </a>
+        <a
+          href={MARKETPLACE_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center justify-center gap-2 rounded-[10px] bg-bg-surface px-5 py-3 font-medium text-text-primary transition-all hover:-translate-y-0.5"
+        >
+          <MessageSquare className="size-4" aria-hidden="true" />
+          Install BugDrop
+        </a>
+        <a
+          href={GITHUB_REPO_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center justify-center gap-2 rounded-[10px] border border-border px-5 py-3 font-medium text-text-primary transition-all hover:-translate-y-0.5 hover:bg-bg-surface"
+        >
+          <Code2 className="size-4" aria-hidden="true" />
+          View Source
+        </a>
+      </div>
+
+      <section className="mb-16 grid gap-6 md:grid-cols-2">
+        <div>
+          <h2 className="mb-3 text-2xl font-semibold text-text-primary">
+            What to test
+          </h2>
+          <ul className="list-disc space-y-2 pl-5 text-text-subtle">
+            <li>Open the feedback widget from the floating button.</li>
+            <li>Attach a screenshot and mark up the broken UI state.</li>
+            <li>Cover private screenshot regions before submitting.</li>
+            <li>Confirm the report includes URL, browser, viewport, and OS data.</li>
+            <li>Review the GitHub Issue format your team would receive.</li>
+          </ul>
+        </div>
+        <div>
+          <h2 className="mb-3 text-2xl font-semibold text-text-primary">
+            Why it matters
+          </h2>
+          <p className="text-text-subtle">
+            BugDrop is built for teams that already work in GitHub Issues. The
+            demo makes the workflow concrete: reporters do not need accounts,
+            developers get visual context, and sensitive page data can be masked
+            before the screenshot lands in your repository.
+          </p>
+        </div>
+      </section>
+
+      <section>
+        <h2 className="mb-6 flex items-center gap-3 text-2xl font-semibold text-text-primary">
+          <CirclePlay className="size-6 text-accent-cyan" aria-hidden="true" />
+          Watch the flow
+        </h2>
+        <div className="max-w-[640px] overflow-hidden rounded-xl border border-border bg-black">
+          <iframe
+            src="https://www.youtube.com/embed/VkLvP1xmRzo"
+            title="BugDrop Demo Video"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+            loading="lazy"
+            className="block aspect-[9/16] max-h-[520px] w-full border-none"
+          />
+        </div>
+      </section>
+    </main>
+  );
+}
diff --git a/src/app/docs/[slug]/page.tsx b/src/app/docs/[slug]/page.tsx
index 87c7f26..e85ba8f 100644
--- a/src/app/docs/[slug]/page.tsx
+++ b/src/app/docs/[slug]/page.tsx
@@ -2,6 +2,14 @@ import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { docsNav } from "@/lib/docs-nav";
 import Link from "next/link";
+import { JsonLd } from "@/components/json-ld";
+import {
+  articleSchema,
+  breadcrumbSchema,
+  faqSchema,
+  pageMetadata,
+  videoSchema,
+} from "@/lib/seo";
 
 export function generateStaticParams() {
   return docsNav
@@ -18,12 +26,12 @@ export async function generateMetadata({
   const doc = docsNav.find((d) => d.slug === slug);
   if (!doc) notFound();
 
-  return {
+  return pageMetadata({
     title: `${doc.title} — BugDrop Docs`,
-    alternates: {
-      canonical: `/docs/${slug}`,
-    },
-  };
+    description: doc.description,
+    path: `/docs/${slug}`,
+    type: "article",
+  });
 }
 
 export default async function DocPage({
@@ -34,6 +42,7 @@ export default async function DocPage({
   const { slug } = await params;
   const currentIndex = docsNav.findIndex((d) => d.slug === slug);
   if (currentIndex === -1) notFound();
+  const doc = docsNav[currentIndex];
 
   try {
     const Content = (await import(`@/content/docs/${slug}.mdx`)).default;
@@ -42,6 +51,23 @@ export default async function DocPage({
       currentIndex < docsNav.length - 1 ? docsNav[currentIndex + 1] : null;
     return (
       <div>
+        <JsonLd
+          data={breadcrumbSchema([
+            { name: "Home", path: "/" },
+            { name: "Docs", path: "/docs" },
+            { name: doc.title, path: `/docs/${slug}` },
+          ])}
+        />
+        <JsonLd
+          data={articleSchema({
+            title: `${doc.title} — BugDrop Docs`,
+            description: doc.description,
+            path: `/docs/${slug}`,
+            type: "TechArticle",
+          })}
+        />
+        {slug === "faq" ? <JsonLd data={faqSchema()} /> : null}
+        {slug === "demo" ? <JsonLd data={videoSchema()} /> : null}
         <Content />
         <nav className="flex justify-between mt-12 pt-6 border-t border-border">
           {prev ? (
diff --git a/src/app/docs/page.tsx b/src/app/docs/page.tsx
index 2e42faf..b1aa89b 100644
--- a/src/app/docs/page.tsx
+++ b/src/app/docs/page.tsx
@@ -2,18 +2,36 @@ import Link from "next/link";
 import type { Metadata } from "next";
 import { PlayCircle } from "lucide-react";
 import { DEMO_PATH } from "@/lib/links";
+import { JsonLd } from "@/components/json-ld";
+import { articleSchema, breadcrumbSchema, pageMetadata } from "@/lib/seo";
 
-export const metadata: Metadata = {
-  title: "Docs — BugDrop",
-  description: "BugDrop documentation.",
-  alternates: {
-    canonical: "/docs",
-  },
-};
+const description =
+  "Documentation for installing, configuring, styling, testing, securing, and self-hosting the BugDrop website feedback widget.";
+
+export const metadata: Metadata = pageMetadata({
+  title: "BugDrop Docs",
+  description,
+  path: "/docs",
+  type: "article",
+});
 
 export default function DocsIndex() {
   return (
     <div>
+      <JsonLd
+        data={breadcrumbSchema([
+          { name: "Home", path: "/" },
+          { name: "Docs", path: "/docs" },
+        ])}
+      />
+      <JsonLd
+        data={articleSchema({
+          title: "BugDrop Docs",
+          description,
+          path: "/docs",
+          type: "TechArticle",
+        })}
+      />
       <h1 className="text-3xl font-bold text-text-primary mb-4">Getting Started</h1>
       <p className="text-text-subtle mb-6 leading-relaxed">
         BugDrop is an open-source feedback widget that turns user bug reports into GitHub issues.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 78cb6f8..24ae776 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import { Space_Grotesk, JetBrains_Mono } from "next/font/google";
 import "./globals.css";
 import { Nav } from "@/components/nav";
 import { Footer } from "@/components/footer";
+import { homeDescription } from "@/lib/seo";
 
 const spaceGrotesk = Space_Grotesk({
   subsets: ["latin"],
@@ -18,8 +19,7 @@ const jetbrainsMono = JetBrains_Mono({
 
 export const metadata: Metadata = {
   title: "BugDrop - Free Website Feedback Widget for GitHub Issues",
-  description:
-    "Free, open source website feedback widget by mean-weasel. Users report bugs with screenshots and annotations — issues are created in GitHub automatically. One script tag, zero config.",
+  description: homeDescription,
   keywords: [
     "BugDrop",
     "mean-weasel",
@@ -31,8 +31,7 @@ export const metadata: Metadata = {
   metadataBase: new URL("https://bugdrop.dev"),
   openGraph: {
     title: "BugDrop - Free Website Feedback Widget for GitHub Issues",
-    description:
-      "Free, open source website feedback widget by mean-weasel. Users report bugs with screenshots and annotations — issues are created in GitHub automatically.",
+    description: homeDescription,
     url: "https://bugdrop.dev",
     siteName: "BugDrop",
     type: "website",
@@ -40,8 +39,7 @@ export const metadata: Metadata = {
   twitter: {
     card: "summary_large_image",
     title: "BugDrop - Free Website Feedback Widget for GitHub Issues",
-    description:
-      "Free, open source website feedback widget. Users report bugs with screenshots and annotations — issues are created in GitHub automatically.",
+    description: homeDescription,
   },
   verification: {
     google: "sTi4vjMGXpdkvZcZQnRhs9u-uVyxsqTHOIR_txqHR-w",
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d1f3a35..8838fb6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,12 +11,11 @@ import { ConfigTable } from "@/components/landing/config-table";
 import { TryCallout } from "@/components/landing/try-callout";
 import { JsonLd } from "@/components/json-ld";
 import {
-  GITHUB_ORG_URL,
-  GITHUB_PROFILE_URL,
-  GITHUB_REPO_URL,
-  GITHUB_WEB_REPO_URL,
-  MARKETPLACE_URL,
-  PRODUCT_HUNT_URL,
+  organizationSchema,
+  softwareApplicationSchema,
+  websiteSchema,
+} from "@/lib/seo";
+import {
   SAMPLE_DEMO_REPO,
   WIDGET_URL,
 } from "@/lib/links";
@@ -27,64 +26,12 @@ export const metadata: Metadata = {
   },
 };
 
-const structuredData = {
-  "@context": "https://schema.org",
-  "@type": "SoftwareApplication",
-  name: "BugDrop",
-  description:
-    "Free, open-source website feedback widget that turns user bug reports into GitHub issues with screenshots, annotations, and system info.",
-  url: "https://bugdrop.dev",
-  applicationCategory: "DeveloperApplication",
-  operatingSystem: "Web",
-  offers: {
-    "@type": "Offer",
-    price: "0",
-    priceCurrency: "USD",
-  },
-  author: {
-    "@type": "Organization",
-    name: "mean-weasel",
-    url: GITHUB_ORG_URL,
-  },
-  creator: {
-    "@type": "Person",
-    name: "neonwatty",
-    url: GITHUB_PROFILE_URL,
-  },
-  publisher: {
-    "@type": "Organization",
-    name: "mean-weasel",
-    url: GITHUB_ORG_URL,
-  },
-  license: "https://opensource.org/licenses/MIT",
-  codeRepository: GITHUB_REPO_URL,
-  sameAs: [
-    MARKETPLACE_URL,
-    PRODUCT_HUNT_URL,
-    GITHUB_REPO_URL,
-    GITHUB_WEB_REPO_URL,
-    GITHUB_ORG_URL,
-    GITHUB_PROFILE_URL,
-  ],
-  award: "Product Hunt #6 Product of the Day, May 9, 2026",
-  featureList: [
-    "Screenshot capture",
-    "Annotation tools",
-    "Screenshot redaction",
-    "Developer-configured privacy masking",
-    "Automatic password and credit-card field masking",
-    "Automatic system info",
-    "GitHub issue creation",
-    "Fully stylable widget",
-    "Shadow DOM isolation",
-    "Privacy-first design",
-  ],
-};
-
 export default function Home() {
   return (
     <main>
-      <JsonLd data={structuredData} />
+      <JsonLd data={softwareApplicationSchema()} />
+      <JsonLd data={organizationSchema()} />
+      <JsonLd data={websiteSchema()} />
       <Script
         src={WIDGET_URL}
         strategy="afterInteractive"
diff --git a/src/app/robots.ts b/src/app/robots.ts
index 2850234..357275f 100644
--- a/src/app/robots.ts
+++ b/src/app/robots.ts
@@ -2,7 +2,14 @@ import type { MetadataRoute } from "next";
 
 export default function robots(): MetadataRoute.Robots {
   return {
-    rules: { userAgent: "*", allow: "/" },
+    rules: [
+      { userAgent: "*", allow: "/" },
+      { userAgent: "Googlebot", allow: "/" },
+      { userAgent: "Bingbot", allow: "/" },
+      { userAgent: "OAI-SearchBot", allow: "/" },
+      { userAgent: "ChatGPT-User", allow: "/" },
+      { userAgent: "GPTBot", disallow: "/" },
+    ],
     sitemap: "https://bugdrop.dev/sitemap.xml",
   };
 }
diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
index f71d362..bc6b43d 100644
--- a/src/app/sitemap.ts
+++ b/src/app/sitemap.ts
@@ -1,14 +1,16 @@
 import type { MetadataRoute } from "next";
 import { compareNav } from "@/lib/compare-nav";
 import { docsNav } from "@/lib/docs-nav";
+import { SITE_UPDATED, SITE_URL } from "@/lib/seo";
 import { useCasesNav } from "@/lib/use-cases-nav";
 
 export default function sitemap(): MetadataRoute.Sitemap {
-  const base = "https://bugdrop.dev";
-  const lastModified = new Date();
+  const base = SITE_URL;
+  const lastModified = new Date(SITE_UPDATED);
 
   return [
     { url: base, lastModified, changeFrequency: "weekly", priority: 1 },
+    { url: `${base}/demo`, lastModified, changeFrequency: "monthly", priority: 0.8 },
     { url: `${base}/docs`, lastModified, changeFrequency: "weekly", priority: 0.8 },
     ...docsNav
       .filter((doc) => doc.slug !== "")
@@ -16,21 +18,29 @@ export default function sitemap(): MetadataRoute.Sitemap {
         url: `${base}/docs/${doc.slug}`,
         lastModified,
         changeFrequency: "monthly" as const,
-        priority: doc.slug === "faq" ? 0.6 : 0.7,
+        priority: ["installation", "security", "configuration"].includes(doc.slug)
+          ? 0.8
+          : doc.slug === "faq"
+            ? 0.6
+            : 0.7,
       })),
     { url: `${base}/use-cases`, lastModified, changeFrequency: "monthly", priority: 0.8 },
     ...useCasesNav.map((useCase) => ({
       url: `${base}/use-cases/${useCase.slug}`,
       lastModified,
       changeFrequency: "monthly" as const,
-      priority: 0.6,
+      priority: ["github-issues-feedback", "visual-bug-reporting", "nextjs-feedback-widget"].includes(
+        useCase.slug,
+      )
+        ? 0.8
+        : 0.6,
     })),
     { url: `${base}/compare`, lastModified, changeFrequency: "monthly", priority: 0.8 },
     ...compareNav.map((comparison) => ({
       url: `${base}/compare/${comparison.slug}`,
       lastModified,
       changeFrequency: "monthly" as const,
-      priority: 0.7,
+      priority: 0.75,
     })),
   ];
 }
diff --git a/src/app/use-cases/[slug]/page.tsx b/src/app/use-cases/[slug]/page.tsx
index 7e100e7..31fb99c 100644
--- a/src/app/use-cases/[slug]/page.tsx
+++ b/src/app/use-cases/[slug]/page.tsx
@@ -3,6 +3,8 @@ import { notFound } from "next/navigation";
 import { useCasesNav } from "@/lib/use-cases-nav";
 import { MARKETPLACE_URL } from "@/lib/links";
 import Link from "next/link";
+import { JsonLd } from "@/components/json-ld";
+import { articleSchema, breadcrumbSchema, pageMetadata } from "@/lib/seo";
 
 export function generateStaticParams() {
   return useCasesNav.map((uc) => ({ slug: uc.slug }));
@@ -17,13 +19,12 @@ export async function generateMetadata({
   const useCase = useCasesNav.find((uc) => uc.slug === slug);
   if (!useCase) notFound();
 
-  return {
+  return pageMetadata({
     title: `${useCase.title} — BugDrop Use Cases`,
     description: useCase.description,
-    alternates: {
-      canonical: `/use-cases/${slug}`,
-    },
-  };
+    path: `/use-cases/${slug}`,
+    type: "article",
+  });
 }
 
 export default async function UseCasePage({
@@ -38,6 +39,20 @@ export default async function UseCasePage({
     const Content = (await import(`@/content/use-cases/${slug}.mdx`)).default;
     return (
       <div>
+        <JsonLd
+          data={breadcrumbSchema([
+            { name: "Home", path: "/" },
+            { name: "Use Cases", path: "/use-cases" },
+            { name: useCase.title, path: `/use-cases/${slug}` },
+          ])}
+        />
+        <JsonLd
+          data={articleSchema({
+            title: `${useCase.title} — BugDrop Use Cases`,
+            description: useCase.description,
+            path: `/use-cases/${slug}`,
+          })}
+        />
         <Link
           href="/use-cases"
           className="text-accent-cyan hover:underline text-sm mb-6 block"
diff --git a/src/app/use-cases/page.tsx b/src/app/use-cases/page.tsx
index 326cef8..22075a9 100644
--- a/src/app/use-cases/page.tsx
+++ b/src/app/use-cases/page.tsx
@@ -1,21 +1,40 @@
 import Link from "next/link";
 import type { Metadata } from "next";
 import { useCasesNav } from "@/lib/use-cases-nav";
+import { JsonLd } from "@/components/json-ld";
+import { articleSchema, breadcrumbSchema, pageMetadata } from "@/lib/seo";
 
-export const metadata: Metadata = {
-  title: "Use Cases — BugDrop",
-  description: "See how teams use BugDrop.",
-  alternates: {
-    canonical: "/use-cases",
-  },
-};
+const description =
+  "Use cases for BugDrop, from open-source projects and internal tools to visual bug reporting, client review, and GitHub Issues feedback.";
+
+export const metadata: Metadata = pageMetadata({
+  title: "BugDrop Use Cases",
+  description,
+  path: "/use-cases",
+  type: "article",
+});
 
 export default function UseCasesIndex() {
   return (
     <div>
+      <JsonLd
+        data={breadcrumbSchema([
+          { name: "Home", path: "/" },
+          { name: "Use Cases", path: "/use-cases" },
+        ])}
+      />
+      <JsonLd
+        data={articleSchema({
+          title: "BugDrop Use Cases",
+          description,
+          path: "/use-cases",
+        })}
+      />
       <h1 className="text-3xl font-bold text-text-primary mb-2">Use Cases</h1>
       <p className="text-text-subtle mb-10">
-        See how teams use BugDrop to collect feedback and track bugs.
+        See how teams use BugDrop for open-source projects, internal tools,
+        client review, visual bug reporting, Next.js sites, and GitHub Issues
+        feedback.
       </p>
       <div className="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-6">
         {useCasesNav.map((uc) => (
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 3337890..02c80f7 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -1,4 +1,5 @@
 import {
+  DEMO_PATH,
   GITHUB_ORG_URL,
   GITHUB_PROFILE_URL,
   GITHUB_REPO_URL,
@@ -7,13 +8,18 @@ import {
 } from "@/lib/links";
 
 const repoLinks = [
+  { label: "Docs", href: "/docs" },
+  { label: "Demo", href: DEMO_PATH },
+  { label: "Use Cases", href: "/use-cases" },
+  { label: "Compare", href: "/compare" },
   { label: "API", href: GITHUB_REPO_URL },
   { label: "Landing Page", href: GITHUB_WEB_REPO_URL },
-  { label: "Sample App Demo", href: "https://github.com/mean-weasel/bugdrop-widget-test" },
   { label: "Product Hunt", href: PRODUCT_HUNT_URL },
 ];
 
 const trustLinks = [
+  { label: "Security", href: "/docs/security" },
+  { label: "Self-hosting", href: "/docs/self-hosting" },
   { label: "Open source", href: GITHUB_REPO_URL },
   { label: "MIT licensed", href: `${GITHUB_REPO_URL}/blob/main/LICENSE` },
   { label: "Built by mean-weasel", href: GITHUB_ORG_URL },
@@ -49,8 +55,8 @@ export function Footer() {
           <a
             key={link.label}
             href={link.href}
-            target="_blank"
-            rel="noopener noreferrer"
+            target={link.href.startsWith("http") ? "_blank" : undefined}
+            rel={link.href.startsWith("http") ? "noopener noreferrer" : undefined}
             className="text-[0.7rem] font-medium tracking-wider uppercase text-text-muted hover:text-accent-cyan bg-bg-surface px-3 py-1.5 rounded border border-border no-underline transition-colors"
           >
             {link.label}
@@ -62,8 +68,8 @@ export function Footer() {
           <a
             key={link.label}
             href={link.href}
-            target="_blank"
-            rel="noopener noreferrer"
+            target={link.href.startsWith("http") ? "_blank" : undefined}
+            rel={link.href.startsWith("http") ? "noopener noreferrer" : undefined}
             className="text-[0.7rem] font-medium tracking-wider uppercase text-text-muted bg-bg-surface px-3 py-1.5 rounded border border-border"
           >
             {link.label}
diff --git a/src/components/landing/features.tsx b/src/components/landing/features.tsx
index e120908..0f8abe2 100644
--- a/src/components/landing/features.tsx
+++ b/src/components/landing/features.tsx
@@ -1,41 +1,49 @@
 import { SectionHeading } from "./section-heading";
+import Link from "next/link";
 
 const features = [
   {
     icon: "📸",
     title: "Screenshot Capture",
     description: "Full page or element-specific screenshots with automatic capture.",
+    href: "/docs/configuration",
   },
   {
     icon: "🎨",
     title: "Annotation Tools",
     description: "Draw, arrows, and rectangles to highlight exactly what's wrong.",
+    href: "/use-cases/visual-bug-reporting",
   },
   {
     icon: "⬛",
     title: "Screenshot Redaction",
     description:
       "Users can cover sensitive regions, and developers can mask private UI with data-bugdrop-mask.",
+    href: "/docs/security#screenshot-masking",
   },
   {
     icon: "🏷️",
     title: "Feedback Categories",
     description: "Bug, Feature, or Question — automatically tagged with GitHub labels.",
+    href: "/docs/configuration",
   },
   {
     icon: "💻",
     title: "System Info",
     description: "Browser, OS, viewport, and more captured automatically for debugging.",
+    href: "/docs/faq#how-does-bugdrop-work",
   },
   {
     icon: "🎯",
     title: "Fully Stylable",
     description: "Fonts, colors, borders, shadows, radius — match any design system with data attributes.",
+    href: "/docs/styling",
   },
   {
     icon: "🔒",
     title: "Privacy First",
     description: "No tracking, no cookies. URLs, passwords, and credit-card fields are protected by default.",
+    href: "/docs/security",
   },
 ];
 
@@ -45,11 +53,11 @@ export function Features() {
       <SectionHeading>Features</SectionHeading>
       <div className="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-6">
         {features.map((feature, i) => (
-          <div key={feature.title} className="bg-bg-surface border border-border rounded-2xl p-7 transition-all duration-400 hover:-translate-y-1 hover:border-accent-warm hover:shadow-[0_20px_40px_rgba(0,0,0,0.3)] animate-fade-up" style={{ animationDelay: `${0.1 + i * 0.05}s` }}>
+          <Link key={feature.title} href={feature.href} className="bg-bg-surface border border-border rounded-2xl p-7 transition-all duration-400 hover:-translate-y-1 hover:border-accent-warm hover:shadow-[0_20px_40px_rgba(0,0,0,0.3)] animate-fade-up no-underline" style={{ animationDelay: `${0.1 + i * 0.05}s` }}>
             <span className="text-[1.75rem] mb-4 block">{feature.icon}</span>
             <h3 className="text-base font-semibold mb-2 text-text-primary">{feature.title}</h3>
             <p className="text-sm text-text-subtle leading-relaxed">{feature.description}</p>
-          </div>
+          </Link>
         ))}
       </div>
     </section>
diff --git a/src/components/landing/hero.tsx b/src/components/landing/hero.tsx
index 72235a1..6bd674a 100644
--- a/src/components/landing/hero.tsx
+++ b/src/components/landing/hero.tsx
@@ -10,19 +10,33 @@ import {
 
 export function Hero() {
   return (
-    <header className="text-center py-16 pb-24 animate-fade-up max-sm:-mt-6 max-sm:pt-0 max-sm:pb-16">
-      <h1 className="text-[clamp(2.5rem,6vw,4rem)] font-light tracking-tight leading-[1.15] mb-6 bg-gradient-to-br from-text-primary to-text-muted bg-clip-text text-transparent max-sm:text-[2.35rem]">
+    <header className="text-center py-16 pb-24 max-sm:-mt-6 max-sm:pt-0 max-sm:pb-16">
+      <h1 className="text-[clamp(2.5rem,6vw,4rem)] font-light tracking-tight leading-[1.15] mb-6 text-text-primary max-sm:text-[2.35rem]">
         Free website feedback widget with
         <br />
-        <strong className="font-bold bg-gradient-to-br from-accent-warm to-accent-rose bg-clip-text">
+        <strong className="font-bold text-accent-warm">
           screenshots in 30 seconds
         </strong>
       </h1>
       <p className="text-xl text-text-subtle max-w-[600px] mx-auto mb-10 max-sm:mb-7 max-sm:text-lg">
-        Open source bug reporting widget for any website. Drop it in, and user
-        feedback becomes GitHub issues — with screenshots, annotations, and
-        system info.
+        BugDrop is an open-source website feedback widget that creates GitHub
+        Issues with screenshots, annotations, system info, and redaction
+        controls. Add one script tag to any site.
       </p>
+      <div className="mx-auto mb-7 flex max-w-[720px] flex-wrap justify-center gap-2 text-xs font-medium text-text-muted">
+        <span className="rounded border border-border bg-bg-surface px-3 py-1.5">
+          MIT licensed
+        </span>
+        <span className="rounded border border-border bg-bg-surface px-3 py-1.5">
+          GitHub Marketplace
+        </span>
+        <span className="rounded border border-border bg-bg-surface px-3 py-1.5">
+          Self-hostable
+        </span>
+        <span className="rounded border border-border bg-bg-surface px-3 py-1.5">
+          Screenshot privacy controls
+        </span>
+      </div>
       <div className="mb-7 flex flex-col items-center gap-3 max-sm:mb-5">
         <p className="text-sm text-accent-cyan">
           Now available on GitHub Marketplace. Open source by{" "}
diff --git a/src/content/compare/bugherd.mdx b/src/content/compare/bugherd.mdx
new file mode 100644
index 0000000..2c93536
--- /dev/null
+++ b/src/content/compare/bugherd.mdx
@@ -0,0 +1,34 @@
+# BugDrop vs BugHerd
+
+BugDrop and BugHerd both reduce the friction of reporting website issues, but they take different approaches. BugDrop sends screenshot-powered reports to GitHub Issues. BugHerd provides a hosted website annotation and task board workflow.
+
+## What is BugHerd?
+
+BugHerd is a visual feedback and bug tracking platform commonly used by agencies and web teams. Users can pin feedback to page elements, create tasks, and manage review work in BugHerd's interface.
+
+That model is useful when clients and non-technical stakeholders need a dedicated feedback board outside the development repository.
+
+## What is BugDrop?
+
+BugDrop is an open-source feedback widget that creates GitHub Issues from website reports. It is designed for teams that want screenshots, annotations, system info, and page URLs to flow directly into GitHub without a separate task board.
+
+## Feature Comparison
+
+| Feature | BugDrop | BugHerd |
+|---|---|---|
+| Price | Free / MIT | Paid SaaS |
+| Issue destination | GitHub Issues | BugHerd task board |
+| Setup | One script tag | Account + project setup |
+| Screenshots | Yes | Yes |
+| Annotations | Yes | Yes |
+| Client feedback | Yes | Yes |
+| Self-hostable | Yes | No |
+| Best fit | Developer teams in GitHub | Agencies needing a managed review board |
+
+## When to Choose BugDrop
+
+Choose BugDrop when GitHub is your source of truth and you want reports to become assignable, labelable issues immediately. It is especially useful for engineering-led teams, open-source maintainers, internal tools, and staging sites where the team does not need another dashboard.
+
+## When to Choose BugHerd
+
+BugHerd can be a better fit when your process revolves around client review, task boards, and non-GitHub project management. Agencies that want a dedicated feedback workspace may prefer that model.
diff --git a/src/content/compare/marker-io.mdx b/src/content/compare/marker-io.mdx
new file mode 100644
index 0000000..041bc63
--- /dev/null
+++ b/src/content/compare/marker-io.mdx
@@ -0,0 +1,34 @@
+# BugDrop vs Marker.io
+
+BugDrop and Marker.io both help teams collect visual website feedback, but they are built for different workflows. BugDrop is an open-source widget that creates GitHub Issues directly. Marker.io is a hosted visual bug reporting platform with team workflows and integrations across project management tools.
+
+## What is Marker.io?
+
+Marker.io is a paid visual feedback and bug reporting product. It focuses on collecting screenshots, annotations, technical metadata, and reporter comments, then routing those reports into tools such as Jira, Trello, Asana, GitHub, and others.
+
+Its value is strongest for teams that need a managed feedback platform, stakeholder workflows, and integrations beyond GitHub.
+
+## What is BugDrop?
+
+BugDrop is a free, MIT-licensed website feedback widget for teams that want reports to become GitHub Issues. It captures screenshots, annotations, page context, browser details, and privacy controls without requiring a separate feedback dashboard.
+
+## Feature Comparison
+
+| Feature | BugDrop | Marker.io |
+|---|---|---|
+| Price | Free / MIT | Paid SaaS |
+| Primary workflow | GitHub Issues | Hosted platform + integrations |
+| Setup | One script tag | Account + project setup |
+| Screenshots | Yes | Yes |
+| Annotations | Yes | Yes |
+| Screenshot redaction | Yes | Product-dependent |
+| Self-hostable | Yes | No |
+| Best fit | GitHub-native developer teams | Teams needing managed feedback workflows |
+
+## When to Choose BugDrop
+
+Choose BugDrop when your team already works in GitHub Issues, wants an open-source tool, needs a lightweight script tag, or prefers feedback data to stay in your own GitHub repository. BugDrop is also a strong fit for open-source projects, internal tools, and staging sites where a paid feedback platform is unnecessary.
+
+## When to Choose Marker.io
+
+Marker.io can be a better fit when you need a polished hosted platform, richer stakeholder management, and integrations across several non-GitHub tools. Larger QA or product teams may value those workflows more than open-source control.
diff --git a/src/content/compare/open-source-feedback-tools.mdx b/src/content/compare/open-source-feedback-tools.mdx
new file mode 100644
index 0000000..bf47c2b
--- /dev/null
+++ b/src/content/compare/open-source-feedback-tools.mdx
@@ -0,0 +1,36 @@
+# Open-Source Feedback Tools
+
+Open-source website feedback tools are useful when teams want control over cost, data flow, and integration behavior. BugDrop fits this category as a free, MIT-licensed feedback widget that sends screenshot bug reports directly to GitHub Issues.
+
+## What to Look For
+
+When evaluating open-source feedback tools, focus on the workflow you want after a user submits feedback:
+
+- **Issue destination** -- where does the report land?
+- **Visual context** -- are screenshots and annotations included?
+- **Privacy controls** -- can sensitive page content be redacted or masked?
+- **Setup complexity** -- does it require a backend, database, or account system?
+- **Self-hosting** -- can your team run the infrastructure?
+- **Maintenance fit** -- does it align with your existing development workflow?
+
+## Where BugDrop Fits
+
+BugDrop is strongest when GitHub Issues is already your team's issue tracker. It does not try to be a customer feedback portal, survey product, or roadmap tool. It focuses on one workflow: users report what they see, and developers receive a useful GitHub Issue.
+
+## Strengths
+
+- Free and MIT licensed
+- One-script installation
+- Screenshots, annotations, and system information
+- Manual screenshot redaction and `data-bugdrop-mask`
+- GitHub App integration
+- Self-hostable Cloudflare Worker architecture
+- No reporter accounts required
+
+## Tradeoffs
+
+BugDrop is intentionally focused. It does not include voting boards, customer feedback analytics, session replay, product roadmaps, or a standalone dashboard. If you need those features, a hosted feedback suite may be a better fit.
+
+## Recommended Next Step
+
+Try the [BugDrop demo](/demo), then follow the [installation guide](/docs/installation). If your site contains private customer or billing information, review [security and screenshot masking](/docs/security) before installing.
diff --git a/src/content/compare/usersnap.mdx b/src/content/compare/usersnap.mdx
new file mode 100644
index 0000000..d98bbe1
--- /dev/null
+++ b/src/content/compare/usersnap.mdx
@@ -0,0 +1,32 @@
+# BugDrop vs Usersnap
+
+BugDrop and Usersnap both collect feedback from websites and web apps. BugDrop focuses on free, open-source bug reports that become GitHub Issues. Usersnap is a paid customer feedback suite with broader survey, feedback, and product experience workflows.
+
+## What is Usersnap?
+
+Usersnap is a hosted platform for collecting customer feedback, visual bug reports, surveys, and product insights. It is designed for product and customer experience teams that want a managed system for feedback collection and analysis.
+
+## What is BugDrop?
+
+BugDrop is a lightweight website feedback widget for developers. It captures user-submitted reports with screenshots, annotations, redaction controls, system info, and page URLs, then creates GitHub Issues in your repository.
+
+## Feature Comparison
+
+| Feature | BugDrop | Usersnap |
+|---|---|---|
+| Price | Free / MIT | Paid SaaS |
+| Primary workflow | Bug reports to GitHub Issues | Customer feedback platform |
+| Setup | One script tag | Account + project setup |
+| Screenshots | Yes | Yes |
+| Surveys | No | Yes |
+| Self-hostable | Yes | No |
+| Open source | Yes | No |
+| Best fit | GitHub-native developers | Product teams collecting broad feedback |
+
+## When to Choose BugDrop
+
+Choose BugDrop when you want a simple visual bug reporting widget, no paid subscription, no new dashboard, and direct GitHub Issues integration. It is built for teams that prioritize developer workflow over customer feedback analytics.
+
+## When to Choose Usersnap
+
+Usersnap can be a better fit when your team needs surveys, customer satisfaction signals, feedback analytics, and workflows that extend beyond bug reports. Product and customer experience teams may need those broader capabilities.
diff --git a/src/content/use-cases/github-issues-feedback.mdx b/src/content/use-cases/github-issues-feedback.mdx
new file mode 100644
index 0000000..8c27ea3
--- /dev/null
+++ b/src/content/use-cases/github-issues-feedback.mdx
@@ -0,0 +1,26 @@
+# GitHub Issues Feedback
+
+BugDrop is a website feedback widget for teams that want user reports to become GitHub Issues without a separate dashboard. A reporter clicks the feedback button, describes the problem, attaches or annotates a screenshot, and BugDrop creates a formatted issue in the repository you choose.
+
+## Why Use GitHub Issues for Feedback?
+
+Many teams already triage bugs, assign work, discuss fixes, and close tasks in GitHub. Moving user feedback into a separate SaaS dashboard creates another inbox to monitor and another workflow to maintain. BugDrop keeps feedback where engineering work already happens.
+
+Each report includes the user's description, feedback category, page URL, browser details, viewport size, operating system, and optional screenshot. That context makes the issue actionable without a long follow-up thread.
+
+## What BugDrop Adds
+
+- **One script tag** -- add the widget to a production site, docs site, internal tool, or staging environment
+- **No reporter account** -- users do not need GitHub accounts to submit feedback
+- **Issue labels** -- bug, feature, and question reports can map to GitHub labels
+- **Visual context** -- screenshots and annotations show the exact UI state
+- **Privacy controls** -- reporters can redact screenshot regions and developers can mark private UI with `data-bugdrop-mask`
+- **GitHub-native triage** -- assign, label, comment, prioritize, and close issues in your existing workflow
+
+## Example Workflow
+
+A user sees a pricing table that wraps incorrectly on mobile. They tap the BugDrop button, write "The Pro plan card overlaps the CTA on my phone," circle the overlapping area, and submit. GitHub receives an issue with the screenshot, URL, viewport, browser, and OS. The developer can reproduce the layout immediately.
+
+## Set It Up
+
+Start with the [installation guide](/docs/installation), then review [configuration](/docs/configuration) for labels, screenshot behavior, submitter fields, and button placement. If screenshots may include sensitive data, read the [security guide](/docs/security) before adding BugDrop to production pages.
diff --git a/src/content/use-cases/nextjs-feedback-widget.mdx b/src/content/use-cases/nextjs-feedback-widget.mdx
new file mode 100644
index 0000000..7739051
--- /dev/null
+++ b/src/content/use-cases/nextjs-feedback-widget.mdx
@@ -0,0 +1,30 @@
+# Next.js Feedback Widget
+
+BugDrop works as a Next.js feedback widget because it loads from a plain script tag and renders inside a Shadow DOM. It does not require a React provider, npm package, API route, or build-time integration.
+
+## Why It Fits Next.js Sites
+
+Next.js apps often have multiple surfaces where feedback matters: marketing pages, docs, dashboards, preview deployments, and internal admin tools. BugDrop can be added to any of them with the same script tag, and reports land in GitHub Issues with screenshots and system information.
+
+Because the widget is framework-agnostic, it works with the App Router, Pages Router, static pages, server-rendered pages, and client-heavy application screens.
+
+## Basic Setup
+
+Add the script tag near the end of your HTML body or in the appropriate root layout for the pages where you want feedback:
+
+```html
+<script
+  src="https://bugdrop.neonwatty.workers.dev/widget.js"
+  data-repo="owner/repo"
+></script>
+```
+
+For production, review [version pinning](/docs/version-pinning) so widget updates are predictable. For design alignment, use the [styling options](/docs/styling). For sensitive dashboards, add `data-bugdrop-mask` to private UI and read the [security guide](/docs/security).
+
+## Preview Deployment Feedback
+
+BugDrop is especially useful on Vercel or other preview deployments. Clients, QA reviewers, and product managers can report exactly what they see on a preview URL, and the report creates a GitHub Issue your engineering team can triage beside the pull request.
+
+## Testing
+
+Use the [Playwright CI guide](/docs/ci-testing) to confirm the widget initializes, the Shadow DOM renders, and your expected configuration is present before deploying changes.
diff --git a/src/content/use-cases/visual-bug-reporting.mdx b/src/content/use-cases/visual-bug-reporting.mdx
new file mode 100644
index 0000000..0a44d8f
--- /dev/null
+++ b/src/content/use-cases/visual-bug-reporting.mdx
@@ -0,0 +1,25 @@
+# Visual Bug Reporting
+
+BugDrop helps users report visual bugs by capturing what they see, not just what they can describe. Reports include screenshots, annotations, system information, and page URLs so developers can understand layout, styling, rendering, and content problems quickly.
+
+## The Problem with Text-Only Reports
+
+Visual bugs are hard to describe precisely. A user might say "the button is broken" when the actual issue is a responsive layout overlap, clipped text, missing image, dark-mode contrast problem, or browser-specific rendering bug. Without a screenshot, developers often spend more time asking clarifying questions than fixing the issue.
+
+BugDrop turns that report into a visual artifact. The screenshot shows the broken state, and annotations let the reporter circle, point to, or highlight the important region.
+
+## Best Fits
+
+- Marketing sites where layout regressions affect conversion
+- Documentation sites where examples, tabs, or navigation render incorrectly
+- SaaS apps with dense dashboards and responsive UI states
+- Internal tools with charts, tables, filters, and customer data
+- Staging sites where clients and QA reviewers need structured feedback
+
+## Privacy Controls
+
+Visual context can expose sensitive content. BugDrop supports manual redaction before submit and developer-configured masking with `data-bugdrop-mask`. Password and credit-card fields are protected by default. Review [screenshot masking](/docs/security#screenshot-masking) before enabling visual reports on pages with private data.
+
+## How to Add It
+
+Install the GitHub App, add the script tag from the [installation guide](/docs/installation), and configure screenshot behavior in [configuration](/docs/configuration). Use [CI testing](/docs/ci-testing) to verify the widget appears and works on important pages before release.
diff --git a/src/lib/compare-nav.ts b/src/lib/compare-nav.ts
index 8c79598..8885189 100644
--- a/src/lib/compare-nav.ts
+++ b/src/lib/compare-nav.ts
@@ -20,4 +20,28 @@ export const compareNav: CompareLink[] = [
     title: "BugDrop vs Sentry User Feedback",
     description: "Screenshot-first bug reports vs error monitoring feedback — complementary tools.",
   },
+  {
+    slug: "marker-io",
+    title: "BugDrop vs Marker.io",
+    description:
+      "Open-source GitHub Issues feedback widget vs a paid visual bug reporting platform for teams.",
+  },
+  {
+    slug: "bugherd",
+    title: "BugDrop vs BugHerd",
+    description:
+      "GitHub-native screenshot feedback for developers vs a hosted website annotation and task board.",
+  },
+  {
+    slug: "usersnap",
+    title: "BugDrop vs Usersnap",
+    description:
+      "Free open-source website bug reports to GitHub Issues vs a paid customer feedback suite.",
+  },
+  {
+    slug: "open-source-feedback-tools",
+    title: "Open-Source Feedback Tools",
+    description:
+      "How BugDrop fits among open-source and self-hostable tools for collecting website feedback.",
+  },
 ];
diff --git a/src/lib/docs-nav.ts b/src/lib/docs-nav.ts
index 5eb5541..447ef00 100644
--- a/src/lib/docs-nav.ts
+++ b/src/lib/docs-nav.ts
@@ -1,18 +1,74 @@
 export interface DocLink {
   slug: string;
   title: string;
+  description: string;
 }
 
 export const docsNav: DocLink[] = [
-  { slug: "", title: "Getting Started" },
-  { slug: "installation", title: "Installation" },
-  { slug: "configuration", title: "Configuration" },
-  { slug: "styling", title: "Styling" },
-  { slug: "javascript-api", title: "JavaScript API" },
-  { slug: "version-pinning", title: "Version Pinning" },
-  { slug: "ci-testing", title: "CI Testing" },
-  { slug: "demo", title: "Sample App Demo" },
-  { slug: "security", title: "Security" },
-  { slug: "self-hosting", title: "Self-Hosting" },
-  { slug: "faq", title: "FAQ" },
+  {
+    slug: "",
+    title: "Getting Started",
+    description:
+      "Learn how BugDrop turns website feedback into GitHub Issues with screenshots, annotations, system info, and privacy controls.",
+  },
+  {
+    slug: "installation",
+    title: "Installation",
+    description:
+      "Install BugDrop with the GitHub App and one script tag to collect website feedback directly in GitHub Issues.",
+  },
+  {
+    slug: "configuration",
+    title: "Configuration",
+    description:
+      "Configure BugDrop data attributes for screenshots, submitter fields, labels, button behavior, privacy, and widget copy.",
+  },
+  {
+    slug: "styling",
+    title: "Styling",
+    description:
+      "Customize the BugDrop feedback widget with themes, colors, fonts, borders, shadows, and design-system friendly styles.",
+  },
+  {
+    slug: "javascript-api",
+    title: "JavaScript API",
+    description:
+      "Use the BugDrop JavaScript API to open, close, hide, and show the feedback widget from your own application UI.",
+  },
+  {
+    slug: "version-pinning",
+    title: "Version Pinning",
+    description:
+      "Pin BugDrop widget versions in production so updates are predictable across major, minor, and patch releases.",
+  },
+  {
+    slug: "ci-testing",
+    title: "CI Testing",
+    description:
+      "Test BugDrop in CI with Playwright checks for widget loading, Shadow DOM rendering, configuration, and accessibility.",
+  },
+  {
+    slug: "demo",
+    title: "Sample App Demo",
+    description:
+      "Try the BugDrop sample app demo to test screenshot capture, annotations, redaction, and GitHub issue creation.",
+  },
+  {
+    slug: "security",
+    title: "Security",
+    description:
+      "Review BugDrop permissions, screenshot storage, data handling, privacy controls, rate limiting, and self-hosting options.",
+  },
+  {
+    slug: "self-hosting",
+    title: "Self-Hosting",
+    description:
+      "Self-host BugDrop on your own Cloudflare Worker and GitHub App when your team needs full infrastructure control.",
+  },
+  {
+    slug: "faq",
+    title: "FAQ",
+    description:
+      "Answers to common BugDrop questions about pricing, GitHub permissions, screenshots, privacy, setup, and browser support.",
+  },
 ];
diff --git a/src/lib/seo.ts b/src/lib/seo.ts
new file mode 100644
index 0000000..8913e64
--- /dev/null
+++ b/src/lib/seo.ts
@@ -0,0 +1,255 @@
+import type { Metadata } from "next";
+import {
+  DEMO_URL,
+  GITHUB_ORG_URL,
+  GITHUB_PROFILE_URL,
+  GITHUB_REPO_URL,
+  GITHUB_WEB_REPO_URL,
+  MARKETPLACE_URL,
+  PRODUCT_HUNT_URL,
+} from "@/lib/links";
+
+export const SITE_URL = "https://bugdrop.dev";
+export const SITE_NAME = "BugDrop";
+export const SITE_UPDATED = "2026-05-11";
+
+export const homeDescription =
+  "Free, open source website feedback widget by mean-weasel. Users report bugs with screenshots and annotations — issues are created in GitHub automatically. One script tag, zero config.";
+
+export function absoluteUrl(path = "/") {
+  if (path.startsWith("https://")) return path;
+  return `${SITE_URL}${path === "/" ? "" : path}`;
+}
+
+export function pageMetadata({
+  title,
+  description,
+  path,
+  type = "website",
+}: {
+  title: string;
+  description: string;
+  path: string;
+  type?: "website" | "article";
+}): Metadata {
+  const url = absoluteUrl(path);
+
+  return {
+    title,
+    description,
+    alternates: {
+      canonical: path,
+    },
+    openGraph: {
+      title,
+      description,
+      url,
+      siteName: SITE_NAME,
+      type,
+    },
+    twitter: {
+      card: "summary_large_image",
+      title,
+      description,
+    },
+  };
+}
+
+export function organizationSchema() {
+  return {
+    "@context": "https://schema.org",
+    "@type": "Organization",
+    name: "mean-weasel",
+    url: GITHUB_ORG_URL,
+    founder: {
+      "@type": "Person",
+      name: "neonwatty",
+      url: GITHUB_PROFILE_URL,
+    },
+    sameAs: [GITHUB_ORG_URL, GITHUB_REPO_URL, GITHUB_WEB_REPO_URL],
+  };
+}
+
+export function websiteSchema() {
+  return {
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    name: SITE_NAME,
+    url: SITE_URL,
+    description: homeDescription,
+    publisher: {
+      "@type": "Organization",
+      name: "mean-weasel",
+      url: GITHUB_ORG_URL,
+    },
+  };
+}
+
+export function softwareApplicationSchema() {
+  return {
+    "@context": "https://schema.org",
+    "@type": "SoftwareApplication",
+    name: SITE_NAME,
+    description:
+      "Free, open-source website feedback widget that turns user bug reports into GitHub issues with screenshots, annotations, redaction, and system info.",
+    url: SITE_URL,
+    applicationCategory: "DeveloperApplication",
+    operatingSystem: "Web",
+    offers: {
+      "@type": "Offer",
+      price: "0",
+      priceCurrency: "USD",
+    },
+    author: {
+      "@type": "Organization",
+      name: "mean-weasel",
+      url: GITHUB_ORG_URL,
+    },
+    creator: {
+      "@type": "Person",
+      name: "neonwatty",
+      url: GITHUB_PROFILE_URL,
+    },
+    publisher: {
+      "@type": "Organization",
+      name: "mean-weasel",
+      url: GITHUB_ORG_URL,
+    },
+    license: "https://opensource.org/licenses/MIT",
+    codeRepository: GITHUB_REPO_URL,
+    sameAs: [
+      MARKETPLACE_URL,
+      PRODUCT_HUNT_URL,
+      GITHUB_REPO_URL,
+      GITHUB_WEB_REPO_URL,
+      GITHUB_ORG_URL,
+      GITHUB_PROFILE_URL,
+    ],
+    award: "Product Hunt #6 Product of the Day, May 9, 2026",
+    featureList: [
+      "Screenshot capture",
+      "Annotation tools",
+      "Screenshot redaction",
+      "Developer-configured privacy masking",
+      "Automatic password and credit-card field masking",
+      "Automatic system info",
+      "GitHub issue creation",
+      "Fully stylable widget",
+      "Shadow DOM isolation",
+      "Privacy-first design",
+    ],
+  };
+}
+
+export function breadcrumbSchema(items: Array<{ name: string; path: string }>) {
+  return {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    itemListElement: items.map((item, index) => ({
+      "@type": "ListItem",
+      position: index + 1,
+      name: item.name,
+      item: absoluteUrl(item.path),
+    })),
+  };
+}
+
+export function articleSchema({
+  title,
+  description,
+  path,
+  type = "Article",
+}: {
+  title: string;
+  description: string;
+  path: string;
+  type?: "Article" | "TechArticle";
+}) {
+  return {
+    "@context": "https://schema.org",
+    "@type": type,
+    headline: title,
+    description,
+    url: absoluteUrl(path),
+    datePublished: SITE_UPDATED,
+    dateModified: SITE_UPDATED,
+    author: {
+      "@type": "Organization",
+      name: "mean-weasel",
+      url: GITHUB_ORG_URL,
+    },
+    publisher: {
+      "@type": "Organization",
+      name: "mean-weasel",
+      url: GITHUB_ORG_URL,
+    },
+    about: {
+      "@type": "SoftwareApplication",
+      name: SITE_NAME,
+      url: SITE_URL,
+    },
+  };
+}
+
+export function faqSchema() {
+  return {
+    "@context": "https://schema.org",
+    "@type": "FAQPage",
+    mainEntity: [
+      {
+        "@type": "Question",
+        name: "What is BugDrop?",
+        acceptedAnswer: {
+          "@type": "Answer",
+          text: "BugDrop is a lightweight, open-source bug reporting widget that creates GitHub Issues from website feedback with screenshots and system information.",
+        },
+      },
+      {
+        "@type": "Question",
+        name: "Is BugDrop free?",
+        acceptedAnswer: {
+          "@type": "Answer",
+          text: "Yes. BugDrop is free and open source under the MIT License, with no paid tiers or usage limits beyond rate limiting.",
+        },
+      },
+      {
+        "@type": "Question",
+        name: "Does BugDrop require user accounts?",
+        acceptedAnswer: {
+          "@type": "Answer",
+          text: "No. Reporters can submit feedback from your website without creating a BugDrop or GitHub account.",
+        },
+      },
+      {
+        "@type": "Question",
+        name: "How does BugDrop handle screenshots?",
+        acceptedAnswer: {
+          "@type": "Answer",
+          text: "BugDrop captures screenshots in the user's browser, lets reporters annotate and redact them when configured, and stores submitted images in your GitHub repository.",
+        },
+      },
+      {
+        "@type": "Question",
+        name: "Can I self-host BugDrop?",
+        acceptedAnswer: {
+          "@type": "Answer",
+          text: "Yes. BugDrop can be self-hosted with your own Cloudflare Worker and GitHub App when you need full infrastructure control.",
+        },
+      },
+    ],
+  };
+}
+
+export function videoSchema() {
+  return {
+    "@context": "https://schema.org",
+    "@type": "VideoObject",
+    name: "BugDrop demo video",
+    description:
+      "Watch BugDrop collect website feedback with a screenshot and create a GitHub Issue.",
+    thumbnailUrl: "https://img.youtube.com/vi/VkLvP1xmRzo/hqdefault.jpg",
+    uploadDate: SITE_UPDATED,
+    embedUrl: "https://www.youtube.com/embed/VkLvP1xmRzo",
+    contentUrl: DEMO_URL,
+  };
+}
diff --git a/src/lib/use-cases-nav.ts b/src/lib/use-cases-nav.ts
index dd253d9..1851aee 100644
--- a/src/lib/use-cases-nav.ts
+++ b/src/lib/use-cases-nav.ts
@@ -27,4 +27,25 @@ export const useCasesNav: UseCaseLink[] = [
       "Let clients report issues with screenshots during development — no GitHub account needed.",
     icon: "🤝",
   },
+  {
+    slug: "github-issues-feedback",
+    title: "GitHub Issues Feedback",
+    description:
+      "Collect website feedback as structured GitHub Issues with screenshots, labels, browser info, and page URLs.",
+    icon: "📋",
+  },
+  {
+    slug: "visual-bug-reporting",
+    title: "Visual Bug Reporting",
+    description:
+      "Capture visual bugs with annotated screenshots so developers can see the exact broken UI state.",
+    icon: "🖼️",
+  },
+  {
+    slug: "nextjs-feedback-widget",
+    title: "Next.js Feedback Widget",
+    description:
+      "Add BugDrop to a Next.js site with one script tag and send user feedback directly to GitHub Issues.",
+    icon: "▲",
+  },
 ];