vercel / vercel/next.js

[Bug] Static metadata (export const metadata) rendered in <body> instead of <head> in 15.5.4

Open
#84,750 14 comments 21 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Headers linear: next Metadata
Dominant language
JavaScript
Stars
142k
Forks
32.4k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

Link to the code that reproduces this issue

https://github.com/fabiotheo/nextjs-metadata-bug

To Reproduce
Step 1: Clone the reproduction repository
git clone https://github.com/fabiotheo/nextjs-metadata-bug
cd nextjs-metadata-bug
npm install

Step 2: Start development server

npm run dev

Step 3: Inspect HTML

1. Open http://localhost:3000
2. Open DevTools (F12)
3. Inspect the HTML structure
4. Search for meta tags (e.g., og:title, fb:app_id, twitter:card)
5. Notice all meta tags are rendered inside <body> instead of <head>

### Current vs. Expected behavior

```markdown
## Current Behavior (15.5.4) - BROKEN ❌

All metadata tags defined via `export const metadata` are incorrectly rendered **inside `<body>`** instead of `<head>`:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Only basic Next.js meta tags, no custom metadata -->
  </head>
  <body>
    <!-- ❌ WRONG: All custom metadata appears here -->
    <title>Test App</title>
    <meta name="description" content="Testing metadata bug in Next.js 15.5.4">
    <meta property="og:title" content="Test App">
    <meta property="fb:app_id" content="123456789">
    <meta name="twitter:card" content="summary_large_image">
    <!-- etc. -->
  </body>
</html>

Expected Behavior (15.2.4) - CORRECT ✅

All metadata tags should be rendered inside <head>

Impact

This bug causes severe SEO and social sharing issues:

1. Open Graph broken: Facebook, LinkedIn, WhatsApp ignore meta tags in <body>
2. Twitter Cards broken: Twitter expects meta tags in <head>
3. SEO issues: Search engines may not properly parse metadata from <body>
4. HTML validation fails: Meta tags in <body> violate W3C standards

### Provide environment information

```bash
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 24.6.0: Mon Jul 14 11:30:30 PDT 2025; root:xnu-11417.140.69~1/RELEASE_ARM64_T6020
Available memory (MB): 32768
Available CPU cores: 10
Binaries:
Node: 22.19.0
npm: 10.9.3
Yarn: 1.22.22
pnpm: 10.17.1
Relevant Packages:
next: 15.5.4 // Latest available version is detected (15.5.4).
eslint-config-next: N/A
react: 19.2.0
react-dom: 19.2.0
typescript: 5.9.3
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)

Headers, Metadata

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local)

Additional context

Regression Details

The bug was introduced between versions:

  • 15.2.4 (working) ✅
  • 15.5.4 (broken) ❌

I have verified that downgrading to 15.2.4 completely resolves the issue.

Workaround

Temporarily downgrading to Next.js 15.2.4:

{
  "dependencies": {
    "next": "15.2.4"
  }
}

Documentation Reference

From Next.js docs (https://nextjs.org/docs/app/api-reference/file-conventions/layout):

Good to know: You should not manually add <head> tags such as <title> and <meta> to root layouts. Instead, you should use the Metadata API.

The docs clearly state metadata should be in <head>, but 15.5.4 puts it in <body>.

<sub>[NEXT-4750](https://linear.app/vercel/issue/NEXT-4750/bug-static-metadata-export-const-metadata-rendered-in-body-instead-of)</sub>

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked nextjs-metadata-bug reproduction repository, install its dependencies, and compare the generated HTML under Next.js 15.5.4 with 15.2.4 using npm run dev and npm run build. Trace the static export const metadata behavior that places tags in the body; done means the metadata elements render inside head in both affected stages.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, react
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.