SEO Overview

@startupkit/seo provides utilities for generating Next.js metadata, structured data, sitemaps, and robots.txt files.

Features

Metadata generation - OpenGraph, Twitter Cards, canonical URLs
Structured data - JSON-LD schemas for rich search results
Sitemaps - Dynamic sitemap generation
Robots.txt - Search engine crawling rules

Usage

Functions

Function	Description
`generateMetadata()`	Generate Next.js metadata object with OpenGraph, Twitter, canonical URL
`generateSitemap()`	Generate sitemap entries for Next.js sitemap.ts
`generateRobots()`	Generate robots.txt rules for Next.js robots.ts
`generateOrganizationSchema()`	JSON-LD schema for organization
`generateWebsiteSchema()`	JSON-LD schema for website
`generateBreadcrumbSchema()`	JSON-LD schema for breadcrumbs
`generateArticleSchema()`	JSON-LD schema for articles/blog posts

generateMetadata

For page-level metadata (canonical URL, noIndex):

import { generateMetadata } from "@startupkit/seo"

generateMetadata({
  title: "Page Title",
  description: "Page description",
  baseUrl: "https://myapp.com",
  siteName: "My App",
  path: "/page",
  ogImage: "/og-image.png",
  noIndex: false
})

For root layout metadata (title template, keywords):

import { generateMetadata } from "@startupkit/seo"

generateMetadata({
  title: "My App",
  description: "App description",
  baseUrl: "https://myapp.com",
  siteName: "My App",
  titleTemplate: "%s | My App",
  keywords: ["saas", "app"],
  ogImage: "/og-image.png"
})

generateSitemap

import { generateSitemap } from "@startupkit/seo"

generateSitemap({
  baseUrl: "https://myapp.com",
  routes: [
    { path: "/", priority: 1, changeFrequency: "daily" },
    { path: "/about", priority: 0.8 },
    { path: "/blog", priority: 0.9 }
  ]
})

generateRobots

import { generateRobots } from "@startupkit/seo"

generateRobots({
  baseUrl: "https://myapp.com",
  disallowPaths: ["/api/", "/dashboard/"]
})

Structured Data Schemas

import {
  generateOrganizationSchema,
  generateWebsiteSchema,
  generateBreadcrumbSchema,
  generateArticleSchema
} from "@startupkit/seo"

// Organization
generateOrganizationSchema({
  name: "My Company",
  url: "https://myapp.com",
  logo: "https://myapp.com/logo.png",
  sameAs: ["https://twitter.com/mycompany"]
})

// Website with search
generateWebsiteSchema({
  name: "My App",
  url: "https://myapp.com",
  description: "The best app"
})

// Breadcrumbs
generateBreadcrumbSchema([
  { name: "Home", url: "https://myapp.com" },
  { name: "Blog", url: "https://myapp.com/blog" }
])

// Article
generateArticleSchema({
  headline: "Article Title",
  description: "Article description",
  datePublished: "2024-01-15",
  authorName: "John Doe",
  imageUrl: "https://myapp.com/article-image.jpg"
})

Quick Setup

Page Metadata

app/about/page.tsx

import {  } from "@startupkit/seo"

export const  = ({
  : "About Us",
  : "Learn about our company and mission",
  : "/about",
  : "https://myapp.com",
  : "My App"
})

export default function () {
  return <>About content</>
}

Root Layout Metadata

app/layout.tsx

import {  } from "@startupkit/seo"

export const  = ({
  : "My App",
  : "The best app for doing things",
  : "https://myapp.com",
  : "My App",
  : "%s | My App"
})

What's Generated

The generateMetadata function creates:

Field	Description
`title`	Page title (with template support)
`description`	Meta description
`openGraph`	Facebook/LinkedIn sharing
`twitter`	Twitter card metadata
`alternates.canonical`	Canonical URL
`robots`	Index/follow directives
`keywords`	SEO keywords (root layout)

Structured Data

Add JSON-LD for rich search results:

app/layout.tsx

import type {  } from "react"
import { 
  ,
   
} from "@startupkit/seo"

const  = ({
  : "My Company",
  : "https://myapp.com",
  : "https://myapp.com/logo.png"
})

export default function ({  }: { :  }) {
  return (
    <>
      <>
        <
          ="application/ld+json"
          ={{ : .() }}
        />
      </>
      <>{}</>
    </>
  )
}

Sitemap

app/sitemap.ts

import {  } from "@startupkit/seo"

export default function () {
  return ({
    : "https://myapp.com",
    : [
      { : "/", : 1 },
      { : "/about", : 0.8 },
      { : "/pricing", : 0.9 }
    ]
  })
}

Robots.txt

app/robots.ts

import {  } from "@startupkit/seo"

export default function () {
  return ({
    : "https://myapp.com",
    : ["/api/", "/dashboard/", "/auth/"]
  })
}

Next Steps

Page metadata - Full metadata configuration
Structured data - JSON-LD schemas
Sitemaps - Dynamic sitemap generation
Robots.txt - Crawling rules

On this page