Next.js SEO Guide 2026: Metadata, Schema and Performance in the App Router
Next.js SEO Guide 2026: Metadata, Schema and Performance in the App Router
What is Next.js App Router SEO? Next.js App Router SEO uses thegenerateMetadataAPI, file-basedsitemap.tsandrobots.ts, JSON-LD schema components and ISR to give every page crawlable, accurate metadata without client-side JavaScript. The result is faster indexing, richer search results and a clear path to Lighthouse 100. Free Consultation →
Next.js 15 App Router shipped with a completely new metadata system. If you are still copying <Head> tags from the Pages Router, you are missing performance gains, risking duplicate meta tags and leaving structured data on the table. This guide walks through every SEO layer — from generateMetadata to Core Web Vitals — so your Next.js site ranks the way it should.
Table of Contents
- Why App Router SEO Is Different
- generateMetadata API Deep Dive
- Dynamic OG Images
- JSON-LD Schema Components
- sitemap.ts and robots.ts
- Hreflang for Multilingual Sites
- ISR and Crawl Freshness
- Core Web Vitals Optimization
- Metadata API: Pages Router vs App Router Comparison
- Step-by-Step SEO Setup Guide
- Frequently Asked Questions
- Conclusion
Why App Router SEO Is Different {#why-different}
The Pages Router relied on next/head — a client-side component that injected tags after hydration. This created a race condition where Googlebot might index a page before the correct title and description were injected. The App Router eliminates this entirely. Metadata is generated server-side, exported as a static or dynamic object, and rendered in the initial HTML response.
This matters because Google processes metadata it finds in the initial HTML faster and more reliably than metadata added by JavaScript. Every millisecond you save Googlebot is a crawl budget credit you can spend on more pages. Our technical SEO services focus heavily on this infrastructure layer because it compounds across every page on your site.
generateMetadata API Deep Dive {#generate-metadata}
The generateMetadata function is the core of App Router SEO. It runs on the server, has access to route params and fetched data, and returns a typed Metadata object.
```typescript // app/blog/[slug]/page.tsx import type { Metadata } from "next";
export async function generateMetadata( { params }: { params: { slug: string } } ): Promise<Metadata> { const post = await getPost(params.slug); return { title: post.title, description: post.description, alternates: { canonical: https://example.com/blog/${params.slug}, }, openGraph: { title: post.title, description: post.description, type: "article", publishedTime: post.publishedAt, authors: [post.author.name], }, }; } ```
Key points: generateMetadata can fetch data with the same caching semantics as your page — Next.js deduplicates requests automatically. Always set alternates.canonical to prevent duplicate content penalties on paginated or filtered pages.
Base Metadata in layout.tsx
Define site-wide defaults in your root layout.tsx using the metadataBase property. This resolves relative URLs in OG images and canonical tags.
``typescript export const metadata: Metadata = { metadataBase: new URL("https://example.com"), title: { template: "%s | Your Brand", default: "Your Brand — Tagline", }, description: "Default site description", }; ``
The template property appends your brand name to every page title automatically — no manual concatenation needed.
Dynamic OG Images {#og-images}
Open Graph images drive click-through rates from social shares and Google Discover. Next.js ships a built-in ImageResponse API that generates OG images at the edge using JSX.
Create app/blog/[slug]/opengraph-image.tsx:
```typescript import { ImageResponse } from "next/og";
export const size = { width: 1200, height: 630 }; export const contentType = "image/png";
export default async function OGImage({ params }: { params: { slug: string } }) { const post = await getPost(params.slug); return new ImageResponse( <div style={{ display: "flex", background: "#0f172a", width: "100%", height: "100%" }}> <h1 style={{ color: "white", fontSize: 48 }}>{post.title}</h1> </div> ); } ```
This approach scales: no manual image creation, no broken OG tags when titles change, and edge rendering keeps latency low.
JSON-LD Schema Components {#json-ld}
JSON-LD is Google's preferred format for structured data. In the App Router, create a reusable server component that injects a <script type="application/ld+json"> tag.
``typescript // components/JsonLd.tsx export function JsonLd({ data }: { data: object }) { return ( <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} /> ); } ``
Then compose schema objects per page type. For blog posts:
``typescript const articleSchema = { "@context": "https://schema.org", "@type": "Article", headline: post.title, author: { "@type": "Person", name: post.author.name }, datePublished: post.publishedAt, dateModified: post.updatedAt, image: post.image, publisher: { "@type": "Organization", name: "Modern Web SEO", logo: { "@type": "ImageObject", url: "https://modernwebseo.com/logo.png" }, }, }; ``
Schema Types and When to Use Them
| Schema Type | Page Type | Rich Result |
|---|---|---|
| Article | Blog posts | Author, date in search |
| FAQPage | FAQ sections | Expandable Q&A in SERP |
| BreadcrumbList | All pages | Breadcrumb trail in SERP |
| Organization | Homepage | Knowledge panel data |
| LocalBusiness | Contact/About | Map pack, business hours |
| Product | E-commerce product | Price, availability, reviews |
| HowTo | Tutorial pages | Step-by-step rich result |
Our web design services implement all applicable schema types during initial build — not as an afterthought.
sitemap.ts and robots.ts {#sitemap-robots}
Dynamic Sitemap
Replace static sitemap.xml with a TypeScript file that generates entries from your CMS or data layer:
```typescript // app/sitemap.ts import type { MetadataRoute } from "next"; import { getAllPosts } from "@/lib/posts";
export default async function sitemap(): Promise<MetadataRoute.Sitemap> { const posts = await getAllPosts(); const postEntries = posts.map((post) => ({ url: https://example.com/blog/${post.slug}, lastModified: post.updatedAt, changeFrequency: "weekly" as const, priority: 0.7, })); return [ { url: "https://example.com", priority: 1, changeFrequency: "daily" }, { url: "https://example.com/blog", priority: 0.8, changeFrequency: "daily" }, ...postEntries, ]; } ```
robots.ts
```typescript // app/robots.ts import type { MetadataRoute } from "next";
export default function robots(): MetadataRoute.Robots { return { rules: { userAgent: "*", allow: "/", disallow: ["/admin/", "/api/"] }, sitemap: "https://example.com/sitemap.xml", }; } ```
Both files are statically generated at build time by default. Set export const dynamic = "force-dynamic" if your content updates frequently and you need fresh sitemap entries without redeployment.
Hreflang for Multilingual Sites {#hreflang}
For sites serving multiple languages, hreflang tells Google which page version to show in which country. The App Router handles this through the alternates metadata key:
``typescript alternates: { canonical: "https://example.com/en/blog/post-slug", languages: { "en": "https://example.com/en/blog/post-slug", "tr": "https://example.com/tr/blog/post-slug", "x-default": "https://example.com/en/blog/post-slug", }, }, ``
Always include x-default to handle users whose browser language does not match any specific locale. Our Istanbul-based team manages TR/EN hreflang configurations daily — contact us through our contact page if you need multilingual SEO setup.
ISR and Crawl Freshness {#isr}
Incremental Static Regeneration (ISR) gives you static performance with dynamic content. Set a revalidate export to control how often Next.js regenerates a page:
``typescript // app/blog/[slug]/page.tsx export const revalidate = 3600; // Regenerate at most once per hour ``
For SEO, ISR means Googlebot sees a cached HTML page (fast, fully rendered) while your content stays reasonably fresh. Use shorter revalidation windows for news or product pages; longer windows for evergreen content.
generateStaticParams works alongside ISR to pre-render known routes at build time while still handling new slugs on demand:
``typescript export async function generateStaticParams() { const posts = await getAllPosts(); return posts.map((post) => ({ slug: post.slug })); } ``
Core Web Vitals Optimization {#cwv}
Passing Core Web Vitals in a Next.js App Router project requires attention at both the framework and application layers.
LCP Optimization
Next.js <Image> component handles format conversion, lazy loading and size optimization automatically. For your hero image (the likely LCP element), add priority prop:
``tsx <Image src="/hero.webp" alt="Hero" width={1200} height={600} priority /> ``
This injects a <link rel="preload"> tag, telling the browser to fetch the image before the render-blocking CSS has finished.
INP Optimization
Large JavaScript bundles are the primary INP culprit in Next.js. Use dynamic imports with next/dynamic to split non-critical components:
``typescript const HeavyChart = dynamic(() => import("@/components/HeavyChart"), { ssr: false, loading: () => <div>Loading chart...</div>, }); ``
CLS Optimization
Always provide width and height props on <Image> — this reserves space before the image loads. For fonts, use next/font which handles font-display: swap and self-hosting automatically.
| CWV Metric | Target | Key Next.js Technique |
|---|---|---|
| LCP | < 2.5s | Image priority, CDN, preload |
| INP | < 200ms | Dynamic imports, Server Components |
| CLS | < 0.1 | Image dimensions, next/font |
Our SEO consulting service includes a Lighthouse audit and Core Web Vitals remediation plan as a standard deliverable.
Metadata API: Pages Router vs App Router Comparison {#comparison-table}
| Feature | Pages Router | App Router |
|---|---|---|
| Metadata method | next/head (client) | generateMetadata (server) |
| Dynamic metadata | Manual fetch + state | Async function, typed |
| OG image generation | External service or manual | Built-in ImageResponse |
| Sitemap | Static XML file | sitemap.ts (typed, dynamic) |
| Robots | Static robots.txt | robots.ts (typed) |
| Hreflang | Manual <link> tags | alternates.languages |
| Schema injection | dangerouslySetInnerHTML in _document | Server Component + JsonLd |
| Font optimization | Manual CSS | next/font (auto swap, self-host) |
| Race condition risk | Yes (client hydration delay) | No (server rendered) |
Step-by-Step SEO Setup Guide {#how-to}
Follow this sequence when building a new Next.js App Router project or migrating from the Pages Router.
Step 1: Configure metadataBase Add metadataBase and title template to app/layout.tsx. This is the foundation everything else builds on.
Step 2: Add generateMetadata to every dynamic route Blog posts, product pages and service pages each need unique titles, descriptions and canonical URLs. Use generateStaticParams alongside for static generation.
Step 3: Create sitemap.ts and robots.ts Generate your sitemap dynamically from your data source. Set appropriate changeFrequency and priority values per page type.
Step 4: Implement JSON-LD schema Create a reusable JsonLd server component. Add Article schema to blog posts, FAQPage schema to FAQ sections, Organization schema to the homepage and BreadcrumbList to all pages.
Step 5: Optimize for Core Web Vitals Add priority to hero images, audit your JavaScript bundle with @next/bundle-analyzer, switch to next/font and set explicit dimensions on all images.
Step 6: Configure hreflang if multilingual Add alternates.languages to every page's metadata. Test with Google Search Console's URL Inspection tool.
Step 7: Validate and monitor Run Google's Rich Results Test on key pages, submit your sitemap to Google Search Console, and set up Lighthouse CI in your deployment pipeline.
Get a free Next.js SEO audit from our team →
Frequently Asked Questions {#faq}
Does Next.js App Router support all Google structured data types? Yes. You can implement any Schema.org type using the JSON-LD server component pattern. Google's Rich Results Test validates all types including Product, Recipe, Event, HowTo and more. The App Router's server-side rendering ensures the schema is present in the initial HTML, not added after JavaScript execution.
How does generateMetadata handle missing data gracefully? Return fallback values when your data fetch fails. Use TypeScript's optional chaining and provide default strings for title and description. Never return undefined for required fields — this causes Next.js to fall back to parent layout metadata, which is rarely what you want for dynamic pages.
Should I use static or dynamic metadata for blog posts? Use generateMetadata (dynamic, async) when metadata depends on fetched data like post titles and descriptions. Use exported metadata objects (static) for fixed pages like contact or about. Static is marginally faster but dynamic is necessary for content-driven pages.
What is the correct way to handle canonical URLs for pagination? Set canonical to the first page URL for paginated series, or use self-referencing canonicals for each page if the content is sufficiently distinct. Add rel="next" and rel="prev" link tags in the <head> using the links metadata key for pagination signals.
How do I add BreadcrumbList schema to all pages efficiently? Create a Breadcrumbs server component that accepts a items prop and renders both the visible UI and a JsonLd component with BreadcrumbList schema. Include it in every page layout. This keeps the visual and structured data synchronized automatically.
Does ISR affect SEO negatively? No. Googlebot sees the cached static HTML, which is the fastest possible response. The revalidate period only controls how stale the cache can become before Next.js regenerates it in the background. For most content sites, a 1-hour revalidation window is a good balance between freshness and performance.
How do I verify my metadata is rendering server-side? Use curl -s https://yoursite.com/your-page | grep -i "og:title" or view the page source in your browser (Ctrl+U). If the meta tags appear in the HTML source without JavaScript execution, they are server-rendered. The Next.js App Router renders them server-side by default.
What bundle analyzer should I use for INP optimization? Install @next/bundle-analyzer and run ANALYZE=true next build. This opens an interactive treemap showing which modules contribute most to your JavaScript bundles. Look for large dependencies in your page chunks and replace them with dynamic imports or lighter alternatives.
Conclusion {#conclusion}
Next.js App Router gives you a powerful, typed, server-first SEO foundation. The generateMetadata API eliminates the race conditions of the Pages Router. File-based sitemap.ts and robots.ts keep your SEO configuration in version control. JSON-LD server components make structured data maintainable. And built-in image and font optimization removes the most common Core Web Vitals failures.
The investment in proper SEO infrastructure compounds over time — every new page you add inherits the metadata framework you build once.
Our team at Modern Web SEO builds Next.js sites with SEO-first architecture as the default. Explore our web design services, SEO consulting packages or portfolio to see the results.
