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.tsxGlobal SEO Configuration
Global SEO settings live in:
content/seo/global.tsExample:
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.tsexport 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.tsExample:
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.tsxexport 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 × 630Store images inside:
public/images/ogExample:
public/
└── images/
└── og/
├── default.png
├── pricing.png
└── features.pngStructured Data
Structured data improves search engine understanding of your content.
Location:
components/seo/StructuredData.tsxSchema definitions:
lib/seo/schema.tsExample:
<StructuredData
schema={softwareSchema}
/>Recommended Schema Types
SaaS Products
SoftwareApplication
OrganizationBlog Posts
Article
BlogPostingFAQ Sections
FAQPagePricing Pages
Product
OfferSitemap
Launchpad Next automatically generates a sitemap.
Location:
app/sitemap.tsExample:
export default function sitemap() {
return [
{
url:
"https://yourdomain.com",
},
];
}Include:
- Marketing pages
- Blog posts
- Documentation pages
- Important landing pages
Robots Configuration
Location:
app/robots.tsExample:
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.tsExample:
siteUrl:
"https://yourdomain.com"Avoid hardcoding URLs throughout the application.
SEO Best Practices
Titles
Recommended length:
50-60 charactersExample:
Modern Next.js SaaS TemplateDescriptions
Recommended length:
120-160 charactersExample:
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.tsTo update SEO:
- Open the page content file.
- Update the
seoobject. - Save your changes.
The metadata, Open Graph tags, and SEO configuration will update automatically throughout the application.