SEO Kit

SEO, out of the box.

Built on next-seo. 17 JSON-LD components, dynamic sitemap, robots.txt, manifest, and a dynamic OpenGraph image route — all pre-wired with our site config.

17

JSON-LD components

4

native route files (sitemap, robots, manifest, og)

100%

of public pages have meta + JSON-LD

Every component

Click any card to see the live JSON-LD emitted on this page.

Metadata factory
TSX
import { createMetadata } from "@/lib/seo";

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

Emitted in app/layout.tsx (site-wide).

Organization (site-wide)
TSX
<OrganizationJsonLd />

Live on this page ↓

WebSite (site-wide)
TSX
<WebSiteJsonLd />

Live on this page ↓

SoftwareApplication (site-wide)
TSX
<SoftwareApplicationJsonLd />

Live on this page ↓

Breadcrumb
TSX
<BreadcrumbJsonLd
  items={[
    { name: "Home", url: "/" },
    { name: "Templates", url: "/templates" },
    { name: "SaaS landing", url: "/templates/saas-landing" },
  ]}
/>

Live on this page ↓

Product (per-component)
TSX
<ProductJsonLd
  name="Button"
  description="6 variants × 4 sizes, asChild via Radix Slot."
  url="/components#button"
  category="UI primitive"
  offers={{ price: "0", priceCurrency: "USD" }}
  rating={{ value: 4.9, count: 127 }}
/>

Live on this page ↓

ItemList (registry-style listings)
TSX
<ItemListJsonLd
  name="JSN UI Components"
  items={[
    { name: "Button", url: "/components#button" },
    { name: "Card",   url: "/components#card" },
    { name: "Dialog", url: "/components#dialog" },
  ]}
/>

Live on this page ↓

FAQ
TSX
<FAQJsonLd
  questions={[
    { question: "What is JSN UI?", answer: "..." },
    { question: "Is it free?",     answer: "..." },
  ]}
/>

Live on this page ↓

HowTo (tutorials)
TSX
<HowToJsonLd
  name="Install JSN UI in 30 seconds"
  description="Three commands and you're shipping."
  steps={[
    { name: "Initialize", text: "Run npx jsn-ui init my-app" },
    { name: "Add a component", text: "Run npx jsn-ui add button" },
    { name: "Use it", text: "Import Button from @/components/ui/button" },
  ]}
/>

Live on this page ↓

Course (learning content)
TSX
<CourseJsonLd
  name="Building AI products with JSN UI"
  description="A hands-on tutorial series."
  url="/learn/ai-products"
  isFree
/>

Live on this page ↓

Event
TSX
<EventJsonLd
  name="JSN UI launch week"
  description="Live walkthrough + AMA with the team."
  startDate="2026-07-01T18:00:00Z"
  endDate="2026-07-08T18:00:00Z"
  location="Online"
  url="/events/launch-week"
/>

Live on this page ↓

Article / BlogPosting
TSX
<ArticleJsonLd
  headline="Ship AI products in an afternoon"
  description="A practical guide to the JSN UI kit."
  url="/blog/ship-ai-products"
  author="JSN UI team"
  datePublished="2026-06-21"
/>

Live on this page ↓

VideoObject
TSX
<VideoJsonLd
  name="JSN UI in 60 seconds"
  description="A quick tour through the kit."
  thumbnailUrl="https://jsn-ui.vercel.app/og"
  contentUrl="https://cdn.jsn-ui.com/intro.mp4"
  uploadDate="2026-06-21"
  duration="PT1M"
/>

Live on this page ↓

ProfilePage
TSX
<ProfilePageJsonLd
  name="Mira Okafor"
  description="Designer & developer making AI products feel human."
  url="/templates/portfolio"
  jobTitle="Designer & Developer"
  worksFor="Okafor Studio"
  sameAs={["https://twitter.com/mira"]}
/>

Live on this page ↓

LocalBusiness
TSX
<LocalBusinessJsonLd
  name="Okafor Studio"
  description="Independent design studio in Lisbon."
  url="/contact"
  address={{ city: "Lisbon", country: "PT" }}
  openingHours={["Mo-Fr 09:00-18:00"]}
/>

Live on this page ↓

Dataset (registry export)
TSX
<DatasetJsonLd
  name="JSN UI registry"
  description="The full set of 76 components, blocks, and tools."
  url="/registry"
  license="MIT"
  keywords={["shadcn", "react", "next", "ui-kit"]}
/>

Live on this page ↓

Native Next.js route files

/sitemap.ts

Dynamic XML sitemap from the registry

/robots.ts

robots.txt with AI bot rules

/manifest.ts

PWA manifest with theme colors

/og/route.tsx

Dynamic 1200×630 OpenGraph image

FAQ

What is next-seo and why does JSN UI use it?

next-seo by garmeeh is the de-facto SEO library for Next.js (8.5k+ stars). It provides JSON-LD components for every Google Search supported structured data type. JSN UI wraps each one for the App Router and ships them pre-wired with the site config.

Does this work with the Next.js App Router?

Yes. JSN UI's SEO components emit <script type="application/ld+json"> tags, which work in both Pages and App Router. The page metadata uses Next.js's built-in generateMetadata factory createMetadata().

Will Google actually use this?

Yes. JSON-LD is the format Google recommends for structured data. We emit all 17 types in the correct shape — verified against schema.org and Google Search Central docs.

Do I need a Google Search Console account?

Not to use these tools, but to see how Google indexes your site. Submit your sitemap.xml there after deploying.

Is the dynamic OG image free?

Yes. /og runs on Vercel's Edge Runtime with next/og and no extra cost beyond the standard Vercel plan.

Validate in Google Rich ResultsSchema.org validator