Next.js 15.3.1 版本中引入了一个性能优化功能——"流式元数据"（ streaming metadata ），但这个优化带来了严重的 SEO 问题。元数据标签（如 <title>, <meta>, <link>）被渲染在 <body> 中而不是 <head> 中。
社区中对这个改动意见很大，但是官方暂时没有修复的打算。
影响范围
- Lighthouse SEO 评分：直接检测失败，因为 Lighthouse 明确检查
<head>中的元数据 - Google Search Console：报告 "Duplicate without user-selected canonical" 错误
- 搜索引擎爬虫：可能无法正确识别页面元数据
- 社交媒体分享：Open Graph 标签可能无法正常工作
临时解决方法：
在 next.config.ts 中添加以下配置：
const nextConfig = {
// 强制所有用户代理接收阻塞式元数据
htmlLimitedBots: /.*/, // 这个正则表达式匹配所有用户代理
// 其他配置...
};
- 或者可以针对特定爬虫进行配置：
/googlebot|bingbot|baiduspider/
相关讨论在： https://github.com/vercel/next.js/issues/79313#issuecomment-2892288965
官方文档相关说明： https://nextjs.org/docs/app/api-reference/functions/generate-metadata#streaming-metadata
--
实际案例
在我的佛经项目中，添加此配置后：
- Lighthouse SEO 评分从 80+ 提升到 100
- Google Search Console 中的重复规范错误消失
PS. 分享一个 Lighthouse 全满分的小彩蛋
PS 2. 最近用 Next.js 在做一个 AI 阅读佛经的网站，欢迎大家体验：
 |
1
gotoschool 4 天前
我靠 100% 这么牛？ 对了，你是某飞的学员么
|
 |
2
avenger OP @gotoschool 并不是 🤣
|
|
3
avenger OP @gotoschool 只是一个有强迫症的中年程序员罢了
|
 |
4
navk 1 天前
SOE 优化能分享下相关经验吗？
|
|
5
avenger OP @navk 基本就是参考 Lighthouse 的建议来的，哪里有问题就改哪里，不懂的就问 Claude
如果你也是用 Next.js ，本身对 SEO 支持算是比较友好的，可以参考官方文档关于 Metadata 那部分 https://nextjs.org/docs/app/guides/production-checklist#metadata-and-seo |
 |
6
liuliuliuliu PRO 牛的，网站做的很棒
|
 |
7
0x400 12 小时 44 分钟前 via iPhone
非常好的网站，已经开始参悟了
|
|
8
avenger OP |
Select Language