Next.js metadata title template

My main layout has the example shown in the next.js documentation

export const metadata = {
    title: {
        default: 'Calendr',
        template: `%s | Calendr`,
    },
    // etc...
}

export const metadata = {
    title: {
        default: 'Calendr',
        template: `%s | Calendr`,
    },
    // etc...
}

In my page routes I export the following boilerplate:

export const metadata = {
  title: 'Page Name'
}

export const metadata = {
  title: 'Page Name'
}

The page title stays as the default. Please let me know what you think I should try, many thanks.

3 Replies

Ambushfall•13mo ago

Hey, template strings are not used just swap it with

export const metadata = {
    title: {
        default: 'Calendr',
        template: '%s | Calendr',
    },
    // etc...
}

export const metadata = {
    title: {
        default: 'Calendr',
        template: '%s | Calendr',
    },
    // etc...
}

backticks aren't required

BILLY•13mo ago

I removed the backticks & it still doesn't work. Not sure what you mean by template strings are not used, are you saying template strings do not work? NextJS Docs https://nextjs.org/docs/app/api-reference/functions/metadata#metadata-fields

Learn how to add Metadata to your Next.js application for improved search engine optimization (SEO) and web shareability.

BILLY•13mo ago

Only works in server components