The Complete Next.js SEO Guide
Next.js App Router changed how metadata works. Static exports, generateMetadata, and file-based conventions replaced the old Head component. This guide covers everything you need to ship SEO-correct Next.js apps.
Metadata in the App Router
Next.js 13+ App Router uses a metadata API that replaces the legacy next/head approach. You export a static metadata object or a generateMetadata() function from any page or layout file. Metadata merges down the component tree — a layout sets defaults, and pages override specific fields.
The metadata export supports title, description, openGraph, twitter, robots, alternates, and more. The title field accepts a template pattern so your brand name appends automatically. This is the foundation of on-page SEO in Next.js.
Indxel validates that every page has a title under 60 characters, a description between 50 and 160 characters, and that Open Graph fields match their HTML equivalents. Run npx indxel check to audit your entire site in 30 seconds.
Structured Data with JSON-LD
Search engines use JSON-LD structured data to understand your content and display rich results. In Next.js, embed JSON-LD in a script tag with type application/ld+json. Place it in your page component or layout.
Common schema types for developer tools include SoftwareApplication, FAQPage, HowTo, BreadcrumbList, and Article. Each type has required and recommended properties that determine eligibility for specific SERP features.
Indxel provides type-safe helpers like getBreadcrumbSchema() and getFAQSchema() that generate valid JSON-LD. The CLI validates your structured data against schema.org specifications during CI checks, catching errors before they reach production.
Sitemaps and Robots
Next.js generates sitemaps via app/sitemap.ts and robots.txt via app/robots.ts. Both are file-based conventions that output at build time. Your sitemap should include all canonical, indexable URLs with accurate lastmod dates.
For large sites, use a sitemap index that references multiple sitemap files. Keep each sitemap under 50,000 URLs. Reference your sitemap in robots.txt so crawlers discover it immediately.
Indxel validates that your sitemap exists, all URLs return 200, and no indexed pages are missing from the sitemap. It also checks that robots.txt does not accidentally block important pages.
Image Optimization and OG Images
Next.js provides the Image component with automatic optimization, lazy loading, and responsive sizing. Every image should have descriptive alt text for accessibility and SEO. Use modern formats like WebP or AVIF for smaller file sizes.
For Open Graph images, use the file-based opengraph-image.tsx convention to generate dynamic OG images at build time. The recommended size is 1200x630 pixels. Each page should have a unique OG image that visually represents its content.
Indxel checks that all images have alt text, OG images are the correct dimensions, and that og:image URLs resolve correctly. Missing or broken OG images mean your social shares look generic.
Performance and Core Web Vitals
SEO and performance are inseparable. Google uses Core Web Vitals (LCP, INP, CLS) as ranking signals. Next.js helps with automatic code splitting, font optimization, and image optimization, but you still need to monitor real-world metrics.
Preload critical resources, minimize JavaScript bundles, and avoid layout shifts from dynamic content. Use the next/font module to eliminate font-related layout shifts. Server Components reduce client-side JavaScript by default.
Measure with PageSpeed Insights for field data and Lighthouse for lab data. Focus on field data — that is what Google uses for ranking. Indxel integrates performance checks into your CI pipeline so regressions are caught before deploy.
Frequently asked questions
Does Next.js App Router handle SEO automatically?
Next.js provides the tools — metadata API, sitemaps, robots.txt — but you still need to configure them correctly. Missing descriptions, duplicate titles, and broken OG images are common. Indxel catches these issues automatically.
How do I add meta tags in Next.js App Router?
Export a metadata object or generateMetadata() function from your page.tsx or layout.tsx. The metadata API supports title, description, openGraph, twitter, robots, and alternates fields.
Should I use generateMetadata or static metadata?
Use static metadata for pages with fixed content. Use generateMetadata() when metadata depends on dynamic data like URL params, database queries, or external APIs. Both merge with parent layout metadata.
How does Indxel help with Next.js SEO?
Indxel validates 15+ SEO rules across your Next.js site: title length, meta descriptions, OG tags, structured data, canonical URLs, and more. It runs in your terminal and integrates with CI/CD to block deploys with broken SEO.
Related guides
Next.js SEO Checklist 2026
A checklist you can run through before every deploy. Covers the metadata, structured data, performance, and indexation checks that matter for Next.js App Router projects. No fluff — just the items that affect rankings.
Next.js SEO Meta Tags
Meta tags are the foundation of on-page SEO. Next.js App Router replaces the old Head component with a typed metadata API that merges across layouts and pages. Here is how to use it correctly.
Next.js SEO Optimization
Performance is SEO. Google uses Core Web Vitals as ranking signals, and Next.js gives you the primitives to hit every target. This guide covers the optimization techniques that directly impact search rankings.