NextSaasPilot Docs

Appearance

SEO Configuration ​

NextSaasPilot provides powerful SEO utilities to help you optimize your application for search engines. The createMetadata and getViewportMetadata functions make it easy to generate comprehensive metadata for your pages.

Overview ​

The SEO utilities are located in src/lib/metadata.ts and provide:

  • createMetadata() - Generates comprehensive SEO metadata including Open Graph and Twitter cards
  • getViewportMetadata() - Configures viewport settings and theme colors

These functions leverage Next.js 15+ App Router metadata API to provide optimal SEO performance.

Basic Usage ​

Page Metadata ​

Add metadata to any page by exporting a metadata object:

tsx
import { createMetadata } from "@/lib/metadata";

export const metadata = createMetadata({
  title: "Home | Your SaaS App",
  description: "Build and launch your SaaS in days, not months"
});

export default function HomePage() {
  return <div>Your page content</div>;
}

Root Layout Viewport ​

Add viewport configuration to your root layout:

tsx
// app/layout.tsx
import { getViewportMetadata } from "@/lib/metadata";

export const viewport = getViewportMetadata();

export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

Parameters ​

The createMetadata() function accepts an options object with the following properties:

title (optional) ​

  • Type: string
  • Max Length: 50-60 characters
  • Description: The page title that appears in search results and browser tabs
  • Best Practice: Include your main keyword and brand name
typescript
export const metadata = createMetadata({
  title: "Pricing Plans | NextSaasPilot"
});

description (optional) ​

  • Type: string
  • Max Length: 150-160 characters
  • Description: Brief description of the page content
  • Best Practice: Include a clear call-to-action and primary keywords
typescript
export const metadata = createMetadata({
  description: "Choose the perfect plan for your SaaS. Start free and upgrade as you grow."
});

keywords (optional) ​

  • Type: string[]
  • Description: Array of relevant keywords
  • Best Practice: Use 5-10 focused keywords relevant to the page
typescript
export const metadata = createMetadata({
  keywords: ["SaaS boilerplate", "Next.js starter", "rapid development"]
});

canonicalUrlRelative (optional) ​

  • Type: string
  • Description: Relative canonical URL to prevent duplicate content issues
  • Best Practice: Always set for important pages
typescript
export const metadata = createMetadata({
  canonicalUrlRelative: "/pricing"
});

authors (optional) ​

  • Type: Array<{ name: string; url?: string }>
  • Description: Author information for article pages
  • Best Practice: Use for blog posts and article pages
typescript
export const metadata = createMetadata({
  authors: [{ name: "John Doe", url: "https://twitter.com/johndoe" }]
});

openGraph (optional) ​

  • Type: object
  • Description: Open Graph metadata for social media sharing
  • Properties:
    • title: OG title (falls back to page title)
    • description: OG description
    • type: Page type ("website", "article", "profile")
    • url: Canonical URL
    • locale: Language locale (default: "en_US")
    • siteName: Site name
    • images: Array of image objects with url, width, height, alt
typescript
export const metadata = createMetadata({
  openGraph: {
    title: "Ultimate SaaS Boilerplate",
    description: "Launch your SaaS faster",
    type: "website",
    images: [
      {
        url: "/og-image.png",
        width: 1200,
        height: 630,
        alt: "NextSaasPilot Preview"
      }
    ]
  }
});

Built with NextSaasPilot

© 2025 NextSaasPilot