Next.js SEO checklist
Next.js App Router has first-class SEO primitives. Most developers use less than half of them. This checklist covers every metadata API, static generation pattern, and structured data integration available in Next.js 14+.
Critical
— 5 itemsUse the Next.js Metadata API. Export a metadata object or generateMetadata() function from page.tsx and layout.tsx. This replaces <Head> from Pages Router.
Pages like /blog/[slug] need generateMetadata() to fetch data and set unique titles and descriptions per page. Static metadata objects cannot handle dynamic content.
Create a sitemap.ts file in your app directory
Export a default function from app/sitemap.ts that returns MetadataRoute.Sitemap. Include all public pages with proper lastModified dates and priorities.
Include canonical URLs in your metadata export. For dynamic routes, build the canonical from the slug parameter. Prevents duplicate content from query params or trailing slashes.
Validate all metadata with Indxel
Run npx indxel check on your Next.js project. It scans all routes, validates metadata exports, and catches missing titles, descriptions, and OG tags before deploy.
Important
— 6 itemsImplement generateStaticParams() for SSG
Pre-render dynamic routes at build time. This improves performance and ensures search engines can crawl all pages without JavaScript execution.
Export a default function from app/robots.ts. Allow all crawlers on production, block specific paths like /api/ and /dashboard/. Reference your sitemap URL.
Create opengraph-image.tsx files in route directories. Use next/og ImageResponse to generate dynamic OG images at build time. No external service needed.
Inject JSON-LD in your pages using <script type="application/ld+json">. Add Organization on the homepage, Article on blog posts, FAQPage on FAQ sections.
Configure the title template in root layout
Set title: { default: 'Site Name', template: '%s | Site Name' } in your root layout metadata. Child pages inherit the template automatically.
Optimize images with next/image
Use the Image component for automatic WebP/AVIF conversion, lazy loading, and responsive sizing. Set explicit width and height to prevent layout shifts.
Nice-to-have
— 1 itemAdd loading.tsx for instant perceived performance
Create loading.tsx files in route directories. They show immediately while the page loads, reducing Largest Contentful Paint and improving Core Web Vitals scores.
Frequently asked questions
Does Next.js App Router handle SEO automatically?
No. Next.js provides the APIs (metadata exports, sitemap.ts, robots.ts, ImageResponse), but you must implement them correctly on every route. Indxel validates that you did.
Should I use static or dynamic metadata?
Use static metadata (export const metadata) for pages with fixed content like /about or /pricing. Use generateMetadata() for dynamic routes like /blog/[slug] where the title depends on data.
How do I handle SEO for client components in Next.js?
You cannot export metadata from client components. Keep your page.tsx as a server component and export metadata there. Client interactivity goes in child components marked with 'use client'.
Automate this checklist
Stop checking manually. Indxel validates SEO rules on every build and blocks broken deploys.