Next.js 15元数据未在服务端HTML渲染，社交媒体爬虫无法识别

我在使用Next.js 15（版本15.3.2）时遇到问题：在layout.tsx中通过Metadata API定义的元数据未包含在服务端渲染的HTML里，导致Twitter、Facebook等社交媒体爬虫及元数据检查工具显示标题、描述、Open Graph标签等均为null值。但这些元数据在浏览器检查器中可见，说明是客户端添加的。

我的layout.tsx代码 #

import type { Metadata } from "next";
import { ThemeProvider } from '~/common/providers/theme-provider';
import { Calistoga, Geist_Mono, Lexend } from "next/font/google";
import "./globals.css";
import Header from "~/common/components/header";
import Footer from "~/common/components/footer";
import FloatingDockNavbar from "~/common/components/floating-dock-navbar";
import { Toaster } from "react-hot-toast";
import { Analytics } from "@vercel/analytics/next";

export const metadata: Metadata = {
  metadataBase: new URL("https://www.aayushmaan.me"),
  title: {
    default: "Aayushmaan Soni | Full Stack Web Developer",
    template: "Aayushmaan Soni | %s",
  },
  description:
    "Hi, I'm Aayushmaan Soni, a passionate Full Stack Web Developer specializing in modern JavaScript frameworks and creating innovative web applications.",
  icons: {
    icon: "https://www.aayushmaan.me/memoji.ico",
  },
  openGraph: {
    title: "Aayushmaan Soni | Full Stack Web Developer",
    description: "Explore my portfolio to learn more about my web development skills and projects.",
    url: "https://www.aayushmaan.me",
    siteName: "Aayushmaan Soni",
    images: [
      {
        url: "https://www.aayushmaan.me/og-image.png",
        width: 1200,
        height: 630,
        alt: "Aayushmaan Soni Portfolio",
        type: "image/png"
      },
    ],
    locale: "en_US",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Aayushmaan Soni | Full Stack Web Developer",
    description: "Hi, I'm Aayushmaan Soni, a passionate Full Stack Web Developer specializing in modern JavaScript frameworks.",
    images: ["https://www.aayushmaan.me/og-image.png"],
    creator: "@aayushmaan5oni",
    site: "@aayushmaan5oni"
  },
  keywords: ["Full Stack Developer", "Web Development", "Portfolio", "MERN", "Next.js"],
};

// Font configurations omitted for brevity

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className="...">
        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} disableTransitionOnChange={false} storageKey="theme">
          <Toaster position="top-center" />
          <Header />
          <main className="flex-grow">{children}</main>
          <Footer />
          <FloatingDockNavbar />
        </ThemeProvider>
        <Analytics />
      </body>
    </html>
  );
}

测试结果 #

我使用以下命令检查服务端渲染的HTML：

Invoke-WebRequest -Uri "https://www.aayushmaan.me" -Headers @{ "User-Agent" = "Twitterbot/1.0" }

返回的HTML中head标签缺少元数据：

<head>
  <meta charSet="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- Font preloads and styles -->
  <link rel="stylesheet" href="/_next/static/css/525efa2132eb97fa.css" data-precedence="next"/>
  <!-- Scripts -->
  <meta name="next-size-adjust" content=""/>
</head>

已尝试的解决方案 #

• 改用generateMetadata替代静态metadata
• 清除缓存后重新部署到Vercel
• 使用Twitterbot、facebookexternalhit等爬虫用户代理测试
• 确认layout.tsx是服务端组件（无"use client"指令）

目前社交媒体预览（如Twitter、WhatsApp）仅显示URL，Facebook分享调试工具等报告元数据为null。

内容的提问来源于stack exchange，提问作者Aayushmaan Soni