
Next.js 15.3.1 版本中引入了一个性能优化功能"流式元数据"( streaming metadata ),但这个优化带来了严重的 SEO 问题。元数据标签(如 <title>, <meta>, <link>)被渲染在 <body> 中而不是 <head> 中。
社区中对这个改动意见很大,但是官方暂时没有修复的打算。
<head> 中的元数据临时解决方法:
在 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
--
在我的佛经项目中,添加此配置后:
PS. 分享一个 Lighthouse 全满分的小彩蛋

PS 2. 最近用 Next.js 在做一个 AI 阅读佛经的网站,欢迎大家体验:
1 gotoschool 94 天前 我靠 100% 这么牛? 对了,你是某飞的学员么 |
2 avenger OP @gotoschool 并不是 |
3 avengr OP @gotoschool 只是一个有强迫症的中年程序员罢了 |
4 navk 90 天前 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 90 天前 via iPhone 非常好的网站,已经开始参悟了 |
8 avenger OP |
9 ZztGqk 89 天前 via iPhone 这个我觉得没问题,也没必要修复吧,这算 feature ,不过 nextjs 对于这种 default break change 确实比较多。rsc 的 streaming 的目的就是为了避免等待慢接口,而给 meta 做正好补齐了,我们正好有这个需求,针对 bot 等一下慢接口没啥问题,反而针对正常访问还能提速。 |
11 youyouzi 89 天前 |
12 DomenicCarter 86 天前   我看了一下最近的新站,好像没看到 OP 提到的现象,依然在 head 里面啊,没跑到 body 里. 网址: https://gamocean.com/ ,要不 OP 帮我看看,是不是我没看对. |
13 avenger OP @DomenicCarter metadata 要动态生成的才会这样,你试一下给不同页面生成不同 meta 试一下,用 generateMetadata 试一下 |
14 DomenicCarter 86 天前 真的是哎,我这个页面是动态 metadata ( https://gamocean.com/game/draw-save-puzzle ),title 果然跑 body 里了,难受。 |
15 DomenicCarter 86 天前 感谢 OP 分享,我已经使用你的方法修复了 |