SEO Setup


Launchpad Next includes a scalable, content-driven SEO architecture built for modern Next.js applications.

The system is designed to make SEO:

  • Easy to manage
  • Easy to scale
  • AI-friendly
  • Content-driven
  • Reusable

Instead of scattering SEO across multiple files, metadata is generated from your content layer.



SEO Folder Structure

content/
├── marketing/
│   ├── home.ts
│   ├── pricing.ts
│   ├── features.ts
│   └── about.ts

└── seo/
    └── global.ts
 
lib/
└── seo/
    ├── generateMetadata.ts
    └── schema.ts
 
components/
└── seo/
    └── StructuredData.tsx
 
app/
├── sitemap.ts
├── robots.ts
└── layout.tsx

Global SEO Configuration

Global SEO settings live in:

content/seo/global.ts

Example:

export const SEO_CONFIG = {
  siteName: "Launchpad Next",
 
  siteUrl:
    "https://yourdomain.com",
 
  title:
    "Launchpad Next",
 
  description:
    "Premium Next.js SaaS Template.",
 
  ogImage:
    "/images/og/default.png",
 
  twitterHandle:
    "@launchpadnext",
};

This file acts as the single source of truth for site-wide SEO settings.


Page SEO

Each page stores its SEO configuration alongside its content.

Example:

content/marketing/pricing.ts
export const PRICING_PAGE = {
  seo: {
    title: "Pricing",
 
    description:
      "Simple and transparent pricing.",
 
    keywords: [
      "pricing",
      "saas pricing",
      "subscription plans",
    ],
  },
 
  hero: {},
 
  plans: {},
 
  faq: {},
};

Keeping content and SEO together improves maintainability and makes content easier to manage.


Metadata Generation

Launchpad Next generates metadata through a shared helper.

Location:

lib/seo/generateMetadata.ts

Example:

import {
  generateMetadata,
} from "@/lib/seo/generateMetadata";
 
import {
  PRICING_PAGE,
} from "@/content/marketing/pricing";
 
export const metadata =
  generateMetadata(
    PRICING_PAGE.seo
  );

This prevents duplication and ensures consistent SEO across all pages.


Dynamic Pages

For dynamic routes, metadata should be generated from the page content.

Example:

app/blog/[slug]/page.tsx
export async function generateMetadata({
  params,
}) {
  const post =
    await getPostBySlug(
      params.slug
    );
 
  return generateMetadata({
    title:
      post.title,
 
    description:
      post.description,
 
    image:
      post.image,
  });
}

This ensures every page has unique SEO metadata.


Open Graph Images

Launchpad Next supports Open Graph metadata for social sharing.

Recommended image size:

1200 × 630

Store images inside:

public/images/og

Example:

public/
└── images/
    └── og/
        ├── default.png
        ├── pricing.png
        └── features.png

Structured Data

Structured data improves search engine understanding of your content.

Location:

components/seo/StructuredData.tsx

Schema definitions:

lib/seo/schema.ts

Example:

<StructuredData
  schema={softwareSchema}
/>

SaaS Products

SoftwareApplication
Organization

Blog Posts

Article
BlogPosting

FAQ Sections

FAQPage

Pricing Pages

Product
Offer

Sitemap

Launchpad Next automatically generates a sitemap.

Location:

app/sitemap.ts

Example:

export default function sitemap() {
  return [
    {
      url:
        "https://yourdomain.com",
    },
  ];
}

Include:

  • Marketing pages
  • Blog posts
  • Documentation pages
  • Important landing pages

Robots Configuration

Location:

app/robots.ts

Example:

export default function robots() {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
    },
 
    sitemap:
      "https://yourdomain.com/sitemap.xml",
  };
}

Canonical URLs

Canonical URLs are automatically generated using:

content/seo/global.ts

Example:

siteUrl:
  "https://yourdomain.com"

Avoid hardcoding URLs throughout the application.


SEO Best Practices

Titles

Recommended length:

50-60 characters

Example:

Modern Next.js SaaS Template

Descriptions

Recommended length:

120-160 characters

Example:

Launch your SaaS faster with a premium Next.js template built for startups and product teams.

Keywords

Use relevant keywords naturally.

Example:

keywords: [
  "nextjs saas template",
  "startup template",
  "typescript saas",
];

Example Page Structure

export const HOME_PAGE = {
  seo: {
    title:
      "Modern SaaS Template",
 
    description:
      "Launch your next SaaS faster.",
 
    keywords: [
      "nextjs saas",
      "startup template",
    ],
  },
 
  hero: {},
 
  features: {},
 
  testimonials: {},
 
  faq: {},
 
  cta: {},
};

This keeps all page-related content and SEO in a single location.


Summary

Launchpad Next uses a centralized SEO architecture built around:

content/
├── marketing/
└── seo/
 
lib/
└── seo/
 
components/
└── seo/
 
app/
├── sitemap.ts
└── robots.ts

To update SEO:

  1. Open the page content file.
  2. Update the seo object.
  3. Save your changes.

The metadata, Open Graph tags, and SEO configuration will update automatically throughout the application.