Title metadata

This page explains how to configure document titles in Next.js using both basic and advanced approaches.

Title metadata

Next.js provides flexible title configuration through its Metadata API. Titles can be defined using either a simple string value or an object with advanced options.

Basic configuration

For simple cases, export a metadata object with a string title from your layout.tsx or page.tsx file:

export const metadata = {
  title: "About unofficialDocs",
};

Advanced configuration

For more control over titles, use an object-based configuration with the following properties:

import { Metadata } from "next";

export const metadata: Metadata = {
  title: {
    default: "", // Fallback title for child routes
    template: "", // Pattern for formatting child titles
    absolute: "", // Override that ignores parent templates
  },
};

Default title

The default property serves as a fallback for child routes that don’t specify their own title:

export const metadata: Metadata = {
  title: {
    default: "Unofficial Docs",
  },
};

// No metadata defined here

// Results in "Unofficial Docs" for /blog route

Template title

The template property defines a pattern for formatting child route titles using %s as a placeholder:

export const metadata: Metadata = {
  title: {
    template: "%s | unofficialDocs",
  },
};

// app/blog/page.tsx
export const metadata: Metadata = {
  title: "Blog",
};

// Results in "Blog | unofficialDocs" for /blog route

Absolute title

The absolute property lets you bypass parent templates completely:

export const metadata: Metadata = {
  title: {
    template: "%s | unofficialDocs",
  },
};

// app/blog/page.tsx
export const metadata: Metadata = {
  title: {
    absolute: "Blog Posts",
  },
};

// Results in just "Blog Posts" for /blog route

Good to know

Templates only affect child routes, not the route where they’re defined
Absolute titles ignore all parent templates
Default titles apply when children don’t specify their own