next-seo在SSR中无法渲染SEO标签的解决办法咨询

我之前做SSR项目时也踩过next-seo的坑，给你几个亲测好用的替代方案，都是完全适配SSR场景的：

方案一：直接用Next.js原生next/head组件手动配置 #

next-seo本质也是基于next/head封装的，但有时候嵌套逻辑或渲染时机问题会导致SSR失效，直接用原生组件反而更可靠。你可以在页面里这样写：

import Head from 'next/head';

export default function MyPage() {
  return (
    <>
      <Head>
        <title>我的页面标题 | 站点名称</title>
        <meta name="description" content="这是我的页面核心描述" />
        <meta property="og:title" content="我的页面标题 | 站点名称" />
        <meta property="og:description" content="这是我的页面核心描述" />
        <meta property="og:url" content="https://your-site.com/my-page" />
        <meta property="og:type" content="website" />
      </Head>
      {/* 页面内容区域 */}
    </>
  );
}

如果是动态数据页面，比如通过getServerSideProps获取的数据，直接把数据传递给Head标签即可，SSR渲染时会自动把这些标签注入到HTML头部。

方案二：封装自定义SEO组件（兼顾复用性和SSR兼容性） #

要是觉得手动写每个标签太繁琐，可以自己封装一个类似next-seo的组件，底层用原生next/head，这样既保证SSR渲染稳定，又能像next-seo一样复用：

// components/CustomSeo.js
import Head from 'next/head';

export default function CustomSeo({ title, description, url, ogType = 'website' }) {
  const defaultSiteTitle = '默认站点名称';
  const fullTitle = title ? `${title} | ${defaultSiteTitle}` : defaultSiteTitle;
  const defaultDesc = '默认站点描述文案';

  return (
    <Head>
      <title>{fullTitle}</title>
      <meta name="description" content={description || defaultDesc} />
      <meta property="og:title" content={fullTitle} />
      <meta property="og:description" content={description || defaultDesc} />
      <meta property="og:url" content={url || 'https://your-site.com'} />
      <meta property="og:type" content={ogType} />
    </Head>
  );
}

然后在页面里直接调用：

import CustomSeo from '../components/CustomSeo';

export default function MyPage({ pageData }) {
  return (
    <>
      <CustomSeo
        title={pageData.title}
        description={pageData.description}
        url={`https://your-site.com/${pageData.slug}`}
      />
      {/* 页面内容 */}
    </>
  );
}

export async function getServerSideProps(context) {
  // 服务端获取页面数据
  const pageData = await fetchPageData(context.params.slug);
  return { props: { pageData } };
}

方案三：排查next-seo的配置问题（不一定需要替换） #

如果你还是想用next-seo，可以先检查这几个关键点：

• 有没有在_app.js里全局配置默认SEO？比如：

  import { DefaultSeo } from 'next-seo';
  
  function MyApp({ Component, pageProps }) {
    return (
      <>
        <DefaultSeo
          defaultTitle="默认站点名称"
          defaultDescription="默认站点描述"
        />
        <Component {...pageProps} />
      </>
    );
  }
  

• 页面里的<NextSeo />不要嵌套在自定义的<Head>组件里，直接放在页面根节点下即可，next-seo会自动处理Head的注入逻辑；
• 确保SEO用到的动态数据是在getServerSideProps或getStaticProps中获取的，传递给NextSeo的props在SSR阶段已经存在，不要用客户端异步请求的数据渲染SEO标签。

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