@

feat(web): SEO — server-rendered template pages + /guides articles

- templates/[slug] converted from client to server component: per-template
  generateMetadata (title/description/canonical/OG) + SoftwareApplication
  JSON-LD; code-audit toggle split into a client island; missing/non-public
  templates now return a real 404.
- sitemap.ts pulls public template slugs live from the API (best-effort) +
  the new /guides routes.
- new /guides section: 3 server-rendered SEO articles (host MCP with OAuth,
  hosted-platforms comparison, MintMCP alternative) with TechArticle JSON-LD;
  Guides link added to the marketing nav.
- lib/seo.ts: articleJsonLd + templateJsonLd builders.

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

apps/web/app/templates/[slug]/collapsible-code.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { CodeBlock } from '@/components/code-block';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { useState } from 'react';
+
+/**
+ * Client island: the "audit the generated code before you fork" toggle. Kept
+ * out of the server-rendered page so the page itself stays static + indexable.
+ */
+export function CollapsibleCode({ code }: { code: string }) {
+  const [show, setShow] = useState(false);
+  return (
+    <section className="mt-10">
+      <button
+        type="button"
+        onClick={() => setShow((s) => !s)}
+        className="inline-flex items-center gap-1 text-[14px] font-semibold tracking-tight text-[--color-fg] transition-colors hover:text-[--color-fg-muted]"
+      >
+        {show ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+        Generated code ({code.length} chars)
+      </button>
+      <p className="mt-1 text-[12px] text-[--color-fg-muted]">
+        Audit before you fork. We re-scan every published template for banned patterns (eval,
+        child_process, prompt-injection markers).
+      </p>
+      {show && (
+        <div className="mt-3">
+          <CodeBlock label="src/server.ts" code={code} />
+        </div>
+      )}
+    </section>
+  );
+}

apps/web/app/templates/[slug]/page.tsx

@@ -1,95 +1,71 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import Link from 'next/link';
-import { useParams, useRouter } from 'next/navigation';
-import { ShieldCheck, GitFork, Activity, ExternalLink, ChevronDown, ChevronRight } from 'lucide-react';
-import { apiFetch } from '@/lib/api';
-import { Logo } from '@/components/logo';
-import { Button } from '@/components/ui/button';
 import { CodeBlock } from '@/components/code-block';
+import { JsonLd } from '@/components/json-ld';
+import { Logo } from '@/components/logo';
+import { type TemplateDetail, fetchTemplate } from '@/lib/templates-server';
+import { pageMetadata, templateJsonLd } from '@/lib/seo';
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { Activity, ExternalLink, GitFork, ShieldCheck } from 'lucide-react';
+import { CollapsibleCode } from './collapsible-code';
 
-interface Tool {
-  name: string;
-  description: string;
-  inputSchema: Record<string, unknown>;
+// Server-rendered for SEO: per-template <title>, description, OpenGraph and
+// SoftwareApplication JSON-LD. The only interactive piece (the code-audit
+// toggle) lives in a client island.
+
+interface PageProps {
+  params: Promise<{ slug: string }>;
 }
 
-interface SecretHint {
-  key: string;
-  description: string;
-  howToGetUrl?: string;
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const t = await fetchTemplate(slug);
+  if (!t) {
+    return pageMetadata({
+      title: 'Template not found',
+      description: 'This MCP server template is not available.',
+      path: `/templates/${slug}`,
+    });
+  }
+  return pageMetadata({
+    title: `${t.title} — MCP server for Claude, Cursor & ChatGPT`,
+    description:
+      t.shortDescription.length > 0
+        ? t.shortDescription
+        : `Fork the ${t.title} MCP server and deploy your own OAuth-protected copy in seconds.`,
+    path: `/templates/${slug}`,
+  });
 }
 
-interface TemplateDetail {
-  id: string;
-  slug: string;
-  title: string;
-  shortDescription: string;
-  longDescription: string | null;
-  category: string;
-  status: 'draft' | 'public' | 'hidden' | 'takedown';
-  verified: boolean;
-  forkCount: number;
-  activeDeployments: number;
-  toolsSchema: Tool[];
-  generatedCode: string;
-  requiredSecrets: SecretHint[];
-  scopes: string[];
-  ownerName: string | null;
-  ownerOrgName: string | null;
-  sourceServerId: string | null;
-  createdAt: string;
-}
+export default async function TemplateDetailPage({ params }: PageProps) {
+  const { slug } = await params;
+  const template: TemplateDetail | null = await fetchTemplate(slug);
+  if (!template) notFound();
 
-export default function TemplateDetail() {
-  const params = useParams<{ slug: string }>();
-  const router = useRouter();
-  const [template, setTemplate] = useState<TemplateDetail | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [showCode, setShowCode] = useState(false);
-
-  useEffect(() => {
-    apiFetch<{ template: TemplateDetail }>(`/v1/templates/${params.slug}`)
-      .then((r) => setTemplate(r.template))
-      .catch((e) => {
-        const detail = (e as { detail?: { error?: string } }).detail;
-        setError(detail?.error ?? (e as Error).message);
-      });
-  }, [params.slug]);
-
-  function useTemplate() {
-    if (!template) return;
-    router.push(`/servers/new?template=${template.slug}`);
-  }
-
-  if (error) {
-    return (
-      <div className="flex min-h-screen items-center justify-center px-6">
-        <div className="text-center">
-          <p className="text-[14px]">Template not found.</p>
-          <Link href="/templates" className="mt-3 inline-block text-[12px] text-[--color-accent] underline">
-            ← Back to marketplace
-          </Link>
-        </div>
-      </div>
-    );
-  }
-
-  if (!template) {
-    return (
-      <div className="px-8 py-20 text-center mono text-[12px] text-[--color-fg-muted]">Loading…</div>
-    );
-  }
+  const forkHref = `/servers/new?template=${template.slug}`;
 
   return (
     <div className="flex min-h-screen flex-col">
+      <JsonLd
+        data={templateJsonLd({
+          slug: template.slug,
+          title: template.title,
+          description: template.shortDescription,
+          category: template.category,
+          tools: template.toolsSchema.map((t) => t.name),
+          author: template.ownerName ?? template.ownerOrgName,
+        })}
+      />
       <header className="sticky top-0 z-50 border-b border-[--color-border] bg-[--color-bg]/85 backdrop-blur-md">
         <div className="mx-auto flex h-12 max-w-5xl items-center justify-between px-6">
           <div className="flex items-center gap-3">
             <Logo />
             <span className="text-[12.5px] text-[--color-fg-subtle]">
-              / <Link href="/templates" className="hover:text-[--color-fg]">templates</Link> / {template.slug}
+              /{' '}
+              <Link href="/templates" className="hover:text-[--color-fg]">
+                templates
+              </Link>{' '}
+              / {template.slug}
             </span>
           </div>
           <Link
@@ -130,26 +106,30 @@ export default function TemplateDetail() {
                 Tools ({template.toolsSchema.length})
               </h2>
               <div className="mt-3 space-y-3">
-                {template.toolsSchema.map((tool) => (
-                  <div key={tool.name} className="panel p-3">
-                    <div className="flex items-baseline gap-2">
-                      <span className="mono text-[13px] font-semibold">{tool.name}</span>
-                      <span className="mono text-[10.5px] text-[--color-fg-subtle]">
-                        {Object.keys(tool.inputSchema ?? {}).length} param
-                        {Object.keys(tool.inputSchema ?? {}).length === 1 ? '' : 's'}
-                      </span>
-                    </div>
-                    <p className="mt-1.5 text-[12.5px] text-[--color-fg-muted]">{tool.description}</p>
-                    {Object.keys(tool.inputSchema ?? {}).length > 0 && (
-                      <div className="mt-2">
-                        <CodeBlock
-                          label="input schema"
-                          code={JSON.stringify(tool.inputSchema, null, 2)}
-                        />
+                {template.toolsSchema.map((tool) => {
+                  const paramCount = Object.keys(tool.inputSchema ?? {}).length;
+                  return (
+                    <div key={tool.name} className="panel p-3">
+                      <div className="flex items-baseline gap-2">
+                        <span className="mono text-[13px] font-semibold">{tool.name}</span>
+                        <span className="mono text-[10.5px] text-[--color-fg-subtle]">
+                          {paramCount} param{paramCount === 1 ? '' : 's'}
+                        </span>
                       </div>
-                    )}
-                  </div>
-                ))}
+                      <p className="mt-1.5 text-[12.5px] text-[--color-fg-muted]">
+                        {tool.description}
+                      </p>
+                      {paramCount > 0 && (
+                        <div className="mt-2">
+                          <CodeBlock
+                            label="input schema"
+                            code={JSON.stringify(tool.inputSchema, null, 2)}
+                          />
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
               </div>
             </section>
 
@@ -178,62 +158,34 @@ export default function TemplateDetail() {
                           </a>
                         )}
                       </div>
-                      <p className="mt-1.5 text-[12.5px] text-[--color-fg-muted]">
-                        {s.description}
-                      </p>
+                      <p className="mt-1.5 text-[12.5px] text-[--color-fg-muted]">{s.description}</p>
                     </div>
                   ))}
                 </div>
               </section>
             )}
 
-            <section className="mt-10">
-              <button
-                type="button"
-                onClick={() => setShowCode((s) => !s)}
-                className="inline-flex items-center gap-1 text-[14px] font-semibold tracking-tight text-[--color-fg] transition-colors hover:text-[--color-fg-muted]"
-              >
-                {showCode ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
-                Generated code ({template.generatedCode.length} chars)
-              </button>
-              <p className="mt-1 text-[12px] text-[--color-fg-muted]">
-                Audit before you fork. We re-scan every published template for banned patterns
-                (eval, child_process, prompt-injection markers).
-              </p>
-              {showCode && (
-                <div className="mt-3">
-                  <CodeBlock label="src/server.ts" code={template.generatedCode} />
-                </div>
-              )}
-            </section>
+            <CollapsibleCode code={template.generatedCode} />
           </div>
 
           <aside className="space-y-3">
             <div className="panel p-4">
               {template.status === 'public' ? (
                 <>
-                  <Button variant="primary" size="lg" className="w-full" onClick={useTemplate}>
+                  <Link
+                    href={forkHref}
+                    className="inline-flex h-11 w-full items-center justify-center rounded-md bg-[--color-accent] text-[13.5px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8]"
+                  >
                     Fork this template →
-                  </Button>
+                  </Link>
                   <p className="mt-2 text-[11.5px] text-[--color-fg-muted]">
                     One click → your own isolated container.
                   </p>
                 </>
               ) : (
-                <>
-                  <div className="rounded-md border border-amber-400/30 bg-amber-400/5 p-2.5 text-[12px] text-amber-200/90">
-                    This template is <span className="mono">{template.status}</span> — not
-                    forkable. {template.sourceServerId ? 'Re-share it from the server’s Publish tab to allow forks.' : ''}
-                  </div>
-                  {template.sourceServerId && (
-                    <a
-                      href={`/servers/${template.sourceServerId}`}
-                      className="mt-2 inline-flex h-8 w-full items-center justify-center rounded-md border border-[--color-border] bg-[--color-bg-elevated] text-[12.5px] text-[--color-fg] transition-colors hover:bg-[--color-bg-subtle]"
-                    >
-                      Manage in server →
-                    </a>
-                  )}
-                </>
+                <div className="rounded-md border border-amber-400/30 bg-amber-400/5 p-2.5 text-[12px] text-amber-200/90">
+                  This template is <span className="mono">{template.status}</span> — not forkable.
+                </div>
               )}
             </div>
 
@@ -245,17 +197,17 @@ export default function TemplateDetail() {
                 icon={<Activity size={11} />}
               />
               <Row label="Category" value={template.category} mono />
+              <Row label="Published" value={new Date(template.createdAt).toLocaleDateString()} />
               <Row
-                label="Published"
-                value={new Date(template.createdAt).toLocaleDateString()}
+                label="Author"
+                value={template.ownerName ?? template.ownerOrgName ?? 'anonymous'}
               />
-              <Row label="Author" value={template.ownerName ?? template.ownerOrgName ?? 'anonymous'} />
             </div>
 
             <div className="panel p-3 text-[11.5px] leading-relaxed text-[--color-fg-muted]">
               <strong className="text-[--color-fg]">Forking is safe.</strong> Your fork gets its own
-              Docker container, its own port, its own AES-256-encrypted secrets. The template
-              author has no visibility into your traffic or data.
+              Docker container, its own port, its own AES-256-encrypted secrets. The template author
+              has no visibility into your traffic or data.
             </div>
           </aside>
         </div>