Configuration & Best Practices
Configure SEO settings and follow best practices for optimal search engine visibility.
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:
SITE_URL="https://yourdomain.com"
NEXT_PUBLIC_SITE_URL="https://yourdomain.com"SITE_URL: Used bynext-sitemapfor 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:
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:
npm run buildThis creates public/sitemap.xml and public/robots.txt.
Robots.txt Configuration
Customize robots.txt in 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
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
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
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:
import Image from 'next/image';
<Image
src="/hero.jpg"
alt="Hero image"
width={1200}
height={600}
priority // For above-the-fold images
/>Font Optimization
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:
<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:
<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:
npx lighthouse https://yourdomain.com --viewTarget 90+ scores for Performance, Accessibility, Best Practices, and SEO.
Next Steps
- Customization & Optimization - Customize SEO features
- Next.js Metadata API - Complete reference
How is this guide ?
Last updated on