Next.js元数据异常：非首页meta标签出现在body而非head

问题现象 #

• SSR生成的原始HTML中，非首页路由（如/tickets、/ticket/[id]）的所有自定义元数据（title、description、og:image、Twitter卡片等）全部被渲染在<body>标签内，<head>仅包含charset、viewport、next-size-adjust这3个基础meta标签；
• 客户端React完成hydration后，所有元数据会自动移至<head>，但搜索引擎只会读取初始SSR生成的HTML，直接导致SEO失效；
• 首页路由的元数据渲染完全正常，仅非首页路由出现此问题。

环境信息 #

• Next.js：16.0.0-beta.0（回滚至15.5.5稳定版后问题依旧）
• React：19
• 开发环境、生产环境、Vercel部署站点均存在此问题

已尝试的解决方案 #

• 不手动添加<head>标签，完全交由Next.js自动处理
• 显式添加闭合<head></head>或自闭合<head />标签
• 配置metadataBase解决URL解析问题
• 移除--turbopack启动标志并重启服务
• 在next.config.ts中禁用React Compiler
• 多次重启开发服务器（非热重载）
• 排查代码确认未使用next/head的<Head>组件
• 执行npm run build构建生产环境并部署至Vercel，问题依旧存在

问题验证代码 #

在浏览器控制台执行以下代码，可直观看到元数据的分布情况：

// 浏览器控制台执行
const response = await fetch(window.location.href);
const html = await response.text();
const headContent = html.match(/<head[^>]*>([\s\S]*?)<\/head>/i)[1];
const bodyContent = html.match(/<body[^>]*>([\s\S]*?)<\/body>/i)[1];
console.log('Meta in head:', (headContent.match(/<meta/gi) || []).length);
console.log('Meta in body:', (bodyContent.match(/<meta/gi) || []).length);
// 典型输出：Meta in head: 3, Meta in body: 15

求助需求 #

已严格按照Next.js App Router元数据文档配置，且AI工具也验证过配置的正确性，但非首页路由的SSR元数据始终错误渲染在<body>中，严重影响SEO。求问题排查方向或可行的解决方案。

内容的提问来源于stack exchange，提问作者Kareem A