Next.js <Head/>组件title显示为页面首个H1的解决方案

元标签检测工具读取到首个H1而非动态title，本质是两个问题叠加：

1. 数据获取时机不符合爬虫抓取逻辑：如果你的API请求是在客户端侧触发（比如useEffect内调用、客户端组件直接fetch），服务端首次返回的原始HTML里，<title>标签要么是空值、要么是未填充的占位内容。绝大多数元检测工具、社交平台爬虫不会执行页面JS、不会等待客户端异步请求完成，只会解析首次返回的原始HTML；当检测不到有效title内容时，会自动兜底抓取页面第一个H1作为标题。你看到浏览器标签页显示正常，是因为浏览器加载完JS、拿到API返回值后动态修改了title，爬虫不会等待这个过程。
2. Head组件key配置冲突：你给<meta name="title">、og:title、twitter:title三个标签都设置了相同的key="title"，Next.js的Head组件会对同key标签做去重覆盖，但原生<title>标签没有设置对应key，部分场景下会导致初始HTML输出时title节点内容未被正确注入。

按优先级选择：

• 方案1（推荐，彻底解决）：将元数据依赖的API请求移到服务端执行
  如果你使用Pages Router，把数据请求逻辑放到getServerSideProps（每次请求实时拿数据）或getStaticProps（构建时生成静态内容）中，保证服务端返回给所有访问者（包括爬虫）的原始HTML里，已经填充好完整的title和meta标签，不需要客户端二次请求补全。
  修正后的代码示例：

  // 对应你的页面文件
  import Head from 'next/head'
  
  // 服务端执行数据请求
  export async function getServerSideProps() {
    const resp = await fetch('你的API接口地址')
    const content = await resp.json()
    return {
      props: { content }
    }
  }
  
  export default function ContentPage({ content }) {
    return (
      <>
        <Head>
          {/* 给title加唯一key，移除其他meta标签上重复的title key */}
          <title key="page-title">{content.meta.title}</title>
          <meta name="title" content={content.meta.title} />
          <meta name="description" content={content.meta.desc}/>
          <meta property="og:type" content="website"/>
          <meta property="og:url" content="https://metatags.io/"/>
          <meta property="og:title" content={content.meta.title}/>
          <meta property="og:description" content={content.meta.desc}/>
          <meta property="og:image" content={content.meta.image}/>
          <meta property="twitter:card" content="summary_large_image"/>
          <meta property="twitter:url" content="https://metatags.io/"/>
          <meta property="twitter:title" content={content.meta.title}/>
          <meta property="twitter:description" content={content.meta.desc}/>
          <meta property="twitter:image" content={content.meta.image}/>
        </Head>
        {/* 页面主体内容 */}
        <h1>{content.meta.title}</h1>
      </>
    )
  }
  

• 方案2：验证修复结果
  部署/本地运行后，不要打开F12开发者工具看Elements面板（这里是JS执行完后的动态DOM，和爬虫拿到的内容不一致），直接右键选择「查看网页源代码」，检查原始HTML里的<title>标签是否已经是API返回的正确值。只要原始源码里的title正确，所有元标签检测工具都能正常读取，不会再抓取H1作为兜底。
• 注意事项
  如果你使用App Router，直接用Next.js官方提供的generateMetadata配置API生成元信息，不要手动写客户端渲染的Head标签，generateMetadata默认在服务端执行，天然适配爬虫抓取逻辑。

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