MyApp

This page covers how to configure Plainform's SEO features and follow best practices.

Environment Variables

Plainform requires the site URL for sitemap generation and metadata:

.env

SITE_URL="https://yourdomain.com"
NEXT_PUBLIC_SITE_URL="https://yourdomain.com"

SITE_URL: Used by next-sitemap for sitemap generation (server-side)
NEXT_PUBLIC_SITE_URL: Used by metadata API for canonical URLs (client-side)

In development, use http://localhost:3000 for both variables.

Sitemap Configuration

The next-sitemap.config.js file controls 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 },
  ],
};

Generate sitemap:

Terminal

npm run build

This creates public/sitemap.xml and public/robots.txt.

Robots.txt Configuration

Customize robots.txt in next-sitemap.config.js:

next-sitemap.config.js

module.exports = {
  siteUrl: process.env.SITE_URL,
  generateRobotsTxt: true,
  robotsTxtOptions: {
    policies: [
      { userAgent: '*', allow: '/' },
      { userAgent: '*', disallow: '/admin' },
      { userAgent: '*', disallow: '/api' },
    ],
  },
};

Metadata Best Practices

Page Titles

Example metadata

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

export function generateMetadata() {
  return {
    title: `Page Title | ${siteConfig.siteName}`,
    // Or use template from root layout:
    title: 'Page Title', // Becomes "Page Title | MyApp"
  };
}

Best practices:

Keep titles under 60 characters
Include primary keyword
Make titles unique per page

Meta Descriptions

Example metadata

export function generateMetadata() {
  return {
    description: 'Learn how to configure SEO in Plainform with sitemaps, metadata, and performance optimization.',
  };
}

Best practices:

150-160 characters optimal length
Include primary keyword naturally
Make descriptions unique per page

Open Graph Tags

Example metadata

export function generateMetadata() {
  return {
    openGraph: {
      title: 'Page Title',
      description: 'Page description',
      images: ['/og-image.jpg'],
      type: 'website',
    },
    twitter: {
      card: 'summary_large_image',
      title: 'Page Title',
      description: 'Page description',
      images: ['/og-image.jpg'],
    },
  };
}

Image requirements: 1200x630px, JPG or PNG, under 1MB.

Performance Best Practices

Image Optimization

Always use Next.js Image component:

Optimized images

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero image"
  width={1200}
  height={600}
  priority  // For above-the-fold images
/>

Font Optimization

app/layout.tsx

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

Content Best Practices

Heading Hierarchy

Use proper heading structure:

Semantic HTML

<h1>Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>

Rules: One h1 per page, don't skip heading levels.

Alt Text

Provide descriptive alt text:

Alt text

<Image
  src="/product.jpg"
  alt="Dashboard showing analytics"
  width={800}
  height={600}
/>

Monitoring SEO

Google Search Console

Verify your site at search.google.com/search-console
Submit sitemap: https://yourdomain.com/sitemap.xml
Monitor indexing status and search performance

Lighthouse Audits

Run Lighthouse in Chrome DevTools or CLI:

Terminal

npx lighthouse https://yourdomain.com --view

Target 90+ scores for Performance, Accessibility, Best Practices, and SEO.

Next Steps

Customization & Optimization - Customize SEO features
Next.js Metadata API - Complete reference

This page covers how to configure Plainform's SEO features and follow best practices.

Environment Variables

Plainform requires the site URL for sitemap generation and metadata:

.env

SITE_URL="https://yourdomain.com"
NEXT_PUBLIC_SITE_URL="https://yourdomain.com"

SITE_URL: Used by next-sitemap for sitemap generation (server-side)
NEXT_PUBLIC_SITE_URL: Used by metadata API for canonical URLs (client-side)

In development, use http://localhost:3000 for both variables.

Sitemap Configuration

The next-sitemap.config.js file controls 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 },
  ],
};

Generate sitemap:

Terminal

npm run build

This creates public/sitemap.xml and public/robots.txt.

Robots.txt Configuration

Customize robots.txt in next-sitemap.config.js:

next-sitemap.config.js

module.exports = {
  siteUrl: process.env.SITE_URL,
  generateRobotsTxt: true,
  robotsTxtOptions: {
    policies: [
      { userAgent: '*', allow: '/' },
      { userAgent: '*', disallow: '/admin' },
      { userAgent: '*', disallow: '/api' },
    ],
  },
};

Metadata Best Practices

Page Titles

Example metadata

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

export function generateMetadata() {
  return {
    title: `Page Title | ${siteConfig.siteName}`,
    // Or use template from root layout:
    title: 'Page Title', // Becomes "Page Title | MyApp"
  };
}

Best practices:

Keep titles under 60 characters
Include primary keyword
Make titles unique per page

Meta Descriptions

Example metadata

export function generateMetadata() {
  return {
    description: 'Learn how to configure SEO in Plainform with sitemaps, metadata, and performance optimization.',
  };
}

Best practices:

150-160 characters optimal length
Include primary keyword naturally
Make descriptions unique per page

Open Graph Tags

Example metadata

export function generateMetadata() {
  return {
    openGraph: {
      title: 'Page Title',
      description: 'Page description',
      images: ['/og-image.jpg'],
      type: 'website',
    },
    twitter: {
      card: 'summary_large_image',
      title: 'Page Title',
      description: 'Page description',
      images: ['/og-image.jpg'],
    },
  };
}

Image requirements: 1200x630px, JPG or PNG, under 1MB.

Performance Best Practices

Image Optimization

Always use Next.js Image component:

Optimized images

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero image"
  width={1200}
  height={600}
  priority  // For above-the-fold images
/>

Font Optimization

app/layout.tsx

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

Content Best Practices

Heading Hierarchy

Use proper heading structure:

Semantic HTML

<h1>Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>

Rules: One h1 per page, don't skip heading levels.

Alt Text

Provide descriptive alt text:

Alt text

<Image
  src="/product.jpg"
  alt="Dashboard showing analytics"
  width={800}
  height={600}
/>

Monitoring SEO

Google Search Console

Verify your site at search.google.com/search-console
Submit sitemap: https://yourdomain.com/sitemap.xml
Monitor indexing status and search performance

Lighthouse Audits

Run Lighthouse in Chrome DevTools or CLI:

Terminal

npx lighthouse https://yourdomain.com --view

Target 90+ scores for Performance, Accessibility, Best Practices, and SEO.

Next Steps

Customization & Optimization - Customize SEO features
Next.js Metadata API - Complete reference

Configuration & Best Practices

Environment Variables

Sitemap Configuration

Robots.txt Configuration

Metadata Best Practices

Page Titles

Meta Descriptions

Open Graph Tags

Performance Best Practices

Image Optimization

Font Optimization

Content Best Practices

Heading Hierarchy

Alt Text

Monitoring SEO

Google Search Console

Lighthouse Audits

Next Steps

On this page

Configuration & Best Practices

Environment Variables

Sitemap Configuration

Robots.txt Configuration

Metadata Best Practices

Page Titles

Meta Descriptions

Open Graph Tags

Performance Best Practices

Image Optimization

Font Optimization

Content Best Practices

Heading Hierarchy

Alt Text

Monitoring SEO

Google Search Console

Lighthouse Audits

Next Steps

On this page