Is it possible to have multiple metadata title templates?

I want to achieve Page | NestedLayout | RootLayout with the following but I am getting Page | NestedLayout.

// Root Layout
export const metadata = {
  title: {
    template: '%s | RootLayout',
    default: 'RootLayout',
  },
}

// Nested Layout
export const metadata = {
  title: {
    template: '%s | NestedLayout',
    default: 'NestedLayout',
  },
}

// Page
export const metadata = {
  title: 'Page',
};

@khesualdo

Based on the documentation, in the App Router, metadata title templates are evaluated in order starting from the root segment down to the final page segment [1]. Each segment can define its own metadata, but they follow specific rules for merging and inheritance:

  1. Title templates only apply to child segments below where they are defined [2]
  2. Each title template requires its own default title [2]

Here’s an example of how title templates work across segments:

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
 title: {
 template: '%s | Acme',
 default: 'Acme', // a default is required when creating a template
 },
}

(Functions: generateMetadata | Next.js)

When a child page defines its title:

import type { Metadata } from 'next'

export const metadata: Metadata = { title: 'About', }

If you need to bypass a parent’s template, you can use title.absolute in a child segment:

import type { Metadata } from 'next'

export const metadata: Metadata = { title: { absolute: 'About', }, }
3 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.