Full-Stack Next›Core· 35 min read

Metadata and SEO

Next.js makes good SEO easy — set page titles and descriptions with a simple metadata export.

What you will learn

Set a page title and description with metadata
Generate metadata for dynamic pages
Explain why Next.js is SEO-friendly

Why SEO matters

SEO (Search Engine Optimisation) is about helping Google and social sites understand your page so it shows up well in search and link previews. Two of the most important pieces are the page title and description.

Static metadata

In any page.js or layout.js, export an object called metadata. Next.js turns it into the right <title> and <meta> tags in the HTML head.

Export a metadata object to set the title and description

// app/about/page.js
export const metadata = {
  title: 'About CodingClave',
  description: 'We teach web development the friendly way.',
};

export default function AboutPage() {
  return <h1>About us</h1>;
}

Note: Output (in the HTML head Next.js produces): <title>About CodingClave</title> <meta name="description" content="We teach web development the friendly way." /> The browser tab now reads "About CodingClave", and search engines see a clear title and description.

Dynamic metadata

For a dynamic page like /blog/[id], the title should depend on the post. Export an async function called generateMetadata that builds the metadata from the route params.

generateMetadata builds the title from the route parameter

// app/blog/[id]/page.js
export async function generateMetadata({ params }) {
  return { title: 'Blog post #' + params.id };
}

Note: Output (visiting /blog/42, in the head): <title>Blog post #42</title> Each post now gets its own correct title, which is great for search results and shared links.

Why Next.js is naturally good at SEO

It renders real HTML on the server, so bots see your content immediately.
Titles and descriptions are easy to set per page.
Fast loads (static and pre-loading) help search rankings too.

Tip: A clear, unique title and description per page is one of the highest-value SEO wins — and in Next.js it is just one small export.

Q. How do you set a static page title in the App Router?

Answer: Exporting a metadata object (with title and description) tells Next.js to render the proper head tags — clean and SEO-friendly.

✍️ Practice

Add a unique metadata title and description to your Home and About pages.
Use generateMetadata to give each /blog/[id] page its own title.

🏠 Homework

Add metadata to every page in a small site and check each browser tab shows the right title.