Stop 11 · Next.jsTopics · 10/16

Metadata

In short

The title in the browser tab, the text under your link on Google, the preview card on WhatsApp. All of that is metadata, and Next.js lets you set it right next to your page.

Next.js's built-in API — the `metadata` export or `generateMetadata` function — for setting a page's title, description and Open Graph tags for SEO.

The jaadu sticks a picture label of a mango slice onto a pickle jar on a kitchen shelf.

Think of it like this

The label on a pickle jar

A good aachar jar says what's inside, the flavour and a nice picture, so you know before you open it. Metadata is the label on your page. Google and WhatsApp read it before anyone clicks.

Watch it happen

How a link preview gets made

Next server

Data

GET /colleges/iim-a

1/5You paste a link in a chat. WhatsApp's crawler fetches the page.

The big ideas

What you need to know

Static metadata

export const metadata = { title, description } works when the values never change.

generateMetadata

For dynamic pages, an async function builds the title and description from the page's data.

Open Graph

The openGraph field sets the image and text for link previews on WhatsApp, LinkedIn and others.

Title templates

In the root layout, title: { template: "%s | InsideEdge" } adds your site name to every page title.

See it in code

Walk through the code

tsx

1// app/colleges/[slug]/page.tsx2import type { Metadata } from "next";3 4type Props = { params: Promise<{ slug: string }> };5 6export async function generateMetadata({ params }: Props): Promise<Metadata> {7  const { slug } = await params;8  const college = await getCollege(slug);9  return {10    title: college.name,11    description: `Fees, placements and reviews for ${college.name}.`,12    openGraph: { images: [college.coverImage] },13  };14}

1/3params is a Promise in Next.js 15+, same as in the page.

Next.js puts these values into the page's head for you. If getCollege is also called in the page, wrap it in React's cache() so the data is fetched once.

Save yourself the pain

Common mistakes

Oops

Giving every page the same title, like 'My App'.

Do this instead

Make each title unique and descriptive. It's what people see in search results and tabs.

Oops

Exporting both metadata and generateMetadata from the same page.

Do this instead

Use one or the other per route segment. Next.js doesn't allow both.

Your mission

Make a great link preview

~20 min

Quick check

Which export should a /blog/[slug] page use to set a different title per post?

Go deeper

1Add a static `metadata` export to a page with title and description.
2Use `generateMetadata` for a dynamic route where the title depends on fetched data.
3Verify your metadata renders correctly using a social-share debugger tool.