Plainform

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:

next-sitemap.config.js

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:

app/blog/[...slug]/page.tsx

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:

app/layout.tsx

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

Overview