JSN UI SEO

# JSN UI — SEO

JSN UI ships a complete SEO kit built on `next-seo`. Every public
page should use `createMetadata()` and (where appropriate) inject
JSON-LD via the `src/components/seo/*` components.

## The pattern

```tsx
// app/(site)/components/page.tsx
import { createMetadata } from "@/lib/seo";
import { BreadcrumbJsonLd, ItemListJsonLd } from "@/components/seo";

export const metadata = createMetadata({
  title: "Components",
  description: "Browse 16 shadcn-grade UI primitives.",
  path: "/components",
});

export default function Page() {
  return (
    <>
      <BreadcrumbJsonLd
        items={[
          { name: "Home", url: "/" },
          { name: "Components", url: "/components" },
        ]}
      />
      <ItemListJsonLd
        name="JSN UI Components"
        items={UI_ITEMS.map((it) => ({
          name: it.title,
          url: `/components#${it.slug}`,
        }))}
      />
      {/* ... page body ... */}
    </>
  );
}
```

## What `createMetadata()` produces

- `<title>` (templated with the root layout's "%s · JSN UI")
- `description`
- OpenGraph (locale, type, url, title, description, image 1200×630)
- Twitter card (summary_large_image)
- Canonical URL
- `robots` (with googleBot overrides for rich results)
- `theme-color` for both light and dark

## The 17 JSON-LD components

Use them site-wide where appropriate:
- `OrganizationJsonLd`, `WebSiteJsonLd`, `SoftwareApplicationJsonLd` — emit in `app/layout.tsx`
- `BreadcrumbJsonLd` — every sub-page
- `ItemListJsonLd` — listing pages
- `WebPageJsonLd` — generic pages
- `FAQJsonLd` — FAQ sections
- `ProductJsonLd` — per-component landings
- `HowToJsonLd` — tutorials
- `CourseJsonLd`, `EventJsonLd`, `ArticleJsonLd`, `RecipeJsonLd`, `VideoJsonLd`, `ReviewJsonLd`, `ProfilePageJsonLd`, `LocalBusinessJsonLd`, `DatasetJsonLd`

## Native route files

JSN UI auto-generates:
- `src/app/sitemap.ts` → `/sitemap.xml`
- `src/app/robots.ts` → `/robots.txt`
- `src/app/manifest.ts` → `/manifest.webmanifest`
- `src/app/og/route.tsx` → `/og?title=…&description=…` (1200×630 PNG)

## Verification

After deploying:
- Google Rich Results Test: https://search.google.com/test/rich-results
- Schema.org Validator: https://validator.schema.org/
- OpenGraph Debugger: https://www.opengraph.xyz/
- Lighthouse SEO audit: 100/100

## Common mistakes

- Don't add `OrganizationJsonLd` to every page (it's site-wide)
- Don't forget to add a new route to `src/app/sitemap.ts`
- Don't use `description` longer than 160 chars (it'll get truncated)
- Don't forget the absolute URL in OG `images` (relative URLs break on Twitter)