在 Next.js 服务端渲染（SSR）应用中，export const metadata 未生效通常源于页面路由模式不匹配、动态参数处理不当或版本兼容性问题；本文详解根本原因、修复方案及更可靠的 SEO 实践。

在 next.js 服务端渲染（ssr）应用中，`export const metadata` 未生效通常源于页面路由模式不匹配、动态参数处理不当或版本兼容性问题；本文详解根本原因、修复方案及更可靠的 seo 实践。

Next.js 中 export const metadata 是 App Router（基于 React Server Components）的专属特性，仅适用于 app/ 目录下的页面组件。而你的项目仓库（NewsBlog-ssr）使用的是 Pages Router（pages/ 目录） —— 这正是标题不生效的根本原因：export const metadata 在 Pages Router 中完全被忽略，属于无效语法。

✅ 正确解决方案取决于你当前使用的路由模型：

✅ 若你坚持使用 Pages Router（推荐短期修复）

请改用 next/head 或函数组件内联

? 进阶建议：SEO 友好增强（尤其适合新闻类网站）

对于多页面、高 SEO 要求的新闻站点，推荐集成 next-seo —— 它提供细粒度控制、Open Graph 支持及 SSR 兼容性：

npm install next-seo

// pages/[id].tsx （Pages Router 示例）
import { NextSeo } from 'next-seo';

export default function ArticlePage({ article }) {
  return (
    
      <nextseo title="{`${article.title}" news website description="{article.excerpt}" canonical="{`https://example.com/news/${article.id}`}" opengraph="{{" type: article: publishedtime: article.publishedat authors:></nextseo><article><h1>{article.title}</h1>
        <p>{article.content}</p>
      </article>>
  );
}

? 关键注意事项：

• Pages Router 不支持 metadata 对象导出，请勿混用；
• getServerSideProps 中无法直接修改
• 使用 next-seo 时，确保其 组件位于页面 JSX 树顶层（通常在 位置），且避免重复渲染；
• 构建前运行 next build 并检查终端警告——Next.js 会提示 metadata 在 Pages Router 中被忽略。

总结：标题失效不是代码错误，而是架构错配。选择 Pages Router 就用 Head 或 next-seo；拥抱未来就升级至 App Router 并善用原生 metadata。二者皆可实现稳定、可维护、SEO 友好的新闻站点。