SEO & Metadata

Defaults cover titles, descriptions, Open Graph, Twitter cards, robots, and JSON-LD helpers so you are not inventing metadata from scratch.

1. Global Metadata

src/config/app.ts exports the site-wide metadata object used by the root layout:

  • Title & description for search snippets
  • Keywords (optional; keep them honest)
  • Open Graph for link previews
  • Twitter large image cards
  • Robots baseline allow rules
// src/config/app.ts (example shape: see repo for live values)
import { UI_CONFIG } from "./ui";

export const APP_CONFIG = {
  name: UI_CONFIG.branding.appName,
  description: "Describe your fork in one sentence here.",
  url: process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000",
  ogImage: "/og-image.png",
  twitterHandle: "@yourhandle",
} as const;

2. Per-Route Metadata

For page-specific titles and descriptions, this template centralizes copy in:

  • src/config/seo.ts (route/page metadata helpers)

Example usage:

import type { Metadata } from "next";
import { SEO } from "@/config/seo";

export const metadata: Metadata = {
  title: SEO.pricing.title,
  description: SEO.pricing.description,
};

3. Dynamic Documentation Metadata

Documentation pages automatically generate SEO metadata based on their content and path.

Breadcrumbs

src/app/docs/[slug]/page.tsx includes semantic breadcrumbs (Schema.org JSON-LD) to help search engines understand the site structure.

JSON-LD Structured Data

Documentation pages include TechArticle structured data, which can lead to rich snippets in search results.

4. Robots & Sitemap

sitemap.ts

The sitemap is dynamically generated at /sitemap.xml via src/app/sitemap.ts. It includes:

  • Marketing pages (Home, Pricing, Login)
  • Documentation index
  • All individual documentation pages with appropriate priorities.

robots.ts

Configured at /robots.txt to allow indexing of public pages while protecting private dashboard and API routes.

// Example from robots.ts
disallow: ["/dashboard/", "/api/", "/auth/"]

5. Skip to Content

For accessibility, a "Skip to main content" link is included in src/app/layout.tsx. This is hidden visually but accessible via the Tab key, helping users with screen readers or limited mobility.

6. Favicons & Manifest

Standard assets are expected in the public/ directory:

  • favicon.ico: Classic favicon
  • apple-touch-icon.png: For iOS home screen
  • manifest.json: Web app manifest for PWA support
  • og-image.png: Default social sharing image (1200x630px)

7. How to Customize

  1. Brand Name: Update src/config/brand.ts (productName, companyName, emails, social links).
  2. Descriptions: Update APP_CONFIG.description in src/config/app.ts.
  3. Social Image: Replace public/og-image.png with your own branded image.
  4. Tracking: You can add Google Analytics or other scripts in the RootLayout (src/app/layout.tsx).