SEO

Search engine optimization with metadata, OpenGraph, Twitter cards, sitemap, and structured data.

Overview

ScaleRocket includes built-in SEO configuration using Next.js metadata API. The setup covers page titles, descriptions, OpenGraph tags, Twitter cards, structured data, and crawl directives.

Metadata Configuration

The root metadata is defined in src/app/layout.tsx:

export const metadata: Metadata = {
  title: "ScaleRocket — Ship your SaaS in days, not months",
  description: "The production-ready SaaS boilerplate with authentication, payments, emails, admin panel, and more.",
  keywords: [
    "saas boilerplate",
    "saas template",
    "next.js starter",
    "supabase template",
    "stripe integration",
    "saas starter kit",
  ],
};

Update title, description, and keywords to match your product.

Per-page metadata

Override metadata on any page by exporting a metadata object:

// src/app/blog/page.tsx
export const metadata: Metadata = {
  title: "Blog — YourBrand",
  description: "Latest updates and tutorials.",
};

OpenGraph and Twitter Cards

Both are configured in the root layout metadata:

openGraph: {
  title: "ScaleRocket — Ship your SaaS in days, not months",
  description: "The production-ready SaaS boilerplate...",
  type: "website",
  // Add these for richer previews:
  url: "https://yoursite.com",
  siteName: "ScaleRocket",
  images: [{ url: "/og-image.png", width: 1200, height: 630 }],
},
twitter: {
  card: "summary_large_image",
  title: "ScaleRocket — Ship your SaaS in days, not months",
  description: "The production-ready SaaS boilerplate...",
  // images: ["/og-image.png"],
},

OG Image

Place your OpenGraph image at public/og-image.png (recommended size: 1200x630px). Add the images property to both openGraph and twitter objects.

Sitemap

Create a sitemap.ts file for automatic sitemap generation:

// src/app/sitemap.ts
import { MetadataRoute } from "next";

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    { url: "https://yoursite.com", lastModified: new Date(), priority: 1 },
    { url: "https://yoursite.com/docs", lastModified: new Date(), priority: 0.8 },
    // Add more URLs as needed
  ];
}

Robots.txt

Create a robots.ts file to control crawler access:

// src/app/robots.ts
import { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  return {
    rules: { userAgent: "*", allow: "/", disallow: ["/api/", "/admin/"] },
    sitemap: "https://yoursite.com/sitemap.xml",
  };
}

Structured Data (JSON-LD)

Add structured data to help search engines understand your content:

// In any page component
<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{
    __html: JSON.stringify({
      "@context": "https://schema.org",
      "@type": "SoftwareApplication",
      name: "ScaleRocket",
      description: "SaaS boilerplate for rapid development",
      applicationCategory: "DeveloperApplication",
      offers: {
        "@type": "Offer",
        price: "99",
        priceCurrency: "USD",
      },
    }),
  }}
/>

Checklist

Update title and description in src/app/layout.tsx
Replace keywords with terms relevant to your product
Add an OG image at public/og-image.png
Create src/app/sitemap.ts with your URLs
Create src/app/robots.ts to control crawling
Add JSON-LD structured data on key pages
Test with Google Rich Results Test

Done reading? Mark this page as complete.

SEO

On this page