generateMetadata() renders <title> and <meta name="description"> inside <body> instead of <head> when using dynamic values #79238

amitjain213 · 2025-05-15T09:44:53Z

amitjain213
May 15, 2025

We are using generateMetadata() in a Next.js App Router project to dynamically set the page <title> and meta . However, we’ve observed that when returning dynamic values (fetched via an async call), both tags are rendered inside the body, not the head.

If we instead return static string values, they render correctly inside head.

Example code:

export async function generateMetadata(): Promise<Metadata> {
  const pageInfo = await getPageInfo();

  return Promise.resolve({
    title: pageInfo?.title,
    description: pageInfo?.description,
  });
}

Expected behavior:
<title> and description tag should always render in head regardless of static or dynamic values.

Observed behavior:
When values are fetched dynamically (even non-empty), the tags are rendered inside body.

With hardcoded static values, they correctly render inside head.

Additional context:
We are using the App Router with a correct layout structure.

No "use client" directive is present in either app/layout.tsx or app/{path}/layout.tsx.

The root app/layout.tsx defines the , , and elements as recommended.

icyJoseph · 2025-05-15T11:29:51Z

icyJoseph
May 15, 2025
Collaborator

Got any reproduction repository?

You can see here, https://stackblitz.com/edit/nextjs-utdjj8lk?file=app%2Flayout.tsx that it works fine.

6 replies

icyJoseph May 15, 2025
Collaborator

Nice! I was able to reproduce this. Let me think for a moment.

icyJoseph May 15, 2025
Collaborator

Hi, could you confirm that this doesn't happen in next build && next start? or is your Lighthouse screenshot from production?

amitjain213 May 15, 2025
Author

Lighthouse screenshot is from production only, also its with both.

icyJoseph May 15, 2025
Collaborator

What Next.js version do you have? I can only reproduce this on dev mode 🤔 Starting to worry that there might be some other issue at hand, let's hope not.

amitjain213 May 16, 2025
Author

@icyJoseph I am using next 15.3.2

ayushman1413 · 2025-05-15T17:48:02Z

ayushman1413
May 15, 2025

Convert generateMetadata to synchronous by fetching data directly inside it (avoid async/await).

update code via this code 👎
app/page.tsx
code starts 👎

import { Metadata } from "next";

export async function generateMetadata(): Promise {
const pageInfo = await getPageInfo();
return {
title: pageInfo?.title || "Default Title",
description: pageInfo?.description || "Default Description",
};
}

async function getPageInfo() {
return { title: "Dynamic Title", description: "Dynamic Description" };
}

export default function Page() {
return

Content of the Page

;
}

changes in code 👎
Changes:
getPageInfo is a separate async function, but it is called directly within generateMetadata.

The title and description are returned as static values if pageInfo is undefined, avoiding async rendering issues.

0 replies

tkokhing · 2025-05-16T08:40:50Z

tkokhing
May 16, 2025

TL;DR
Based on what is shown, looks like I encountered somewhat similar problem.

A quick one, hope it helps you.

remove the manual <head> out of RootLayout()
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons
put them in another metadata() within layout.tsx
if you encounter issue with theme-color, read this too.

https://nextjs.org/docs/app/api-reference/functions/generate-viewport

import ...
import type { Metadata } from "next";


export const metadata: Metadata = {
  metadataBase: new URL('https://helloworld.com/'),
  title: 'hello',
  description: 'hello world',
  icons: {
    icon: [
      { url: "/static/favicons/favicon-32x32.png", sizes: "32x32", type: "image/png" },
      { url: "/static/favicons/favicon-16x16.png", sizes: "16x16", type: "image/png" },
      { url: "/static/favicons/favicon.ico", type: "image/x-icon" },
    ],
    apple: "/static/favicons/apple-touch-icon.png",
    shortcut: "/static/favicons/favicon.icoo",
  },
  manifest: "/manifest.json",
  other: {
    "msapplication-TileColor": "black",
    "msapplication-config": "/static/favicons/browserconfig.xml",
    "mask-icon": "/static/favicons/safari-pinned-tab.svg",
  }
};



export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en-US" className={`${montserrat.variable}`}>
      <body>
        ...
      </body>
    </html>
  );
}

3 replies

amitjain213 May 16, 2025
Author

As I have mentioned there is no issues with static values, the tags are moving under body only when there is a dynamic call inside generateMetadata function. like

export async function generateMetadata({
  params,
}: {
  params: Params;
}): Promise<Metadata> {
  const { slug } = await params;
  const pageInfo = await getPageInfo(
    logger,
    `/${slug}`,
  );

  return {
    title: pageInfo?.metaTitle,
    description: pageInfo?.metaDescription,
    
  };
}

icyJoseph May 20, 2025
Collaborator

I was able to reproduce this in prod too.

It happens because of Streaming Metadata. Sites do this nowadays. If you go to for example, amazon.com, and look for a product page, and then view-source: that page, you'll see that the body tag opens at around line 4xx, but the title is at line 2xxx.

You can read more about this from our side here: #79313 (comment)

icyJoseph May 21, 2025
Collaborator

I've added some more info and media here: #79404 (comment)

ayushman1413 · 2025-05-16T08:58:54Z

ayushman1413
May 16, 2025

check this :
Removed manual elements.

Moved all metadata configurations to the metadata export.

Set metadataBase to ensure relative URLs work correctly.
//layout.tsx

import type { Metadata } from "next";
import React from "react";

export const metadata: Metadata = {
metadataBase: new URL('https://helloworld.com/'),
title: 'hello',
description: 'hello world',
icons: {
icon: [
{ url: "/static/favicons/favicon-32x32.png", sizes: "32x32", type: "image/png" },
{ url: "/static/favicons/favicon-16x16.png", sizes: "16x16", type: "image/png" },
{ url: "/static/favicons/favicon.ico", type: "image/x-icon" },
],
apple: "/static/favicons/apple-touch-icon.png",
shortcut: "/static/favicons/favicon.ico",
},
manifest: "/manifest.json",
other: {
"msapplication-TileColor": "black",
"msapplication-config": "/static/favicons/browserconfig.xml",
"mask-icon": "/static/favicons/safari-pinned-tab.svg",
}
};

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (

{children}

);
}

0 replies

generateMetadata() renders <title> and <meta name="description"> inside <body> instead of <head> when using dynamic values #79238

Uh oh!

Uh oh!

amitjain213 May 15, 2025

Replies: 4 comments · 9 replies

Uh oh!

icyJoseph May 15, 2025 Collaborator

Uh oh!

icyJoseph May 15, 2025 Collaborator

Uh oh!

Uh oh!

icyJoseph May 15, 2025 Collaborator

Uh oh!

amitjain213 May 15, 2025 Author

Uh oh!

icyJoseph May 15, 2025 Collaborator

Uh oh!

amitjain213 May 16, 2025 Author

Uh oh!

ayushman1413 May 15, 2025

Uh oh!

tkokhing May 16, 2025

Uh oh!

amitjain213 May 16, 2025 Author

Uh oh!

Uh oh!

icyJoseph May 20, 2025 Collaborator

Uh oh!

icyJoseph May 21, 2025 Collaborator

Uh oh!

ayushman1413 May 16, 2025

amitjain213
May 15, 2025

Replies: 4 comments 9 replies

icyJoseph
May 15, 2025
Collaborator

icyJoseph May 15, 2025
Collaborator

icyJoseph May 15, 2025
Collaborator

amitjain213 May 15, 2025
Author

icyJoseph May 15, 2025
Collaborator

amitjain213 May 16, 2025
Author

ayushman1413
May 15, 2025

tkokhing
May 16, 2025

amitjain213 May 16, 2025
Author

icyJoseph May 20, 2025
Collaborator

icyJoseph May 21, 2025
Collaborator

ayushman1413
May 16, 2025