What is the Next.js Metadata API used for?

It's Next.js's built-in system for defining a page's content — title, description, Open Graph tags, and more — either via a static metadata object for fixed content or a generateMetadata function for dynamic, data-driven pages, replacing manual tag management.

When should I use generateMetadata instead of a static metadata object?

Use generateMetadata whenever a page's metadata should reflect that specific page's actual data — such as a blog post's real title or a product's real name and price — rather than a single, generic value shared across every page of that type.

How do I create a sitemap in Next.js?

Create an app/sitemap.ts file exporting a default function that returns an array of URL entries (each with at least a url and typically a lastModified date). Next.js automatically compiles this into a properly formatted sitemap.xml served at the conventional URL.

How do I create a robots.txt file in Next.js?

Create an app/robots.ts file exporting a default function that returns a rules object specifying which user agents are allowed or disallowed from which paths, optionally including a reference to your sitemap's URL. Next.js compiles this into a properly formatted robots.txt.

What is structured data (JSON-LD) and do I need it for basic SEO?

Structured data is machine-readable content, typically formatted as JSON-LD, describing a page's content using a standardized vocabulary (schema.org) that search engines understand. It's not strictly required for basic SEO, but it can unlock rich search result features (like star ratings or pricing shown directly in search listings) when implemented accurately for relevant content types.

Can metadata be inherited from a layout and overridden by a specific page?

Yes. Metadata defined in a layout applies to all nested pages within it by default, and a specific page can override individual fields (like its title) while still inheriting other unspecified fields from the layout above it.

Does adding structured data change what a visitor actually sees on the page?

No, structured data (typically embedded via a hidden tag) doesn't change the visible page content at all — it exists purely to give search engines additional, machine-readable context about that same visible content.

What happens if I disallow an important page in robots.txt by mistake?

Search engines will generally avoid crawling and indexing that disallowed path, which could prevent that page from appearing in search results at all — making careful, deliberate configuration of robots.txt rules important to avoid accidentally hiding content you actually want discovered.

Is a sitemap strictly necessary for a small website?

For a very small site with a handful of well-linked pages, search engines can often discover content through normal link-following alone. However, a sitemap remains a low-effort best practice and becomes increasingly valuable as a site grows larger or has pages with few internal links pointing to them.

What is the Next.js Metadata API used for?

It's Next.js's built-in system for defining a page's content — title, description, Open Graph tags, and more — either via a static metadata object for fixed content or a generateMetadata function for dynamic, data-driven pages, replacing manual tag management.

When should I use generateMetadata instead of a static metadata object?

Use generateMetadata whenever a page's metadata should reflect that specific page's actual data — such as a blog post's real title or a product's real name and price — rather than a single, generic value shared across every page of that type.

How do I create a sitemap in Next.js?

Create an app/sitemap.ts file exporting a default function that returns an array of URL entries (each with at least a url and typically a lastModified date). Next.js automatically compiles this into a properly formatted sitemap.xml served at the conventional URL.

How do I create a robots.txt file in Next.js?

Create an app/robots.ts file exporting a default function that returns a rules object specifying which user agents are allowed or disallowed from which paths, optionally including a reference to your sitemap's URL. Next.js compiles this into a properly formatted robots.txt.

What is structured data (JSON-LD) and do I need it for basic SEO?

Structured data is machine-readable content, typically formatted as JSON-LD, describing a page's content using a standardized vocabulary (schema.org) that search engines understand. It's not strictly required for basic SEO, but it can unlock rich search result features (like star ratings or pricing shown directly in search listings) when implemented accurately for relevant content types.

Can metadata be inherited from a layout and overridden by a specific page?

Yes. Metadata defined in a layout applies to all nested pages within it by default, and a specific page can override individual fields (like its title) while still inheriting other unspecified fields from the layout above it.

Does adding structured data change what a visitor actually sees on the page?

No, structured data (typically embedded via a hidden tag) doesn't change the visible page content at all — it exists purely to give search engines additional, machine-readable context about that same visible content.

What happens if I disallow an important page in robots.txt by mistake?

Search engines will generally avoid crawling and indexing that disallowed path, which could prevent that page from appearing in search results at all — making careful, deliberate configuration of robots.txt rules important to avoid accidentally hiding content you actually want discovered.

Is a sitemap strictly necessary for a small website?

For a very small site with a handful of well-linked pages, search engines can often discover content through normal link-following alone. However, a sitemap remains a low-effort best practice and becomes increasingly valuable as a site grows larger or has pages with few internal links pointing to them.

SEO in Next.js: Metadata API, Sitemaps & Robots.txt

Everything covered so far — rendering strategy, data fetching, image and font optimization — contributes to SEO indirectly, through speed and content completeness. This lesson covers the tools Next.js provides specifically and directly for SEO: a typed Metadata API for generating a page's title, description, and social-sharing tags; dynamic Open Graph tags that make individual pages (like blog posts or products) display rich, accurate previews when shared on social media; automatically generated sitemap.xml and robots.txt files that guide search engine crawlers; and structured data (JSON-LD) that helps search engines understand a page's content well enough to display rich results, like star ratings or recipe cook times, directly in search listings.

By the end of this lesson, you'll be able to configure comprehensive, correct SEO metadata for both static and dynamic pages using conventions built directly into the framework, rather than manually managing <head> tags yourself.

Learning Objectives

Use the Metadata API to define a page's title, description, and other meta tags.
Generate dynamic Open Graph tags for individual dynamic pages like blog posts.
Create a sitemap.xml file that lists a site's important URLs for search engines.
Configure a robots.txt file to control search engine crawler access.
Add structured data (JSON-LD) to a page to enable rich search result features.

Core Definitions

Metadata API: Next.js's built-in, typed system for defining a page's <head> content — title, description, Open Graph tags, and more — via an exported metadata object or generateMetadata function.
Open Graph tags: A set of meta tags (originally created by Facebook) that control how a page's title, description, and image appear when shared as a link on social media platforms.
generateMetadata: A function you export from a dynamic route's page file to compute metadata values (like a blog post's specific title) based on that page's actual data, rather than a fixed, static value.
sitemap.xml: A file listing a website's important URLs, helping search engines discover and understand the structure of a site's content more efficiently.
robots.txt: A file that gives instructions to search engine crawlers about which parts of a site they are allowed or disallowed from crawling.
Structured data (JSON-LD): Machine-readable data embedded in a page, following a standardized vocabulary (like schema.org), that helps search engines understand a page's content well enough to potentially display rich results.

Detailed Explanation

For pages with fixed, unchanging metadata — like a homepage or an About page — the Metadata API is as simple as exporting a metadata object directly from a page.tsx or layout.tsx file: `export const metadata = { title: 'About Us', description: '...' }`. Next.js automatically renders this into the correct <head> tags, with metadata from a layout applying to all its nested pages unless a more specific page overrides individual fields.

For dynamic pages whose metadata depends on data only known at request or build time — a blog post's actual title, or a product's actual name and price — you export an async generateMetadata function instead of a static object. This function receives the same params (and searchParams) your page component receives, letting you fetch the relevant data and return metadata computed specifically for that exact page: `export async function generateMetadata({ params }) { const post = await getPost(params.slug); return { title: post.title, description: post.excerpt }; }`. This is what makes it possible for every single blog post or product page on a large site to have its own accurate, unique title and description, rather than sharing one generic value across every page.

Open Graph tags are a specific, important subset of metadata controlling how a link appears when shared on social media or messaging apps — the preview card showing a title, description, and image. Within the Metadata API's returned object, an `openGraph` field lets you specify these values explicitly (title, description, images, and more), and for dynamic pages using generateMetadata, this means a shared blog post link can show that specific post's actual title and a relevant image, rather than a generic site-wide preview — a meaningful difference for content that gets shared and needs to look correct and enticing wherever it appears.

Beyond individual page metadata, two special files help search engines understand your site as a whole. A sitemap, generated via a sitemap.ts (or sitemap.xml) file exporting a function that returns an array of URL entries, gives search engines a direct, efficient list of your site's important pages, rather than relying entirely on discovering them by following links — especially valuable for large sites or pages with few internal links pointing to them. A robots.txt file, similarly generated via a robots.ts file, tells search engine crawlers which parts of your site they're allowed or disallowed from crawling — commonly used to prevent crawling of admin areas, user-account pages, or duplicate content paths that shouldn't appear in search results.

Finally, structured data (most commonly implemented as JSON-LD, a specific JSON-based format) is embedded directly in a page — typically via a <script type="application/ld+json"> tag — describing the page's content using a standardized vocabulary from schema.org. This doesn't change what a visitor sees on the page itself, but it gives search engines machine-readable context that can unlock rich search result features: a recipe page might show cook time and a star rating directly in Google's search results, or a product page might show price and availability, both driven entirely by correctly structured JSON-LD data rather than anything visible in the page's regular content.

Diagram Description

Visualize the four SEO layers working together for a single blog post page:

app/blog/[slug]/page.tsx
├── generateMetadata() → dynamic <title>, <meta description>, Open Graph tags SPECIFIC to this post
└── <script type="application/ld+json"> → structured data describing this post as an 'Article' (schema.org)

app/sitemap.ts → includes '/blog/this-post-slug' in the site's full URL list for crawlers
app/robots.ts → allows crawling of '/blog/*' but disallows '/admin/*'

Result when shared/searched:
Social media preview: correct title, description, image (from Open Graph)
Google search result: potentially a rich snippet (from JSON-LD structured data)
Discoverability: found and indexed efficiently (from sitemap.xml + robots.txt)

Comparison Table

SEO Tool	File / Mechanism	Purpose
Static metadata	export const metadata = {...}	Fixed title/description for pages with unchanging content
Dynamic metadata	export async function generateMetadata()	Per-page, data-driven title/description for dynamic routes
Open Graph tags	metadata.openGraph field	Controls how a page's link preview looks on social media
Sitemap	app/sitemap.ts	Lists important URLs to help search engines discover content
Robots directives	app/robots.ts	Controls which parts of a site crawlers may or may not access
Structured data	JSON-LD <script> tag	Machine-readable content description enabling rich search results

Next.js Practical Example

// app/blog/[slug]/page.tsx — dynamic metadata + structured data for a blog post
import type { Metadata } from 'next';

async function getPost(slug: string) {
  const res = await fetch(`https://api.example.com/posts/${slug}`);
  return res.json();
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost(slug);

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImageUrl],
    },
  };
}

export default async function BlogPostPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await getPost(slug);

  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: post.title,
    datePublished: post.publishedAt,
  };

  return (
    <article>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

// app/sitemap.ts — generates sitemap.xml automatically
import type { MetadataRoute } from 'next';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await fetch('https://api.example.com/posts').then((r) => r.json());
  return posts.map((post: { slug: string; updatedAt: string }) => ({
    url: `https://example.com/blog/${post.slug}`,
    lastModified: post.updatedAt,
  }));
}

// app/robots.ts — generates robots.txt automatically
import type { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: '/admin/',
    },
    sitemap: 'https://example.com/sitemap.xml',
  };
}

generateMetadata fetches the actual post data and returns a title, description, and openGraph object specifically tailored to that one blog post — meaning every single post on the site gets its own accurate metadata and social-preview image rather than sharing one generic value. The jsonLd object, embedded via a script tag with type='application/ld+json', describes this page as an Article using schema.org's standardized vocabulary, giving search engines structured, machine-readable context beyond what's visible in the regular page content. The sitemap function fetches all posts and returns a URL entry for each one, giving search engines a direct, complete list of blog content to crawl and index efficiently. The robots function allows crawling of the site generally while explicitly disallowing the /admin/ path, and points to the sitemap's location — together, sitemap.ts and robots.ts are automatically compiled by Next.js into properly formatted sitemap.xml and robots.txt files at their conventional URLs.

Industry Examples

E-commerce platforms use generateMetadata extensively so every individual product page has accurate, unique titles, descriptions, and Open Graph images reflecting that specific product, critical for both search ranking and social sharing.
Recipe websites rely heavily on JSON-LD structured data to enable Google's rich recipe results, showing cook time, ratings, and calorie counts directly in search listings, which significantly improves click-through rates.
News publishers configure sitemap.ts to update automatically as new articles are published, ensuring search engines discover breaking news content as quickly as possible after publication.
SaaS platforms use robots.ts to disallow crawling of authenticated dashboard routes and internal admin tools, keeping private application areas out of search engine indexes entirely.
Job listing platforms use structured data (following schema.org's JobPosting type) so individual job listings can appear with rich details directly in Google's dedicated job search results interface.

Interview Questions and Answers

Q1. What is the difference between static metadata and generateMetadata in the Next.js Metadata API?

Static metadata is a fixed object exported directly from a page or layout file, suitable for content that never changes, like a homepage title. generateMetadata is an async function exported from a dynamic route that computes metadata values based on that specific page's actual data (via params), enabling unique, accurate metadata for each individual dynamic page, like a specific blog post or product.

Q2. What are Open Graph tags and why do they matter for dynamic pages specifically?

Open Graph tags control how a page's link appears when shared on social media — its preview title, description, and image. They matter especially for dynamic pages because using generateMetadata to set a page-specific openGraph object ensures each individual blog post or product shows its own accurate, relevant preview when shared, rather than a generic site-wide fallback.

Q3. What is the purpose of a sitemap.xml file, and how is it generated in Next.js?

A sitemap gives search engines a direct, efficient list of a site's important URLs, helping with content discovery beyond simply following internal links. In Next.js, it's generated by exporting a function from an app/sitemap.ts file that returns an array of URL entries, which Next.js compiles into a properly formatted sitemap.xml.

Q4. What does a robots.txt file control, and how would you disallow crawling of an admin section?

robots.txt instructs search engine crawlers about which parts of a site they're permitted or forbidden to crawl. In Next.js, you'd export a function from app/robots.ts returning a rules object with a disallow field set to a path like '/admin/', preventing that section from being crawled or indexed.

Q5. What is structured data (JSON-LD) and what benefit does it provide?

Structured data is machine-readable content, typically formatted as JSON-LD following the schema.org vocabulary, embedded in a page to help search engines understand its content beyond what's visually displayed. Correctly implemented structured data can enable rich search result features, like star ratings, cook times, or pricing, displayed directly in search listings.

MCQs With Answers

1. Which mechanism would you use for a blog post page's title to reflect that specific post's actual title?

A static metadata object
generateMetadata, using the post's fetched data
robots.ts
next/image

Answer: B. generateMetadata, using the post's fetched data

Explanation: generateMetadata is an async function that computes metadata based on a specific page's actual data, enabling unique, accurate titles for each dynamic page rather than one shared static value.

2. What do Open Graph tags primarily control?

A page's loading speed
How a page's link preview appears when shared on social media
Search engine crawling permissions
Image file formats

Answer: B. How a page's link preview appears when shared on social media

Explanation: Open Graph tags define the title, description, and image shown in link preview cards when a page is shared on social media or messaging platforms.

3. What is the purpose of a sitemap.xml file?

To style a website's pages
To list important URLs, helping search engines discover a site's content efficiently
To block all search engines from crawling a site
To generate Open Graph images

Answer: B. To list important URLs, helping search engines discover a site's content efficiently

Explanation: A sitemap gives search engines a direct list of a site's important pages, aiding content discovery beyond simply following internal links.

4. What does a robots.txt file control?

Which fonts a site uses
Which parts of a site search engine crawlers may or may not access
How images are optimized
A site's color scheme

Answer: B. Which parts of a site search engine crawlers may or may not access

Explanation: robots.txt gives instructions to search engine crawlers about which paths on a site they're allowed or disallowed from crawling.

5. What is JSON-LD structured data used for?

Styling page content
Giving search engines machine-readable context that can enable rich search results
Compressing images
Managing user authentication

Answer: B. Giving search engines machine-readable context that can enable rich search results

Explanation: JSON-LD structured data, following schema.org's vocabulary, helps search engines understand a page's content well enough to potentially display rich results like ratings or pricing directly in search listings.

Common Mistakes to Avoid

Using only static metadata for dynamic routes, resulting in every blog post or product sharing the exact same generic title and description.
Forgetting to include an openGraph field in dynamic metadata, causing social media shares to show a generic fallback preview instead of the specific page's actual content.
Not generating or maintaining an accurate sitemap.xml, especially on large sites where search engines might otherwise struggle to discover all content through links alone.
Misconfiguring robots.txt and accidentally disallowing crawling of important public content, or forgetting to disallow genuinely private sections.
Adding structured data that doesn't accurately reflect the page's actual visible content, which can violate search engine guidelines and risk penalties rather than earning rich result benefits.

Interview Notes

Static metadata (export const metadata) suits fixed content; generateMetadata suits dynamic, per-page data-driven metadata.
Open Graph tags, set via the openGraph field in metadata, control how a page's link preview appears on social media.
app/sitemap.ts generates sitemap.xml, listing important URLs to aid search engine content discovery.
app/robots.ts generates robots.txt, controlling which paths search engine crawlers may or may not access.
Structured data (JSON-LD, following schema.org vocabulary) gives search engines machine-readable context, potentially enabling rich search results.

Key Takeaways

Next.js's Metadata API replaces manual <head> tag management with a typed, conventions-based system for both static and dynamic pages.
generateMetadata is what makes truly accurate, unique SEO metadata possible at scale across thousands of dynamic pages like blog posts or products.
Sitemaps and robots.txt work together to shape exactly how and where search engines discover and crawl a site's content.
Structured data is a distinct, additional layer beyond basic metadata, unlocking rich search result features when implemented accurately.

Summary

Next.js provides a comprehensive, built-in toolkit for SEO. The Metadata API lets you define a page's title, description, and other meta tags via a static metadata object for fixed content, or an async generateMetadata function for dynamic routes whose metadata should reflect that specific page's actual data — essential for giving every blog post or product page its own accurate title and description. Open Graph tags, configured via the openGraph field, control how a page's link preview appears when shared on social media, and dynamic metadata ensures these previews are accurate per-page rather than generic. Beyond individual pages, an app/sitemap.ts file generates a sitemap.xml listing a site's important URLs to aid search engine discovery, while an app/robots.ts file generates a robots.txt controlling which paths crawlers may or may not access. Finally, structured data (JSON-LD, following the schema.org vocabulary) gives search engines machine-readable context about a page's content, potentially unlocking rich search result features like star ratings or pricing displayed directly in search listings.