Next.js 13.5.4站点Google PageSpeed提示缺少viewport标签求助

以下是几个可能的原因及对应的排查、解决方法：

• 服务器端未渲染viewport标签
  浏览器开发者工具看到的标签可能是客户端JS渲染后的结果，但PageSpeed爬取的是服务器直接返回的原始HTML。用curl https://你的域名命令获取页面源码，检查里面是否有viewport标签：

  • 如果没有，说明服务器端没输出这个标签。在App Router的layout.tsx（服务器组件）里用官方Metadata API设置，不要手动写meta标签：

    export const metadata = {
      viewport: 'width=device-width, initial-scale=1',
    };
    

  • 若之前手动写了meta标签，建议删除，避免和Metadata API冲突。

• Metadata API使用错误
  如果你用了generateMetadata函数，确保返回的viewport格式正确，且函数没有异步错误导致返回值异常：

  export async function generateMetadata() {
    return {
      viewport: 'width=device-width, initial-scale=1',
    };
  }
  

  注意：generateMetadata只能在服务器组件中使用，不要在带'use client'指令的客户端组件里定义。

• 缓存导致PageSpeed抓取旧内容
  PageSpeed可能缓存了之前无viewport标签的页面版本，点击PageSpeed Insight里的「重新分析」按钮，强制重新抓取最新页面。同时检查部署平台（如Vercel、Netlify）的CDN缓存，确保部署后缓存已刷新。

• 客户端代码干扰head标签
  检查是否有第三方脚本、自定义Head组件或旧的next/head组件（App Router已不推荐使用）修改或覆盖了meta标签。App Router中应完全依赖Metadata API管理head内容，避免混用旧的head处理方式。

• 页面渲染异常
  若页面存在React hydration错误，可能导致客户端渲染时标签丢失。查看浏览器控制台的报错信息，修复 hydration 不匹配问题（比如服务器端和客户端渲染的内容不一致）。

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