0Pricing
Next.js 15 Fullstack Web Apps · Lesson

Metadata, SEO, and the Document Head

Configure page titles, descriptions, Open Graph tags, and favicons using the Next.js 15 Metadata API for strong SEO and social sharing.

Metadata, SEO, and the Document Head is a free Next.js 15 Fullstack Web Apps lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Next.js 15 Fullstack Web Apps learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why Metadata Matters

Search engines and social platforms read your metadata to build results and link previews — so titles and descriptions drive clicks and ranking.

The Metadata API

Next.js 15 replaces manual <head> edits with a declarative Metadata API: export a metadata object or generateMetadata and it renders the tags.

Static Metadata Export

For metadata that never changes, export a typed metadata object — Next.js merges it into the document head automatically.

export const metadata = {
  title: 'My Dashboard',
  description: 'Manage your account and settings',
};

export default function Page() {
  return <h1>Dashboard</h1>;
}

Title Templates

In a layout, set a title template so child pages share a suffix. The %s placeholder is swapped for each page's own title.

export const metadata = {
  title: {
    template: '%s | Acme',
    default: 'Acme',
  },
};

Dynamic Metadata

When the title depends on data, export an async generateMetadata function — it gets the route params and can fetch before rendering.

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return { title: post.title, description: post.excerpt };
}

Open Graph Tags

Open Graph metadata controls how a link looks when shared. Add an openGraph field with a title, description, and image.

export const metadata = {
  openGraph: {
    title: 'Acme Launch',
    description: 'The new way to build apps',
    images: ['/og-launch.png'],
  },
};

Twitter Cards

Twitter/X uses its own card metadata. Set the twitter field to control the preview shown when your link gets posted.

export const metadata = {
  twitter: {
    card: 'summary_large_image',
    title: 'Acme Launch',
    images: ['/og-launch.png'],
  },
};

Favicons and Icons

Drop special files in app/ and Next.js wires them up: favicon.ico for the tab, icon.png for the app, apple-icon.png for iOS.

Dynamic OG Images

Next.js can generate social images on the fly: an opengraph-image.tsx using ImageResponse renders JSX to a PNG per page.

import { ImageResponse } from 'next/og';
export default function Image() {
  return new ImageResponse(<div style={{ fontSize: 64 }}>Acme</div>);
}

Robots and Sitemaps

Steer crawlers with a robots.ts file and publish a sitemap.ts so search engines find every route — both export plain serializable data.

export default function robots() {
  return { rules: { userAgent: '*', allow: '/' }, sitemap: 'https://acme.com/sitemap.xml' };
}

Best Practices

For strong SEO: unique title and description per page, titles under ~60 chars, always an Open Graph image, and generateMetadata for dynamic routes.

Quick Check

Test your metadata knowledge.

Recap

You learned the Metadata API: static metadata vs generateMetadata, title templates, openGraph/twitter previews, and the special icon/SEO files.

Frequently asked questions

Is the “Metadata, SEO, and the Document Head” lesson free?

Yes — the full text of “Metadata, SEO, and the Document Head” is free to read here on the web, and the Next.js 15 Fullstack Web Apps course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Next.js 15 Fullstack Web Apps course, upgrade to CoddyKit PRO.

What will I learn in “Metadata, SEO, and the Document Head”?

Configure page titles, descriptions, Open Graph tags, and favicons using the Next.js 15 Metadata API for strong SEO and social sharing. You practise Next.js 15 Fullstack Web Apps with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Next.js 15 Fullstack Web Apps?

No prior experience is required. Next.js 15 Fullstack Web Apps on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Metadata, SEO, and the Document Head” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Next.js 15 Fullstack Web Apps lesson?

Yes. Every Next.js 15 Fullstack Web Apps lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Introduction to Next.js 15
  2. Project Setup and Configuration
  3. Pages, Layouts & Routing Basics
  4. Metadata, SEO, and the Document Head
← Back to Next.js 15 Fullstack Web Apps