I am working on a Next.js project and trying to set dynamic metadata for different pages. I want my homepage title to show as Home | My Website, but it’s only showing Home. Here’s how I configured the metadata for the layout and the homepage:
Layout:
export const metadata: Metadata = {
title: {
template: "%s | My Website",
default: "My Website",
},
description: "My Website",
};
Home Page:
export const metadata: Metadata = {
title: "Home",
};
I expected the homepage title to use the template and show “Home | My Website”, but it only shows “Home”. How can I ensure the template is applied correctly to the homepage title?
Next.js v14.2.7
The docs state this:
title.template applies to child route segments and not the segment it’s defined in.
title.default is required when you add a title.template.
title.template defined in layout.js will not apply to a title defined in a page.js of the same route segment.
title.template defined in page.js has no effect because a page is always the terminating segment (it doesn’t have any children route segments).
title.template has no effect if a route has not defined a title or title.default.
Which means you can’t use it on the same segment, you can use it on child segments for example app/about/page.tsx or app/blog/layout.tsx