Next.js SEO Best Practices 2026: The Complete Playbook for App Router
The 2026 Next.js SEO playbook for App Router: metadata API, generateMetadata, OG images, sitemaps, robots, structured data, ISR, Core Web Vitals, llms.txt, and the patterns that put Next.js sites at the top of Google and AI citations.
Next.js is the most SEO-friendly framework in 2026, and App Router made it even better. With the metadata API, server components, ISR, and the new OG image generation, you can ship a fully optimized site in days, not weeks. We have built 40+ Next.js sites over 5 years. This is the playbook: the metadata API, OG image generation, sitemaps, robots, structured data, rendering strategy, Core Web Vitals, and the GEO layer (llms.txt, AI bot directives) that gets Next.js sites cited by AI engines.
01Metadata API: title, description, OG, Twitter
The metadata API is the foundation. Use generateMetadata in every page, blog post, and dynamic route. Pattern: export async function generateMetadata({ params }): Promise<Metadata> { return { title, description, alternates, openGraph, twitter, robots } }. Title pattern: Primary Keyword - Secondary Keyword | Brand Name (50-60 chars). Description pattern: 150-160 chars, action-oriented, includes the keyword and a benefit. Open Graph: og:title, og:description, og:image (1200x630), og:url, og:type, og:site_name. Twitter card: summary_large_image. Alternates: canonical URL, hreflang for multi-language. Robots: index, follow, max-image-preview:large, max-snippet:-1. Use a site config (lib/site-config.ts) for consistent brand name, logo URL, and social handles.
02Open Graph image generation
OG images are the single highest-leverage social sharing element. With @vercel/og or next/og, generate dynamic OG images at the edge: app/blog/[slug]/opengraph-image.tsx. The pattern: import { ImageResponse } from next/og; export const runtime = edge; export const alt = ...; export const size = { width: 1200, height: 630 }; export const contentType = image/png; export default async function Image() { return new ImageResponse(<div>...</div>); }. Include the title (large, sans-serif), the brand logo, and a brand color background. Test in Facebook Sharing Debugger, Twitter Card Validator, and LinkedIn Post Inspector. A great OG image can 2-3x social CTR.
03Sitemaps and robots
Use the App Router sitemap and robots conventions. app/sitemap.ts: export default async function sitemap() { return [{ url, lastModified, changeFrequency, priority }, ...] }. Pull URLs from your CMS, database, or filesystem. Add the main sitemap + sub-sitemaps (news, images, index of sitemaps) for large sites. Submit to Google Search Console and Bing Webmaster Tools. app/robots.ts: export default function robots() { return { rules: { userAgent: *, allow: /, disallow: [/admin, /api] }, sitemap: https://.../sitemap.xml }. Add AI bot directives: allow OAI-SearchBot, PerplexityBot, ClaudeBot, Google-Extended, Applebot-Extended. The /llms.txt manifest goes in public/llms.txt.
04Structured data with JSON-LD
JSON-LD structured data is non-negotiable. Create a lib/structured-data.ts with generators for Organization, Person, WebSite, BreadcrumbList, Article, BlogPosting, FAQ, HowTo, Product, Offer, Service, LocalBusiness, SoftwareApplication, Course, Review, ItemList, Speakable. Inject via a <JsonLd> component in the page. Use the schema @id graph pattern to link entities (Organization @id to founder Person @id to knowsAbout to Service @id). Validate with Schema.org Validator and Rich Results Test. Monitor in Google Search Console Enhancements. The 2026 standard: every page emits at least one schema type, and a self-referential @id graph ties the site together as an entity network.
05Rendering strategy: SSR, SSG, ISR
App Router defaults to server components (SSR/SSG). Choose the right strategy per page. (1) Static (SSG) - for content that rarely changes (marketing pages, docs, blog). Default. Fast, cacheable, lowest cost. (2) ISR (Incremental Static Regeneration) - for content that changes occasionally (blog, products). Use revalidate: 3600 to rebuild hourly. (3) Dynamic (SSR) - for content that changes on every request (user dashboards, real-time data, A/B tested pages). Mark with force-dynamic or use cookies/headers to opt in. (4) Streaming - for slow data sources, use Suspense to stream UI progressively. The pattern: 80% SSG, 15% ISR, 5% dynamic for a typical SaaS marketing site. Pure SSR is rarely needed and slows TTFB.
06Core Web Vitals optimization
Next.js 16 + App Router gets you most of the way. To hit 95+ Lighthouse. (1) LCP - preload the hero image, use next/image with priority, set width/height, use AVIF/WebP. (2) INP - minimize client components, defer non-critical JS, use Server Actions for forms, use the new useFormStatus and useOptimistic hooks. (3) CLS - always set image dimensions, reserve space for ads, use font-display: swap with a fallback metric, avoid layout shift from lazy components. (4) Bundle size - use dynamic imports, code split, audit with @next/bundle-analyzer. (5) Third-party - defer analytics, load chat widgets on idle. (6) Edge - deploy to Vercel Edge or Cloudflare for global TTFB under 100ms. The result: 95-100 Lighthouse, sub-1s LCP, top-quartile SEO.
07GEO layer: llms.txt, AI bot directives
The GEO layer on top of SEO. (1) /llms.txt and /llms-full.txt - place in public/, comprehensive, plain text, no JS rendering. (2) AI bot directives in robots.ts - allow OAI-SearchBot, PerplexityBot, ClaudeBot, Google-Extended, Applebot-Extended. Block GPTBot, CCBot, Meta-ExternalAgent (training only). (3) Schema markup with @id graph - every entity linked, ready for LLM ingestion. (4) Author byline with Person schema - sameAs to social profiles, knowsAbout, alumniOf, award. (5) Content with statistical specificity - numbers, dates, named entities in the first 60 words. (6) Original research - unique data that LLMs cite. (7) FAQ schema on key pages - high citation probability. (8) Speakable schema on hero sections - for voice and AI narration. (9) SameAs links to all your profiles - Wikipedia, Wikidata, Crunchbase, LinkedIn, GitHub, Twitter. (10) Submit the site to the LLM training pipelines (where possible) and the major AI search engines.
Frequently asked questions
Web Development — quick answers
- 01Is Next.js good for SEO?
- Yes - Next.js is the most SEO-friendly framework in 2026. Server components, ISR, the metadata API, the OG image generation, native sitemaps and robots, and the App Router performance make it the default for SEO-critical sites. We have shipped 40+ Next.js sites with 95+ Lighthouse scores and top 3 Google rankings in competitive categories.
- 02How do I add SEO to a Next.js app?
- Use the App Router metadata API: export async function generateMetadata({ params }) { return { title, description, alternates, openGraph, twitter, robots } }. Add JSON-LD structured data via a <JsonLd> component. Add app/sitemap.ts and app/robots.ts. Add @vercel/og for OG images. Add public/llms.txt and public/llms-full.txt. Add AI bot directives in robots.ts. Validate with Lighthouse, Schema.org Validator, and Google Rich Results Test.
- 03What is the difference between SSG, ISR, and SSR in Next.js?
- SSG (Static Site Generation) generates HTML at build time - fastest, cheapest, best for content that rarely changes. ISR (Incremental Static Regeneration) generates HTML at build time and rebuilds in the background at a set interval (revalidate: 3600 = hourly) - best for blogs, products, content that changes occasionally. SSR (Server-Side Rendering) generates HTML on every request - slowest, most expensive, best for user dashboards, real-time data, and A/B tested pages. Use SSG for 80% of pages, ISR for 15%, SSR for 5%.
- 04What is the best hosting for Next.js SEO?
- Vercel (built by the Next.js team) is the gold standard - edge network, image optimization, analytics, ISR support, zero-config. Cloudflare Pages + Workers is a strong alternative - better pricing at scale, edge-first, full control. AWS Amplify, Netlify, and Render are also viable. We default to Vercel for most clients and migrate to Cloudflare when traffic justifies the cost optimization (typically above 10M requests/month).
- 05How do I optimize a Next.js site for Core Web Vitals?
- Six patterns: (1) LCP - preload hero image, use next/image with priority, set dimensions, use AVIF/WebP, (2) INP - minimize client components, defer non-critical JS, use Server Actions, (3) CLS - always set image dimensions, reserve space for ads, use font-display: swap, (4) bundle size - use dynamic imports, code split, audit with @next/bundle-analyzer, (5) third-party - defer analytics, load chat on idle, (6) edge - deploy to Vercel Edge or Cloudflare for sub-100ms TTFB. Target: 95+ Lighthouse, sub-1s LCP, INP under 200ms, CLS under 0.05.