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 阅读佛经的网站,欢迎大家体验:
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.