Next.js中使用getInitialProps/getServerSideProps设置的Meta标签在View Source中不显示的问题排查

阿华AIGC实验室

2026-4-30

问题分析与解决方案

嘿，我帮你捋捋这个问题——你遇到的是Next.js服务端渲染Meta标签的常见坑：审查元素能看到标签，但查看页面源码找不到，本质是这些Meta标签只在客户端hydrate之后才渲染，服务端渲染时根本没生成。下面是具体原因和修复方案：

核心原因拆解

条件渲染卡了服务端渲染
你在页面return里写了{singleProductData !== null ? <Meta ... /> : '' }的判断，如果singleProductData在服务端渲染时没被正确赋值（比如你用了客户端状态useState初始化，而不是直接用getInitialProps返回的props），服务端会直接渲染空内容，只有客户端加载完数据后才会渲染Meta组件，这就导致源码里看不到。
数据接收方式不对
你的getInitialProps已经把产品数据和Meta信息拿回来了，但如果组件里不是直接从props取数据，而是搞了个useState+useEffect在客户端再请求一遍，那服务端渲染时数据还没就绪，自然不会生成Meta标签。
Meta组件的细节问题
你Meta组件里的og:title、twitter:title都是空的，而且还重复写了name="og:title"和property="og:title"，虽然这不是主要问题，但会导致标签无效或者重复。

一步步修复

1. 直接从props拿数据，别搞客户端状态

在SingleProduct组件里，直接用getInitialProps返回的props，不要用useState初始化数据：

const SingleProduct = (props) => {
  // 直接从props解构数据，服务端渲染时就有值
  const { result: singleProductData, meta_title, meta_desc } = props;

  return (
    <>
      {/* 直接渲染Meta，不用判断null——getInitialProps已经处理了异常情况 */}
      <Meta 
        title={meta_title || `${singleProductData?.name} | ARC India`} 
        desc={meta_desc || singleProductData?.meta_description} 
      />
      {/* 你的页面其他内容 */}
    </>
  )
}

小贴士：getInitialProps在服务端和客户端都会执行，服务端渲染时已经拿到了数据，所以singleProductData在服务端就有值，不需要额外的null判断。

2. 优化Meta组件，填充动态内容

把Meta组件里的空字段都换成props传递的内容，同时修正重复的标签写法：

import Head from 'next/head'
const Meta = (props) => (
  <Head>
    <title>{props.title}</title>
    <meta name="description" content={props.desc || ""} />
    <meta property="og:type" content="website" />
    {/* 去掉重复的name="og:title"，只保留property属性 */}
    <meta property="og:title" content={props.title} />
    <meta property="og:description" content={props.desc || ""} />
    <meta property="og:site_name" content="ARC India" />
    <meta property="og:url" content={props.url || ""} />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content={props.title} />
    <meta name="twitter:description" content={props.desc || ""} />
    {/* 其他字段按需补充即可 */}
  </Head>
)
export default Meta

3. 修复`getInitialProps`的异常处理

你的catch块里result变量是未定义的（因为try里是const声明，catch访问不到），会导致报错，赶紧修正：

SingleProduct.getInitialProps = async (context) => {
  const { query } = context
  const { id, categoryId } = query
  const json = { _id: id }
  try{
    const response = await fetch(Constants.getProducts, {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(json),
    });
    const result = await response.json();
    return {
      result: result.doc[0],
      meta_title: result.doc[0]?.meta_title || `${result.doc[0]?.name} | ARC India`,
      meta_desc: result.doc[0]?.meta_description || "",
      categoryId,
      status: 200
    }
  } catch(e){
    console.error('获取产品数据失败:', e);
    // 异常情况返回默认Meta信息
    return {
      result: null,
      meta_title: '产品不存在 | ARC India',
      meta_desc: '抱歉，该产品不存在或已下架',
      categoryId,
      status: 404
    }
  }
}