Next.js 14 App Router：SEO元数据未按预期位置渲染问题

针对你遇到的元数据渲染异常问题，逐个解答你的疑问：

1. Next.js默认会把元数据放在内吗？ #

这不是默认行为，属于异常情况。正常使用generateMetadata时，生成的<title>和<meta>标签会自动被Next.js插入到页面的<head>标签内部，不会出现在外部。

2. 是否是layout.tsx配置有误？ #

大概率是layout.tsx的配置问题，建议检查以下几点：

• 根app/layout.tsx是否正确返回<html>和<body>标签，且没有手动添加多余的<head>标签
• 根layout是否导出了metadata或generateMetadata？如果根层级有元数据配置，可能和页面的元数据产生冲突，导致渲染异常
• 确认layout是服务器组件（默认就是，不要给根layout添加'use client'指令），因为generateMetadata仅支持在服务器组件中使用

3. 需要手动添加标签吗？ #

不需要手动添加<head>标签，Next.js App Router会自动管理<head>区域的内容。你只需要保证根layout包含标准的<html>和<body>结构即可，比如：

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

内容的提问来源于stack exchange，提问作者Dhiraj Rupnawar