NextJS 13.2.4应用目录元标签未嵌入静态HTML，OG标签不被爬虫识别

核心原因 #

NextJS 13.2.4属于App Router的早期beta版本，存在metadata静态渲染bug，当页面触发动态渲染逻辑（或受版本自身限制）时，元标签会被客户端JS注入而非直接写入静态HTML，导致爬虫无法识别。

具体解决步骤 #

• 升级NextJS版本：13.2.4的metadata模块存在已知缺陷，升级到13.3及以上稳定版本，官方已修复大量静态渲染相关的元标签问题，这是最有效的解决方案。
• 检查渲染模式与页面配置：
  • 静态页面中避免使用cookies()、headers()等动态API，这类API会触发SSR甚至客户端渲染，导致元标签无法静态嵌入。
  • 若需静态导出，在next.config.js中配置output: 'export'，执行next build后检查.out目录下的HTML文件，确认元标签是否已写入<head>。
  • 移除页面中export const dynamic = 'force-dynamic'这类强制动态渲染的配置。
• 校验metadata配置格式：确保openGraph等字段大小写正确、结构嵌套无误，示例：

export const metadata = {
  title: '页面标题',
  description: '页面描述',
  openGraph: {
    title: 'OG标题',
    description: 'OG描述',
    images: ['https://your-domain.com/og-image.jpg'],
    url: 'https://your-domain.com/your-page',
    type: 'website',
  },
};

• 临时兼容方案（无法升级版本时）：在根layout.tsx中手动添加静态元标签，或使用next/head组件（App Router中为Legacy API，但13.2.4可兼容）：

import Head from 'next/head';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN">
      <Head>
        <meta property="og:title" content="自定义OG标题" />
        <meta property="og:description" content="自定义OG描述" />
        <meta property="og:image" content="https://your-domain.com/og-image.jpg" />
        <meta property="og:url" content="https://your-domain.com/your-page" />
      </Head>
      <body>{children}</body>
    </html>
  );
}

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