What is Next.js metadata and SEO?
Why Interviewers Ask This
Foundational questions like this help interviewers calibrate the rest of the interview. A confident, accurate answer signals that you have solid Next.js basics — a prerequisite for any developer role.
Answer
Next.js App Router provides a Metadata API for setting page metadata (title, description, Open Graph tags, Twitter cards, etc.) in a type-safe way. Static metadata: export a metadata object from layout.tsx or page.tsx: export const metadata = { title: "My Blog", description: "A blog about web development", openGraph: { title: "My Blog", description: "...", images: [{ url: "/og-image.jpg" }] }, twitter: { card: "summary_large_image", creator: "@username" }, robots: { index: true, follow: true }, keywords: ["nextjs", "react", "web"] };. Dynamic metadata: export async function generateMetadata({ params }) { const post = await getPost(params.id); return { title: post.title, description: post.excerpt, openGraph: { images: [post.coverImage] } }; }. Metadata inheritance: child pages inherit metadata from parent layouts and can override specific fields. Title template: export const metadata = { title: { template: "%s | My Site", default: "My Site" } }; — child pages set title: "About" → "About | My Site". Pages Router: use next/head: <Head><title>Page Title</title><meta name="description" content="..." /></Head>. Viewport, robots.txt, sitemap: App Router has built-in file conventions (app/robots.ts, app/sitemap.ts) that export functions generating these files.
Pro Tip
This topic has Next.js-specific nuances that differ from general programming. Highlighting those nuances in your answer shows expertise rather than generic knowledge.