Metadata API for SEO in NextJS - Step-by-Step Execution

Concept Flow - Metadata API for SEO

Define metadata object

↓

Export metadata from page/component

↓

Next.js reads metadata during build

↓

Inject metadata into HTML <head>

↓

Browser and search engines use metadata

↓

Improved SEO and social sharing

This flow shows how you define and export metadata in Next.js, which Next.js then injects into the HTML head for SEO benefits.

Execution Sample

NextJS

export const metadata = {
  title: 'My Page Title',
  description: 'Page description for SEO'
};

export default function Page() {
  return <main>Hello SEO</main>;
}

This code defines metadata for a Next.js page and exports it so Next.js can add it to the HTML head.

Execution Table

Step	Action	Metadata Object State	Next.js Behavior	Result in HTML
1	Define metadata object	{ title: 'My Page Title', description: 'Page description for SEO' }	Stores metadata for page	No HTML yet
2	Export metadata	Same as above	Next.js detects exported metadata	No HTML yet
3	Render Page component	Metadata unchanged	Next.js prepares HTML head	<head> prepared but not yet sent
4	Inject metadata into <head>	Metadata used	Next.js adds <title> and <meta> tags	<title>My Page Title</title><meta name="description" content="Page description for SEO">
5	Browser loads page	Metadata present	Browser and search engines read metadata	SEO improved, social cards ready
6	Page content rendered	Metadata unchanged	Page body shows <main>Hello SEO</main>	User sees page content
7	End	No change	Process complete	Page fully loaded with SEO metadata

💡 All metadata injected and page rendered; SEO metadata ready for browsers and search engines.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 4	Final
metadata	undefined	{ title: 'My Page Title', description: 'Page description for SEO' }	Same	Same	Same

Key Moments - 3 Insights

Why do we export the metadata object instead of just defining it inside the component?

Next.js needs the metadata object exported at the module level to detect it during build and inject it into the HTML head, as shown in execution_table step 2.

Does the metadata object affect the page content inside the <main> tag?

No, metadata is separate from page content. The metadata only affects the HTML head, while the <main> tag content is rendered as usual (see execution_table step 6).

What happens if we forget to include a description in the metadata?

The page will have no meta description tag, which can hurt SEO and social sharing previews. The metadata object must include description for best results (see execution_table step 4).

Visual Quiz - 3 Questions

Look at the execution table, what is the metadata object state after step 2?

A undefined

B {}

C { title: 'My Page Title', description: 'Page description for SEO' }

D null

💡 Hint

Check the 'Metadata Object State' column at step 2 in the execution_table.

At which step does Next.js inject the metadata into the HTML <head>?

A Step 4

B Step 3

C Step 5

D Step 6

💡 Hint

Look for the step where 'Next.js adds