在 Next.js 服务端渲染（SSR）项目中，export const metadata 可能因页面模式不匹配（如未启用 App Router 或使用 Pages Router）、动态路由冲突或构建配置问题而失效；本文详解根本原因并提供兼容 SSR 的可靠替代方案。
在 next.js 服务端渲染（ssr）项目中，`export const metadata` 可能因页面模式不匹配（如未启用 app router 或使用 pages router）、动态路由冲突或构建配置问题而失效；本文详解根本原因并提供兼容 ssr 的可靠替代方案。
Next.js 的 export const metadata 是 App Router（app 目录）专属特性，仅在采用 app/ 结构的路由系统中生效。而你的项目（NewsBlog-ssr）使用的是传统 Pages Router（pages/ 目录），该模式下 metadata 导出会被完全忽略——这正是标题始终不更新的根本原因。
✅ 正确做法：在 Pages Router 中，应通过
组件（来自 next/document 或 next/head）手动注入
和 SEO 标签：<pre class="brush:php;toolbar:false;">// pages/index.tsx
import Head from 'next/head';
export default function Home({ blogs }) {
return (
<title>News Website | Latest Updates</title><meta name="description" content="Breaking news, in-depth analysis, and trusted reporting."><meta property="og:title" content="News Website"><div classname="container">
<navbar></navbar>
{/* 页面内容 */}
</div>
>
);
}</pre>
<p>⚠️ 注意事项：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4292" title="jm-jsjkxyjs02-pzl-803"><img
src="https://img.php.cn/upload/skill/000/000/081/178998482628832.jpg" alt="jm-jsjkxyjs02-pzl-803" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4292" title="jm-jsjkxyjs02-pzl-803" class="overflowclass">jm-jsjkxyjs02-pzl-803</a>
<p class="overflowclass">查询全球任意城市的实时天气和未来天气预报</p>
</div>
<a rel="nofollow" href="/xiazai/skill4292" title="jm-jsjkxyjs02-pzl-803" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>若使用 getServerSideProps 进行 SSR， 仍可正常工作，且服务端会正确注入元信息；</li>
<li>避免在 _document.tsx 中硬编码全局 title（它不支持页面级动态覆盖）；</li>
<li>next/head 已在 Next.js 13.4+ 中被标记为 legacy，推荐升级至 next/document 的 Html, Head, Main, NextScript 组合，但 在 Pages Router 中仍是标准方案。</li>
</ul>
<p>? 更优方案：对于新闻类网站这类强 SEO 需求场景，建议集成 <a href="https://www.php.cn/link/674799a0755561627d8eeb4164dc1bf4" rel="nofollow" target="_blank">next-seo</a> —— 它专为 Pages Router 和 App Router 提供统一、类型安全、可复用的 SEO 配置：</p>
<pre class="brush:php;toolbar:false;">npm install next-seo</pre>
<pre class="brush:php;toolbar:false;">// pages/index.tsx
import { NextSeo } from 'next-seo';
export default function Home({ blogs }) {
return (
<nextseo title="Latest News | News Website" description="Real-time coverage of global events, politics, technology, and culture." opengraph="{{" type: url: title: website description: journalism updated hourly.></nextseo><div classname="container">
<navbar></navbar>
{/* 页面主体 */}
</div>
>
);
}</pre>
<p>? 总结： </p>
<ul>
<li>❌ export const metadata ≠ Pages Router 兼容 —— 它是 App Router 的语法糖； </li>
<li>✅ Pages Router 必须用 或 next-seo 实现服务端可渲染的动态标题； </li>
<li>? next-seo 不仅解决标题问题，还支持 Open Graph、Twitter Card、JSON-LD 等完整 SEO 能力，显著提升新闻站点的搜索引擎可见性与社交分享体验。<br>
迁移成本低、文档完善、社区活跃，是当前 Pages Router 项目的首选 SEO 工具。</li>
</ul>
