Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Why is the title template not applied in Next.js metadata for my homepage?

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

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    To ensure that the title template ("%s | My Website") is applied correctly for your homepage, you need to understand how the title configuration works in Next.js. The issue arises because when you define the metadata in both the Layout and the Home page, the title on the page level will override the template from the Layout.

    Here’s how you can make the template work as expected:

    Solution

    1. Avoid redefining the metadata title completely in the Home page.
      Instead of setting the title directly in the Home page metadata, you
      can just use the title: "Home", and the template from the layout
      will be applied automatically.
    2. Ensure consistent metadata merging behavior. Next.js merges the
      page-specific metadata with the layout-level metadata by default,
      but explicitly overriding the title in the page might cause it to
      ignore the template.

    Modify the homepage to not override the metadata title like this:

    Layout (as you already have it):

    export const metadata: Metadata = {
  title: {
    template: "%s | My Website",
    default: "My Website",
  },
  description: "My Website",
};

    Home Page (do not override title template):

    export const metadata: Metadata = {
  title: "Home", // No need to apply the full title here
};

    Explanation:

    • When you set title: "Home" in the page-specific metadata, Next.js
      automatically applies the title.template defined in the layout.
    • The %s will be replaced by the page-specific title, so "Home" will be
      turned into "Home | My Website", as defined in the layout’s
      title.template.

    This should fix the issue, and your homepage title will now correctly show "Home | My Website".

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search