SEO & Metadata

Interview Questions: Metadata API, Sitemaps, and Open Graph

Q1: How do you define Metadata in the App Router?

Static Metadata: Export a metadata object from a layout.js or page.js file.

export const metadata = {
  title: 'My Page',
  description: 'This is a description',
}

Dynamic Metadata: Export a generateMetadata function.

export async function generateMetadata({ params }) {
  const product = await getProduct(params.id)
  return {
    title: product.name,
  }
}

Q2: How does Metadata merging work?

Metadata is evaluated in order from the root layout down to the page.

  • Inheritance: A page inherits metadata from its parent layout.
  • Overriding: If a page defines a property (e.g., title), it overrides the value from the layout.
  • Templates: You can define a title.template in the root layout (e.g., %s | Acme Corp) so child pages only need to provide the specific title part.

Q3: How do you generate a Sitemap and Robots.txt?

Next.js supports special file conventions in the app/ directory:

  • sitemap.js (or .ts): Export a default function that returns an array of URLs.
  • robots.js (or .ts): Export a default function that returns the robots configuration object.

These files are automatically converted into sitemap.xml and robots.txt at build time (or request time if dynamic).