feat(canvas): homepage SEO for marketing launch (mc#1486)

Adds the standard Next.js App-Router SEO surface to the canvas
landing so the marketing push has crawlable metadata + structured
data on day one.

What landed:
  - layout.tsx — Metadata API: title.template, description,
    keywords, canonical, metadataBase, OG/Twitter text fields,
    robots index:true. JSON-LD @graph (Organization + WebSite +
    SoftwareApplication) injected with the per-request CSP nonce.
  - robots.ts — allow public marketing routes (/, /pricing, /blog),
    disallow /orgs, /api/, /cp/, /checkout/; declares sitemap +
    canonical host.
  - sitemap.ts — apex + pricing + live blog post; authed routes
    excluded by construction.
  - opengraph-image.tsx — segment-level dynamic OG card via
    next/og ImageResponse (1200x630); no static binary blob.
  - __tests__/seo-routes.test.ts — pins the crawler contract
    (10 cases) so a future refactor can't silently flip the
    marketing surface to noindex or drop the sitemap.

Out of scope (per issue): design copy, hero rewrite, Lighthouse
CWV tuning. Those are CTO/marketing inputs and a separate ticket.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

canvas/src/app/__tests__/seo-routes.test.ts

@@ -0,0 +1,113 @@
+import { describe, it, expect, vi } from "vitest";
+
+// Marketing-launch SEO (mc#1486). These tests pin the public crawler
+// contract: anything that flips public marketing routes to disallow,
+// drops the sitemap from robots.txt, or removes the OG image
+// reference from root metadata should fail loudly here.
+
+// next/font and the rest of the layout's runtime tree are not
+// vitest-compatible (next/font expects the Next.js compiler swc
+// transform). We import layout.tsx only for its exported `metadata`
+// constant — mock the font module to a constructor-returning stub.
+vi.mock("next/font/google", () => ({
+  Inter: () => ({ variable: "--font-inter" }),
+  JetBrains_Mono: () => ({ variable: "--font-jetbrains" }),
+}));
+
+import robots from "../robots";
+import sitemap from "../sitemap";
+import { metadata } from "../layout";
+
+describe("robots.ts", () => {
+  it("allows public marketing routes and blocks authed/app routes", () => {
+    const r = robots();
+    expect(r.rules).toBeDefined();
+    const rule = Array.isArray(r.rules) ? r.rules[0] : r.rules!;
+    expect(rule.userAgent).toBe("*");
+    const allow = Array.isArray(rule.allow) ? rule.allow : [rule.allow];
+    expect(allow).toEqual(expect.arrayContaining(["/", "/pricing", "/blog"]));
+    const disallow = Array.isArray(rule.disallow)
+      ? rule.disallow
+      : [rule.disallow];
+    expect(disallow).toEqual(
+      expect.arrayContaining(["/api/", "/orgs", "/cp/"]),
+    );
+  });
+
+  it("declares the sitemap URL", () => {
+    const r = robots();
+    expect(r.sitemap).toMatch(/\/sitemap\.xml$/);
+  });
+
+  it("declares a canonical host", () => {
+    const r = robots();
+    expect(r.host).toMatch(/^https:\/\//);
+  });
+});
+
+describe("sitemap.ts", () => {
+  it("includes apex, pricing, and the live blog post", () => {
+    const entries = sitemap();
+    const urls = entries.map((e) => e.url);
+    expect(urls.some((u) => u.endsWith("/"))).toBe(true);
+    expect(urls.some((u) => u.endsWith("/pricing"))).toBe(true);
+    expect(
+      urls.some((u) => u.includes("/blog/2026-04-20-chrome-devtools-mcp")),
+    ).toBe(true);
+  });
+
+  it("does NOT include authed/app routes", () => {
+    const entries = sitemap();
+    const urls = entries.map((e) => e.url);
+    expect(urls.some((u) => u.includes("/orgs"))).toBe(false);
+    expect(urls.some((u) => u.includes("/api/"))).toBe(false);
+  });
+
+  it("sets a non-zero priority and a valid changeFrequency on every entry", () => {
+    const valid = new Set([
+      "always",
+      "hourly",
+      "daily",
+      "weekly",
+      "monthly",
+      "yearly",
+      "never",
+    ]);
+    for (const e of sitemap()) {
+      expect(e.priority).toBeGreaterThan(0);
+      expect(valid.has(String(e.changeFrequency))).toBe(true);
+    }
+  });
+});
+
+describe("root layout metadata", () => {
+  it("sets a templated title + non-empty description", () => {
+    const t = metadata.title as { default: string; template: string };
+    expect(t.default).toMatch(/Molecule AI/);
+    expect(t.template).toMatch(/%s/);
+    expect((metadata.description ?? "").length).toBeGreaterThan(50);
+  });
+
+  it("declares OG + Twitter text fields (image comes from opengraph-image.tsx)", () => {
+    const og = metadata.openGraph;
+    expect(og).toBeDefined();
+    expect((og as { title: string }).title).toMatch(/Molecule AI/);
+    expect((og as { description: string }).description.length).toBeGreaterThan(
+      50,
+    );
+    const tw = metadata.twitter;
+    expect(tw).toBeDefined();
+    // Next.js typings narrow twitter.card to a union — assert via cast.
+    expect((tw as { card: string }).card).toBe("summary_large_image");
+  });
+
+  it("sets a canonical alternate", () => {
+    expect(metadata.alternates?.canonical).toBe("/");
+  });
+
+  it("enables indexing at the metadata level (robots.ts owns per-route)", () => {
+    const r = metadata.robots as { index: boolean; follow: boolean };
+    expect(r.index).toBe(true);
+    expect(r.follow).toBe(true);
+  });
+});

canvas/src/app/layout.tsx

@@ -27,9 +27,78 @@ import {
   themeBootScript,
 } from "@/lib/theme-cookie";
 
+// Marketing-launch SEO (mc#1486). Canonical apex is app.moleculesai.app —
+// tenant subdomains (<slug>.moleculesai.app) reuse the same Next.js build
+// but are gated behind auth (AuthGate redirects anonymous → /cp/auth/login)
+// and are de-indexed in robots.ts. The metadata here applies to the
+// public marketing surface served from the apex host.
+//
+// Override per-route by exporting a page-level `metadata`/`generateMetadata`
+// — Next.js merges page metadata over layout metadata using
+// `title.template` for "<page> | Molecule AI" composition.
+const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL ?? "https://app.moleculesai.app";
+
 export const metadata: Metadata = {
-  title: "Molecule AI",
-  description: "AI Org Chart Canvas",
+  metadataBase: new URL(SITE_URL),
+  title: {
+    default: "Molecule AI — the AI org chart canvas",
+    template: "%s | Molecule AI",
+  },
+  description:
+    "Molecule AI is an org-chart canvas for AI agent teams. Wire Claude Code, Codex, Hermes, and OpenClaw agents into a governed multi-agent workspace with credit metering, audit, and one-click runtime provisioning.",
+  applicationName: "Molecule AI",
+  keywords: [
+    "AI agents",
+    "multi-agent",
+    "agent orchestration",
+    "AI org chart",
+    "Claude Code",
+    "Codex",
+    "MCP",
+    "agent governance",
+    "A2A",
+    "agent runtime",
+  ],
+  authors: [{ name: "Molecule AI" }],
+  creator: "Molecule AI",
+  publisher: "Molecule AI",
+  alternates: { canonical: "/" },
+  // OG + Twitter images come from the file-convention sibling
+  // `opengraph-image.tsx` — Next.js auto-attaches them to og:image
+  // and twitter:image when present at the segment root. We keep the
+  // text fields here so they win over per-page metadata when a page
+  // doesn't override them. `images: []` as the structural fallback
+  // for hosts that won't follow the file convention; the real URL
+  // is injected by Next.js at build time from opengraph-image.tsx.
+  openGraph: {
+    type: "website",
+    siteName: "Molecule AI",
+    url: SITE_URL,
+    title: "Molecule AI — the AI org chart canvas",
+    description:
+      "Wire Claude Code, Codex, Hermes, and OpenClaw agents into a governed multi-agent workspace. Credit metering, audit, and one-click runtime provisioning.",
+    locale: "en_US",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Molecule AI — the AI org chart canvas",
+    description:
+      "Wire Claude Code, Codex, Hermes, and OpenClaw agents into a governed multi-agent workspace.",
+  },
+  icons: {
+    icon: "/molecule-icon.png",
+    apple: "/molecule-icon.png",
+  },
+  // robots.ts owns the per-route allow/disallow contract; this is the
+  // header-level fallback for routes the crawler reaches before
+  // robots.txt resolves. Default = index public marketing routes;
+  // app/auth/api/orgs are noindex'd by robots.ts.
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: { index: true, follow: true, "max-image-preview": "large" },
+  },
 };
 
 export default async function RootLayout({
@@ -94,6 +163,75 @@ export default async function RootLayout({
           nonce={nonce}
           dangerouslySetInnerHTML={{ __html: themeBootScript }}
         />
+        {/*
+         * JSON-LD structured data (mc#1486). Two graph nodes:
+         *
+         *   - Organization: surfaces the brand to Google Knowledge
+         *     Graph + Bing entity index. URL+logo+sameAs are the
+         *     minimum recommended set for new brands without a
+         *     Wikipedia page.
+         *
+         *   - WebSite: enables the sitelinks search box and tells
+         *     crawlers the canonical site URL when the same content
+         *     is reachable via multiple subdomains (apex + tenant).
+         *
+         * Type-application/ld+json runs synchronously without
+         * executing JS, so 'strict-dynamic' isn't required — we still
+         * carry the nonce because production CSP's default-src 'self'
+         * applies to any <script> element. The "type" attribute is
+         * what keeps the browser from running the body as JS, but
+         * CSP nonces are gated on the element not the type, so we
+         * include the nonce too.
+         */}
+        <script
+          type="application/ld+json"
+          nonce={nonce}
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify({
+              "@context": "https://schema.org",
+              "@graph": [
+                {
+                  "@type": "Organization",
+                  "@id": `${SITE_URL}#organization`,
+                  name: "Molecule AI",
+                  url: SITE_URL,
+                  logo: `${SITE_URL}/molecule-icon.png`,
+                  sameAs: [
+                    "https://github.com/molecule-ai",
+                    "https://x.com/moleculeai",
+                  ],
+                },
+                {
+                  "@type": "WebSite",
+                  "@id": `${SITE_URL}#website`,
+                  url: SITE_URL,
+                  name: "Molecule AI",
+                  publisher: { "@id": `${SITE_URL}#organization` },
+                  inLanguage: "en-US",
+                },
+                {
+                  "@type": "SoftwareApplication",
+                  "@id": `${SITE_URL}#software`,
+                  name: "Molecule AI",
+                  applicationCategory: "DeveloperApplication",
+                  operatingSystem: "Web",
+                  description:
+                    "Org-chart canvas for AI agent teams with credit metering, audit, and one-click runtime provisioning.",
+                  url: SITE_URL,
+                  offers: {
+                    "@type": "AggregateOffer",
+                    priceCurrency: "USD",
+                    lowPrice: "0",
+                    highPrice: "99",
+                    offerCount: "3",
+                    url: `${SITE_URL}/pricing`,
+                  },
+                  publisher: { "@id": `${SITE_URL}#organization` },
+                },
+              ],
+            }),
+          }}
+        />
       </head>
       <body className={`bg-surface text-ink ${interFont.variable} ${monoFont.variable}`}>
         <ThemeProvider initialTheme={theme}>

canvas/src/app/opengraph-image.tsx

@@ -0,0 +1,82 @@
+import { ImageResponse } from "next/og";
+
+// Marketing-launch SEO (mc#1486). Next.js App-Router file-system OG
+// convention: served as `/opengraph-image` and auto-attached as
+// `og:image` + `twitter:image`. Dynamic (not a static PNG in /public)
+// so we can iterate the brand mark + tagline pre-launch without
+// churning a binary blob in git history.
+export const runtime = "edge";
+
+export const alt = "Molecule AI — the AI org chart canvas";
+export const size = { width: 1200, height: 630 };
+export const contentType = "image/png";
+
+export default function OG() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          justifyContent: "center",
+          padding: "80px",
+          background:
+            "linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 60%, #16213e 100%)",
+          color: "#ffffff",
+          fontFamily: "system-ui, -apple-system, sans-serif",
+        }}
+      >
+        <div
+          style={{
+            fontSize: 28,
+            color: "#a3a3c2",
+            letterSpacing: "0.18em",
+            textTransform: "uppercase",
+            marginBottom: 24,
+          }}
+        >
+          Molecule AI
+        </div>
+        <div
+          style={{
+            fontSize: 76,
+            fontWeight: 700,
+            lineHeight: 1.05,
+            letterSpacing: "-0.02em",
+            maxWidth: 980,
+          }}
+        >
+          The AI org chart canvas
+        </div>
+        <div
+          style={{
+            fontSize: 32,
+            color: "#c8c8d8",
+            marginTop: 32,
+            lineHeight: 1.3,
+            maxWidth: 980,
+          }}
+        >
+          Wire Claude Code, Codex, Hermes, and OpenClaw agents into a governed
+          multi-agent workspace.
+        </div>
+        <div
+          style={{
+            position: "absolute",
+            right: 80,
+            bottom: 80,
+            fontSize: 22,
+            color: "#7a7a96",
+            display: "flex",
+          }}
+        >
+          moleculesai.app
+        </div>
+      </div>
+    ),
+    { ...size },
+  );
+}

canvas/src/app/robots.ts

@@ -0,0 +1,45 @@
+import type { MetadataRoute } from "next";
+
+// Marketing-launch SEO (mc#1486). Next.js App-Router robots convention:
+// this file is served as `/robots.txt` at build time and is the single
+// source of truth for crawler allow/disallow.
+//
+// Contract:
+//   - Public marketing routes (/, /pricing, /blog/*) are crawlable.
+//   - Authed/app routes (/orgs, /api/*) are noindex'd. They render
+//     useful content only after a session round-trip, so a crawler hit
+//     just wastes our crawl budget and exposes endpoint shapes.
+//   - Tenant subdomains (<slug>.moleculesai.app) share this build but
+//     are blocked at the host level by the canvas middleware sending
+//     an `X-Robots-Tag: noindex` header — robots.txt is per-host and
+//     this file's `host` field claims the apex as canonical.
+//
+// Note: `sitemap` is published via the sibling `sitemap.ts` route; we
+// reference it explicitly here so crawlers don't have to guess.
+const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL ?? "https://app.moleculesai.app";
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: [
+      {
+        userAgent: "*",
+        allow: ["/", "/pricing", "/blog"],
+        // Authed app surface + API + transient checkout returns. The
+        // /orgs route boots the org-selector behind AuthGate; even
+        // though SSR returns markup, that markup is a login wall when
+        // hit by an unauthenticated crawler, so indexing it dilutes
+        // brand searches with a "Please sign in" snippet.
+        disallow: [
+          "/orgs",
+          "/orgs/",
+          "/api/",
+          "/cp/",
+          "/checkout/",
+        ],
+      },
+    ],
+    sitemap: `${SITE_URL}/sitemap.xml`,
+    host: SITE_URL,
+  };
+}

canvas/src/app/sitemap.ts

@@ -0,0 +1,42 @@
+import type { MetadataRoute } from "next";
+
+// Marketing-launch SEO (mc#1486). App-Router sitemap convention: this
+// file is served as `/sitemap.xml` and enumerates the public marketing
+// surface for search crawlers + AI training pipelines.
+//
+// Scope deliberately narrow:
+//   - Apex landing, pricing, and the (currently single) blog post.
+//   - Authed app routes are excluded — they're disallowed in robots.ts
+//     and would appear as "Please sign in" wall to a crawler.
+//
+// `lastModified` uses a build-time timestamp rather than per-route
+// fs.stat so the same value applies regardless of where the build
+// runs (Vercel/Railway/local). When we add CMS-backed blog content,
+// swap to a per-entry timestamp from the source-of-truth metadata.
+const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL ?? "https://app.moleculesai.app";
+
+const BUILD_DATE = new Date();
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    {
+      url: `${SITE_URL}/`,
+      lastModified: BUILD_DATE,
+      changeFrequency: "weekly",
+      priority: 1.0,
+    },
+    {
+      url: `${SITE_URL}/pricing`,
+      lastModified: BUILD_DATE,
+      changeFrequency: "weekly",
+      priority: 0.9,
+    },
+    {
+      url: `${SITE_URL}/blog/2026-04-20-chrome-devtools-mcp`,
+      lastModified: new Date("2026-04-20"),
+      changeFrequency: "monthly",
+      priority: 0.6,
+    },
+  ];
+}