Next.js Metadata & SEO
Metadata API, OpenGraph, Twitter cards, sitemap, robots.txt, JSON-LD schema
1What is the recommended method to define metadata in Next.js App Router?
What is the recommended method to define metadata in Next.js App Router?
Answer
Next.js App Router introduces the `metadata` object exported from layouts and pages to define metadata in a type-safe and optimized way. This approach replaces `<Head>` components from Next.js 12 and enables server-side rendering of metadata. The `metadata` export is static and analyzed at build time for better SEO performance.
2How to generate dynamic metadata based on route parameters in Next.js?
How to generate dynamic metadata based on route parameters in Next.js?
Answer
The `generateMetadata` function is async and receives `params` and `searchParams` as arguments, enabling data loading to build metadata dynamically. It runs server-side at render time and can make API calls. This allows creating unique metadata for each dynamic page, essential for detail page SEO.
3How does Next.js handle metadata merging between nested layouts and pages?
How does Next.js handle metadata merging between nested layouts and pages?
Answer
Next.js automatically merges metadata from parent layouts to child pages, with priority to values closest to the page. Fields are overridden (title, description) except `openGraph.images` and `twitter.images` which are merged as arrays. This cascade allows defining default metadata at root level and overriding at page level.
What is the benefit of using `title.template` in Next.js metadata?
What is the recommended method to define favicons in Next.js App Router?
+15 interview questions
Other React / Next.js interview topics
JavaScript Essentials
React Fundamentals
React Hooks
Component Lifecycle
React Router
State Management with Context
Forms & Controlled Components
Data Fetching & API
React Query (TanStack Query)
Styling & CSS-in-JS
Next.js Fundamentals
TypeScript with React
Next.js Data Fetching
Next.js Server Actions
Next.js Routing & Navigation
Next.js API Routes
Next.js Middleware & Auth
React Testing
Zustand State Management
React Performance Optimization
Error Boundaries & Error Handling
Advanced React Patterns
Next.js Advanced Features
Next.js Deployment & Production
Architecture & Design Patterns
React Server Components
Next.js Internationalization
React Security & Best Practices
Master React / Next.js for your next interview
Access all questions, flashcards, technical tests, code review exercises and interview simulators.
Start for free