NextJS静态导出站点Head组件动态设置og标签不生效如何解决

你遇到的问题主要由两个原因导致：

1. 你是在客户端useEffect中异步获取数据，初始渲染时title和logo都是空字符串，next/head会先把空值的meta标签渲染到HTML中。如果是静态导出场景，初始HTML里的meta标签默认就是空值，爬虫抓取时不会执行客户端JS，也就拿不到更新后的内容。
2. next/head默认会通过标签的property/name属性判断是否是重复标签，如果没有显式指定key，部分场景下不会触发标签内容的更新，导致客户端拿到数据后meta标签没有刷新。

方案1（推荐，适配SEO和静态导出）：使用getStaticProps在构建阶段获取数据 #

og标签主要用于搜索引擎、社交平台爬虫抓取，这类爬虫不会执行页面的客户端JS，所以必须将数据注入到初始HTML中才能生效。你可以用NextJS pages路由的getStaticProps方法在构建时拉取接口数据，直接通过props传给组件：

function PageHead(props: any) {
  const location = typeof window !== 'undefined' ? window.location.href : "/";
  return (
    <Head>
      <meta property="og:title" content={props.title} />
      <meta property="og:url" content={location} />
      <meta property="og:image" content={props.logo} />
    </Head>
  );
}

const Home: NextPage = ({title, logo}) => {
  return (
    <React.Fragment>
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          minHeight: '100vh',
        }}
      >
        <PageHead logo={logo} title={title}/>
      </Box>
    </React.Fragment>
  )
}

export async function getStaticProps() {
  const reviewData = await (await fetch("https://api.")).json();
  return {
    props: {
      title: reviewData.name,
      logo: reviewData.logo
    },
    revalidate: 86400 // 可选，设置增量静态再生成的周期，单位秒
  }
}

export default Home

方案2（仅客户端渲染场景）：给meta标签添加唯一key强制更新 #

如果你确实需要在客户端异步获取数据，可以给每个meta标签添加唯一的key属性，强制next/head识别到内容变化并更新标签：

function PageHead(props: any) {
  const location = typeof window !== 'undefined' ? window.location.href : "/";
  return (
    <Head>
      <meta key="og-title" property="og:title" content={props.title} />
      <meta key="og-url" property="og:url" content={location} />
      <meta key="og-image" property="og:image" content={props.logo} />
    </Head>
  );
}

注意：该方案仅会在客户端JS执行后更新meta标签，静态导出的初始HTML里还是空值，无法被爬虫识别，仅适合不需要SEO的内部系统场景。

另外process.browser已经被NextJS废弃，建议替换为typeof window !== 'undefined'判断运行环境。

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