
在 Next.js 服务端渲染(SSR)项目中,export const metadata 在 App Router 下才原生支持;若使用 Pages Router(如 pages/index.js),该语法无效,需改用 next-seo 或 手动注入 SEO 标签。
在 next.js 服务端渲染(ssr)项目中,`export const metadata` 在 app router 下才原生支持;若使用 pages router(如 `pages/index.js`),该语法无效,需改用 `next-seo` 或 `
` 手动注入 seo 标签。Next.js 的 export const metadata 是 App Router(基于 app/ 目录)专属特性,不适用于传统 Pages Router(pages/ 目录)项目。从你提供的仓库链接(NewsBlog-ssr)及代码结构可见,该项目采用的是 Pages Router(如 pages/index.js),因此直接声明 export const metadata = { title: "TEST" } 完全被忽略——这是设计限制,而非配置错误。
✅ 正确解决方案如下:
方案一:升级至 App Router(推荐长期演进)
将页面迁移至 app/ 目录,例如:
// app/page.tsx
export const metadata = {
title: "Latest News | TEST",
description: "Breaking news and in-depth analysis from around the world."
};
export default function HomePage() {
return <main>...</main>;
}
✅ 优势:原生支持、类型安全、自动注入
方案二:Pages Router 下的可靠替代方案(立即生效)
使用社区成熟库 next-seo(专为 Pages Router 设计):
npm install next-seo
在页面组件中引入并配置:
// pages/index.js
import { NextSeo } from 'next-seo';
export default function Home({ blogs }) {
return (
<nextseo title="News Website - Home" description="Your trusted source for real-time news and analysis." opengraph="{{" type: locale: url:></nextseo><div classname="container">
<navbar></navbar>
{/* 其余内容 */}
</div>
>
);
}
⚠️ 注意:
方案三:轻量级手动注入(适合简单场景)
若仅需动态
import Head from 'next/head';
export default function Home() {
return (
<title>News Website - Home</title><meta name="description" content="Latest headlines and updates"><main>...</main>>
);
}
⚠️ 注意:next/head 在 SSR 中有效,但不支持 Open Graph、Twitter Card 等高级 SEO 属性,扩展性有限。
关键总结
- ❌ export const metadata 在 pages/ 下永不生效,非 Bug,是架构差异;
- ✅ Pages Router 项目请统一使用 next-seo(生产级推荐)或 next/head(基础需求);
- ? 迁移至 App Router 是未来兼容性与功能性的最优路径,尤其对新闻类网站的多语言、动态路由 SEO 至关重要;
- ? 验证方式:查看页面源代码(右键 → “查看页面源代码”),确认
是否出现在 中——SSR 渲染结果应直接包含该标签,而非仅客户端 JS 注入。
立即检查你的 next.config.js 是否启用了 output: 'standalone' 或 unstable_allowDynamic 等可能干扰 Head 渲染的配置,并确保无全局
覆盖逻辑。修复后,新闻页面标题将准确反映内容,显著提升搜索引擎可见性与用户体验。











