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: Automatically includes all app 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: Prevent duplicate content issues

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.SITE_URL,
  generateRobotsTxt: true,
  exclude: ['*.png', '*.json', '/sso-callback', '/forgot-password'],
  additionalPaths: async () => [
    { loc: '/blog', changefreq: 'daily', priority: 0.8 },
    { loc: '/sign-in', changefreq: 'daily', priority: 0.8 },
  ],
};

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.description,
    openGraph: {
      title: page.data.title,
      description: page.data.description,
      images: [page.data.image],
    },
  };
}

Root Layout Metadata

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

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

export function generateMetadata() {
  return {
    title: {
      default: siteConfig.siteName,
      template: `%s | ${siteConfig.siteName}`
    },
    description: siteConfig.description,
    metadataBase: new URL(env.NEXT_PUBLIC_SITE_URL),
  };
}

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 page metadata
• Home page: Landing page with optimized metadata

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