Next.js 14: How to customize <head /> per page #58757

qdimka · 2023-11-22T07:41:05Z

qdimka
Nov 22, 2023

I am migrate react-app (cra) to Next.js 14, for improve seo-support.

This is my first experience with ssr framework.
In react-app I used react-helmet to manage metadata. In Next I plan to use the Head element, but unfortunately it doesn't work with app router.

So I started using the built in seo - Metadata. It works like a charm, but I ran into some issues.

I have customized metadata properties for the root layout via generateMetadata.
Some properties are missing in Metadata, for example I can't find how to set <meta itemprop="...">. Of course, I can add this meta directly to .

The issue is that this parameter have to be changed per-page (like a page title), and I cannot find the way, how change <head /> section from page, because this meta-props does not covered with Metadata api.

How I can achieve this?

// layout.tsx

export async function generateMetadata(): Promise<Metadata> {
    return {
        manifest: `/manifest.json`,
        openGraph: {
            type: "website",
            url: Constants.BaseUrl,
            images: `${Constants.BaseUrl}/assets/images/preview.png`
        },
        verification: {
            yandex: Constants.YandexWebMasterId!
        }
    }
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ru">
      <head title="">
          <base href={Constants.BaseUrl} />
         // Initially setup meta
          <meta itemProp="title" content="some-text"/>
          <meta itemProp="image" content="/assets/images/preview.png" />
      </head>
      <body>
              {children}
      </body>
    </html>
  )
}


//page.tsx

export async function generateMetadata(): Promise<Metadata> {
    return {
        title: "VacanciesPage title"

    // here i need to change 
    // <meta itemProp="title" content="VacanciesPage title"/>
    }
}

export default function VacanciesPage() {
    return ...
}

devjiwonchoi · 2023-11-25T04:49:59Z

devjiwonchoi
Nov 25, 2023
Maintainer

For adding up the meta tag, try this:

// same for generateMetadata
export const metadata = {
  other: {
    custom: 'meta',
  },
}

Reference

genereateMetadata#other

1 reply

qdimka Nov 25, 2023
Author

thanks for the answer. Unfortunately, this code produces <meta name="custom" content="meta"> instead of <meta itemprop="custom" content="meta">.

Anyway, I looked into seo props and decided that itemprop is obsolete for our seo needs. We will use application/json+ld

kkorach · 2023-11-30T20:02:37Z

kkorach
Nov 30, 2023

I'm in a similar position, looking into converting an existing pages layout to app layout. On our pages that have pagination, we have a canonical link, as well as next and previous links. The other approach works for metadata, but not links.

1 reply

pratik-gohil Mar 10, 2024

did you find any solution?

khanakia · 2024-03-10T11:21:40Z

khanakia
Mar 10, 2024

I would like to preload the image link <link rel="preload" as="image" href="https://demo.com/test.jpg"> but couldn't find a way.

5 replies

pratik-gohil Mar 10, 2024

same issue
I don't want solutions from Next.js documentation, I want to put anything I want in the head tag which nextjs 14 is not allowing.

khanakia Mar 10, 2024

For my use case I just upgraded the next 13 to 14 and now next.js automatically add preloads for the images on the page

pratik-gohil Mar 10, 2024

I've encountered difficulties preloading a font file in Next.js despite attempting various methods. Even utilizing next/font and including the preload parameter hasn't resulted in the desired outcome of embedding the preload link into the head. While pre-connection has proven effective for addressing LCP concerns related to the font, the ability to customize the head tag would be a valuable addition.

khanakia Mar 10, 2024

May be use this https://nextjs.org/docs/app/api-reference/functions/generate-metadata#resource-hints

pratik-gohil Mar 10, 2024

Thank you @khanakia
This will add the preload link to the head but still one issue remains of actually importing the font
Eg.

  <link rel="preload" href="style.css" as="style" /> // this link will be added by generate metadata function

  <link rel="stylesheet" href="style.css" /> // how to add this link

Dakuan · 2024-04-13T07:35:29Z

Dakuan
Apr 13, 2024

ditto if oyu want to add custom schema.org metadata on a per page basis

0 replies

themeix · 2024-09-23T10:59:56Z

themeix
Sep 23, 2024

Yes, i added structuredData on page.jsx but its not override my layout structuredData which presents on app root folder

1 reply

zahoor248 Jun 2, 2025

Then you dn need to add that in root, try adding in root page not layout

Next.js 14: How to customize <head /> per page #58757

Uh oh!

Uh oh!

Replies: 5 comments · 8 replies

Uh oh!

Uh oh!

devjiwonchoi Nov 25, 2023 Maintainer

Reference

Uh oh!

qdimka Nov 25, 2023 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 5 comments 8 replies

devjiwonchoi
Nov 25, 2023
Maintainer

qdimka Nov 25, 2023
Author