Overview

Plainform includes pre-configured SEO features to enhance your application's search engine visibility, saving development time with built-in tools and best practices.

What's Included

Plainform provides three core SEO features:

1. Automatic Sitemaps

Generated using next-sitemap to help search engines discover and index your pages.

• Static sitemap: public/sitemap.xml generated at build time
• Dynamic routes: Includes indexable app routes and excludes private/noindex routes
• Custom routes: Add additional paths via configuration
• robots.txt: Generated automatically with sitemap reference

2. Metadata API

Next.js Metadata API for optimized meta tags on every page:

• Page titles: Unique titles for each route
• Descriptions: SEO-friendly descriptions
• Open Graph: Social media preview cards
• Twitter Cards: Twitter-specific metadata
• Canonical URLs: Root, blog, docs, legal, and static pages define canonical URLs through the Metadata API

3. Performance Optimization

Next.js built-in optimizations for fast page loads:

• Image optimization: Automatic WebP conversion and lazy loading
• Code splitting: Load only necessary JavaScript per page
• Static generation: Pre-render pages at build time
• Font optimization: Automatic font subsetting and loading

How It Works

Sitemap Generation

The next-sitemap.config.js file configures sitemap generation:

module.exports = {
  siteUrl: process.env.NEXT_PUBLIC_SITE_URL,
  generateRobotsTxt: true,
  exclude: [
    '/icon*.png',
    '/icon*.svg',
    '/apple-icon*',
    '/favicon.ico',
    '/opengraph-image*',
    '*.json',
    '/order',
    '/order*',
    '/sign-in',
    '/sign-in*',
    '/sign-up',
    '/sign-up*',
    '/forgot-password',
    '/forgot-password*',
    '/sso-callback',
    '/sso-callback*',
    '/legal/privacy-policy',
    '/legal/terms-and-conditions',
  ],
  additionalPaths: async () => {
    const defaultChangeFreq = 'daily';
    const defaultPriority = 0.7;
    const lastMod = new Date().toISOString();

    const additionalRoutes = [
      {
        loc: '/blog',
        changefreq: defaultChangeFreq,
        priority: defaultPriority,
        lastmod: lastMod,
      },
    ];

    return additionalRoutes;
  },
};

Run npm run build to generate public/sitemap.xml and public/robots.txt.

Metadata Configuration

Pages use generateMetadata() for dynamic meta tags:

export async function generateMetadata({ params }: { params: { slug: string[] } }) {
  const page = blogSource.getPage(params.slug);

  return {
    title: page.data.title,
    description: page.data.summary,
    alternates: {
      canonical: page.url,
    },
    openGraph: {
      title: page.data.title,
      description: page.data.description,
      url: env.NEXT_PUBLIC_SITE_URL + page.url,
      images: [page.data.img],
    },
  };
}

Root Layout Metadata

The root layout (app/layout.tsx) sets default metadata:

import { siteConfig } from '@/config/siteConfig';
import { env } from '@/env';

export const metadata = {
  metadataBase: new URL(env.NEXT_PUBLIC_SITE_URL),
  title: {
    template: `${siteConfig.siteName} | %s`,
    default: siteConfig.siteName,
  },
  alternates: {
    canonical: '/',
  },
  description: siteConfig.description,
};

Current Implementation

Plainform includes metadata for:

• Blog posts: Dynamic titles, descriptions, and Open Graph images
• Documentation: Page-specific metadata from frontmatter
• Legal pages: Privacy policy, terms of service metadata
• Auth pages: Sign-in, sign-up, and forgot-password metadata with robots.index: false
• Order page: Order confirmation metadata with robots.index: false
• Home page: Landing page with optimized metadata
• Canonical URLs: Root, blog, docs, and legal pages set canonical URLs from siteConfig or MDX page URLs

SEO Best Practices

Plainform follows these SEO best practices:

• Unique titles: Every page has a unique, descriptive title
• Meta descriptions: 150-160 character descriptions for search results
• Semantic HTML: Proper heading hierarchy (h1, h2, h3)
• Image alt text: Descriptive alt attributes for all images
• Clean URLs: Descriptive, keyword-rich URLs
• Mobile-friendly: Responsive design for mobile SEO
• Fast loading: Optimized performance for Core Web Vitals

Next Steps

• Configuration & Best Practices - Configure sitemap and metadata
• Customization & Optimization - Customize SEO for your needs
• Next.js Metadata API - Complete metadata reference