Next.js 15.2.3 App Router中generateMetadata生成的元数据渲染在<head>标签外的SEO问题求助

我来帮你解决这个头疼的SEO问题，这种元数据乱跑的情况确实会直接砸掉搜索曝光，先从最明显的问题开始排查：

首先，你代码里有个非常容易踩的坑——const {business, city, category} = await params！在Next.js App Router的generateMetadata里，params是同步的普通对象，完全不需要加await！你这里错误地await了params，会让整个元数据生成逻辑被无意义地挂起，Next.js会误以为元数据需要等待异步操作，直接跳过服务器端预渲染元数据的步骤，转而在客户端生成，这就导致正常刷新时元数据被插到页面底部的script后面，只有硬刷新时服务器重新完整渲染，才会把元数据放到head里。这大概率是核心问题，先把await params改成const {business, city, category} = params试试！

除了这个关键错误，再给你几个补充排查方向：

• 检查generateBusinessMetadata的异步请求逻辑
  你里面的Supabase数据请求要确保在服务器端能快速稳定完成，有没有超时、错误没处理的情况？比如请求失败时有没有返回默认元数据？可以给请求加个try/catch兜底，避免因为请求异常导致元数据生成失败，触发客户端兜底渲染：

  async function generateBusinessMetadata({ businessSlug, city, category }) {
    try {
      const { data, error } = await supabase.from('businesses')
        .select('*')
        .eq('slug', businessSlug)
        .single();
      if (error) throw error;
      return {
        title: `${data.name} - ${city} ${category}`,
        description: data.description,
        // 其他元数据字段
      };
    } catch (err) {
      // 请求失败时返回默认元数据，避免元数据为空
      return {
        title: `本地商家 - ${city} ${category}`,
        description: `在${city}找到优质的${category}商家`
      };
    }
  }
  

• 验证生产环境的渲染表现
  开发环境的热重载逻辑和生产环境有差异，有时候开发环境的调试逻辑会干扰元数据渲染顺序。你可以跑next build && next start启动生产环境，再测试正常刷新的情况，看看元数据是否还会乱跑。

• 排查客户端的head操作干扰
  检查你的页面组件或者全局组件里，有没有用useEffect、第三方脚本手动修改document.head的内容？这类自定义操作很容易打乱Next.js自动管理元数据的逻辑，导致元数据被重新插入到页面底部。

• 确认Next.js版本的兼容性
  Next.js 15.2.3是比较新的版本，可能存在App Router和generateMetadata相关的小bug。你可以查看官方的版本更新日志，看看15.2.3有没有相关的元数据渲染问题，或者尝试升级到最新的15.x小版本，说不定这类渲染顺序的bug已经被修复了。

先把await params的问题改掉，这应该能解决大部分问题，再结合上面的排查点一步步验证，应该能让元数据稳定地呆在head标签里，把你的搜索曝光拉回来。

备注：内容来源于stack exchange，提问作者Elliott Coe