Next.js 13（Pages目录）next-seo动态元标签不被爬虫识别问题

开发者阿泽

2026-7-24

问题描述

我在Next.js 12中使用next-seo已有一段时间，一切正常。为了动态配置元信息，我创建了BaseLayout组件并在其中渲染NextSeo，通过props传入动态参数，示例代码如下：

const BaseLayout: React.FC<{children: React.ReactNode, pageTitle?: string, description?: string, pageLink?: string}> = ({pageTitle, pageLink, description = 'default description'}) => {
    let title: string = pageTitle ? `Site Name - ${pageTitle}` : 'Site Name';
    let canonical: string = pageLink ? `https://example.com${pageLink}` : 'https://example.com';

    return (
        <>
            <NextSeo
                title={title}
                description={description}
                canonical={canonical}
            />

            {children}
        </>
    )
}

export default BaseLayout;

在页面中引入BaseLayout即可生成对应元标签，例如首页使用：

<BaseLayout title='Home' pageLink='/' description="my homepage"><div>Sample Home</div></BaseLayout>

这在Next.js 12中能正常生成如<meta name="description" content="my homepage" />的元标签，但升级到Next.js 13（使用Pages目录）后，元标签仅在DevTools中可见，爬虫无法抓取，已通过Python爬虫确认此问题。

我尝试回滚到Next.js 12，但需要Next.js 13的特性，希望修复该问题。将NextSeo放在_app.tsx中静态配置可正常工作，但无法实现动态配置，且我希望使用SSG，不想使用getInitialProps或SSR相关方案。请问该问题的原因是什么？

问题原因

Next.js 13 Pages目录SSG渲染逻辑调整：Next.js 13对Pages目录的静态站点生成（SSG）流程做了优化，当NextSeo被放在页面的子组件（如BaseLayout）中时，动态传递的props无法在构建阶段被提取并注入到静态HTML输出里，而是仅在客户端 hydration（水合）过程中才添加元标签。爬虫通常只会抓取初始静态HTML内容，因此无法识别这些客户端生成的元信息。
next-seo版本适配问题：旧版本的next-seo可能未完全适配Next.js 13 Pages目录的静态渲染机制，导致组件内动态配置的元数据无法被Next.js的静态分析工具捕获。而放在_app.tsx中的静态配置属于全局层面，构建时能被正确识别并生成到HTML中。
组件层级的静态分析限制：Next.js在SSG构建时，会优先处理页面级别的元数据逻辑，不会深度遍历所有子组件去提取NextSeo的配置。BaseLayout作为页面的嵌套组件，其内部的NextSeo配置无法被构建阶段的静态分析流程识别，因此只能在客户端生效。

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