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:

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:

// 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

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

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

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

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

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

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"
      }
    ]
  }
});