shipsaas

shipsaas comes with comprehensive SEO pre-configured in app/layout.tsx, powered by lib/config.ts and automatic sitemap generation.

Configuration

1. Update Config

All SEO defaults are pulled from lib/config.ts. Update these values:

lib/config.ts

// lib/config.ts — SEO-relevant fields
const config = {
  name: "YourApp",
  description: "A brief description of what your app does.",
  url: "https://yourapp.com",
  domainName: "yourapp.com",
  ogImage: "/og-image.png",
  keywords: ["SaaS", "Next.js", "React", "boilerplate"],
  // ...
};

2. Root Layout Metadata

The root app/layout.tsx automatically generates full Metadata from your config:

app/layout.tsx

import { siteConfig } from "@/lib/config";

export const metadata: Metadata = {
  title: {
    default: siteConfig.name,
    template: `%s | ${siteConfig.name}`,
  },
  description: siteConfig.description,
  keywords: siteConfig.keywords,
  authors: [{ name: siteConfig.name }],
  openGraph: {
    title: siteConfig.name,
    description: siteConfig.description,
    url: siteConfig.url,
    siteName: siteConfig.name,
    images: [{
      url: siteConfig.ogImage,
      width: 1200,
      height: 630,
      alt: siteConfig.name,
    }],
    type: "website",
    locale: "en_US",
  },
  twitter: {
    card: "summary_large_image",
    title: siteConfig.name,
    description: siteConfig.description,
    images: [siteConfig.ogImage],
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
};

3. Manifest & Icons

Update the following files in the public directory with your brand assets:

• favicon.ico — Browser tab icon
• og-image.png — Social share image (1200×630)

Page-Specific SEO

Add custom metadata to any page by exporting a metadata object. The title.template in the root layout will automatically append your app name:

// app/pricing/page.tsx
import { Metadata } from "next";

export const metadata: Metadata = {
  title: "Pricing",  // Renders as "Pricing | YourApp"
  description: "Simple, transparent pricing for everyone.",
};

export default function PricingPage() {
  return <div>...</div>;
}

Structured Data

Add JSON-LD structured data for rich snippets in search results:

export default function Page() {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'SoftwareApplication',
    name: 'YourApp',
    applicationCategory: 'BusinessApplication',
    offers: {
      '@type': 'Offer',
      price: '29',
      priceCurrency: 'USD',
    },
  };

  return (
    <section>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      {/* ... */}
    </section>
  );
}

Sitemap & Robots.txt

The project uses next-sitemap to automatically generate sitemap.xml and robots.txt at build time.

next-sitemap.config.js

Configuration for next-sitemap to generate sitemap.xml and robots.txt.

View Source

Verification: After deploying, verify your SEO using Google Search Console URL Inspection tool.