Next.js SEO architecture for organic growth
Next.js is built for SEO. This guide shows you how to leverage its built-in features to create fast, search-friendly applications that rank well and convert visitors into users.
Six essential Next.js SEO features
Metadata API
Use Next.js Metadata API for all SEO tags
export const metadata: Metadata = {...}Benefit: Type-safe, server-rendered metadata on every page
Static Generation
Pre-render pages at build time for instant loading
export default function Page() {...}Benefit: Fastest possible page loads, perfect for SEO
Dynamic Sitemap
Generate sitemap from your routes automatically
app/sitemap.tsBenefit: Always up-to-date sitemap without manual updates
Image Optimization
Use Next.js Image component for automatic optimization
<Image src="..." alt="..." />Benefit: Faster LCP, proper sizing, modern formats
Structured Data
Add JSON-LD for rich search results
<script type="application/ld+json">Benefit: Better visibility in search results
Robots.txt
Control crawler access to your site
app/robots.tsBenefit: Prevent indexing of admin/private pages
Copy-paste ready code
Metadata API Implementation
// app/page.tsx
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Your Page Title — Brand Name',
description: 'Compelling description 150-160 characters that includes target keywords and value proposition.',
openGraph: {
title: 'Your Page Title',
description: 'Description for social sharing',
url: 'https://yoursite.com/page',
siteName: 'Your Site Name',
type: 'website',
},
twitter: {
card: 'summary_large_image',
title: 'Your Page Title',
description: 'Description for Twitter',
},
alternates: {
canonical: 'https://yoursite.com/page',
},
}Dynamic Sitemap
// app/sitemap.ts
import { MetadataRoute } from 'next'
export default function sitemap(): MetadataRoute.Sitemap {
return [
{
url: 'https://yoursite.com',
lastModified: new Date(),
changeFrequency: 'weekly',
priority: 1,
},
{
url: 'https://yoursite.com/about',
lastModified: new Date(),
changeFrequency: 'monthly',
priority: 0.8,
},
// Add all your routes
]
}Robots.txt Configuration
// app/robots.ts
import { MetadataRoute } from 'next'
export default function robots(): MetadataRoute.Robots {
return {
rules: {
userAgent: '*',
allow: '/',
disallow: '/admin/',
},
sitemap: 'https://yoursite.com/sitemap.xml',
}
}Structured Data (JSON-LD)
// components/StructuredData.tsx
export function OrganizationSchema() {
const schema = {
"@context": "https://schema.org",
"@type": "Organization",
"name": "Your Company",
"url": "https://yoursite.com",
"logo": "https://yoursite.com/logo.png",
"description": "Company description",
"sameAs": [
"https://twitter.com/yourcompany",
"https://linkedin.com/company/yourcompany"
]
}
return (
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
/>
)
}Optimize Core Web Vitals
Core Web Vitals are ranking factors. Next.js provides tools to optimize each metric. Here is how to hit the targets.
LCP (Largest Contentful Paint)
- •Use Next.js Image component for hero images
- •Preload critical resources with <link rel="preload">
- •Server-side render above-the-fold content
- •Use static generation when possible
FID (First Input Delay)
- •Minimize JavaScript bundle size
- •Use code splitting and dynamic imports
- •Defer non-critical JavaScript
- •Avoid long tasks that block main thread
CLS (Cumulative Layout Shift)
- •Always specify image dimensions
- •Reserve space for dynamic content
- •Avoid inserting content above existing content
- •Use CSS aspect-ratio for responsive images
Next.js SEO checklist
Use this checklist to ensure your Next.js application is fully optimized for search engines.
Get Expert Implementation- Metadata API used for all pages
- Unique title and description per page
- OpenGraph and Twitter Card metadata
- Dynamic sitemap.ts generated
- Robots.txt properly configured
- Structured data (JSON-LD) for relevant pages
- Next.js Image component used throughout
- Static generation for all possible pages
- Dynamic routes with generateStaticParams
- Internal linking between related pages
- Proper heading hierarchy (single H1)
- Alt text on all images
- Core Web Vitals passing (LCP, FID, CLS)
- Mobile responsive and tested
- HTTPS enabled
Next.js SEO questions answered
Should I use App Router or Pages Router for SEO?
App Router (Next.js 13+) is better for SEO. It has a cleaner Metadata API, better streaming support, and automatic static optimization. Plus, it is the future direction of Next.js. Start new projects with App Router.
How do I handle dynamic routes for SEO in Next.js?
Use generateStaticParams to pre-render dynamic routes at build time. This gives you static pages for SEO while maintaining dynamic routing. For truly dynamic content, use revalidate to control when pages are regenerated.
Do I need Server-Side Rendering for SEO?
Not always. Static generation is actually better for SEO because pages load instantly. Use SSR only when you need real-time data that cannot be cached. Most marketing pages should use static generation.
How do I add structured data in Next.js?
Create a component that renders a <script type="application/ld+json"> tag with your JSON-LD data. Include it in your page or layout. Use schema.org types that match your content (Organization, Article, Product, etc.).
Can Next.js handle large sitemaps?
Yes. Generate your sitemap.ts dynamically from your database or CMS. For very large sites (10k+ pages), consider splitting into multiple sitemaps with a sitemap index. Next.js handles this efficiently.
How do I optimize Core Web Vitals in Next.js?
Use the Image component, static generation, font optimization, and proper lazy loading. Next.js handles most optimizations automatically if you use its built-in components. Monitor with Google PageSpeed Insights.
Need help building SEO-optimized Next.js apps?
We specialize in building Next.js applications with SEO-first architecture. Get expert implementation through our AI Growth Sprint.
Book Growth Sprint