适用于 Next.js 15（App Router） 的 SEO 全流程优化指南，包括页面级 SEO、站点级 SEO、组件优化、性能优化、结构化数据、国际化等内容。
1. 页面级 SEO
1.1 使用 metadata 配置页面 SEO
// app/page.tsx
export const metadata = {
title: "首页标题 | 品牌词",
description: "页面描述，建议 50~160 字。",
keywords: ["关键词1", "关键词2"],
openGraph: {
title: "OG 标题",
description: "OG 描述",
url: "https://xxx.com",
images: [{ url: "/og.jpg" }],
},
alternates: {
canonical: "https://xxx.com",
},
};
1.2 动态页面 SEO（如文章详情）
// app/blog/[id]/page.tsx
export async function generateMetadata({ params }) {
const data = await getPost(params.id);
return {
title: data.title,
description: data.summary,
openGraph: {
images: data.cover,
},
alternates: {
canonical: `https://xxx.com/blog/${params.id}`,
},
};
}
2. 渲染模式与 SEO
| 渲染方式 |
SEO 效果 |
适用场景 |
| SSR（默认） |
⭐⭐⭐⭐ |
动态数据页面 |
| SSG |
⭐⭐⭐⭐⭐ |
静态内容、博客 |
| ISR |
⭐⭐⭐⭐⭐ |
内容频繁更新页面 |
ISR 使用示例
export const revalidate = 60; // 页面缓存 60 秒
3. URL 结构优化
- 使用语义化目录：
/blog/xxx
- 避免 query 作主要结构：
/search?q=xxx
- URL 小写、简短、语义化
4. 站点级 SEO
4.1 robots.txt
// app/robots.ts
export default function Robots() {
return {
rules: [{ userAgent: "*", allow: "/" }],
sitemap: "https://xxx.com/sitemap.xml",
};
}
4.2 sitemap.xml 自动生成
// app/sitemap.ts
export default async function sitemap() {
const posts = await getPosts();
return [
{ url: "https://xxx.com", lastModified: new Date() },
...posts.map(p => ({
url: `https://xxx.com/blog/${p.id}`,
lastModified: p.updated_at,
})),
];
}
5. 组件级 SEO
5.1 使用语义标签
<main>
<article>
<header>
<footer>
<section>
<nav>
5.2 使用 next/image 优化图片
<Image src="/hero.png" alt="banner" width={800} height={600} />
5.3 延迟加载非关键组件
const Comments = dynamic(() => import('./Comments'), { ssr: false });
6. 性能优化（SEO 强关联）
- 仅在必要组件使用
use client
- 使用
next/image（自动压缩、lazyload、webp）
- 减少 API 延迟：Edge Runtime、Server Actions
- 打包体积优化（减少第三方库）
7. 国际化 SEO（可选）
export const metadata = {
alternates: {
canonical: "https://xxx.com",
languages: {
"en-US": "https://xxx.com/en",
"zh-CN": "https://xxx.com/zh",
},
},
};
8. 结构化数据（Rich Snippets）
<script type="application/ld+json">
{JSON.stringify({
"@context": "https://schema.org",
"@type": "Article",
headline: title,
datePublished: created,
dateModified: updated,
author: { "@type": "Person", name: "作者名" }
})}
</script>
9. 上线前 SEO Checklist
| 项目 |
状态 |
| 页面 metadata 配置完整 |
☐ |
| sitemap.xml 正常生成 |
☐ |
| robots.txt 正常访问 |
☐ |
| canonical 链接填写 |
☐ |
| OG 信息正常 |
☐ |
| 渲染方式：SSR/SSG/ISR |
☐ |
| URL 语义化 |
☐ |
| 图片全部用 next/image |
☐ |
| lighthouse ≥ 90 |
☐ |
| 结构化数据（可选） |
☐ |
10. metadata 字段说明
| 字段 |
作用 |
| title |
页面标题 |
| description |
SEO 摘要 |
| keywords |
关键词（影响极弱，可选） |
| openGraph |
社交媒体分享卡片信息 |
| alternates.canonical |
主 URL，用于防止重复页面降权 |
| alternates.languages |
多语言 SEO |
11. 推荐实践总结
- 优先 SSR 或 SSG 渲染关键内容
- metadata + canonical + sitemap + robots.txt 配置完整
- URL 简短语义化，避免重复
- 使用 next/image、语义化标签和动态加载优化性能
- 配置 OpenGraph 和结构化数据提升社交分享与搜索展示效果
- 国际化站点务必设置语言 alternates
- 定期使用 Lighthouse 或 PageSpeed 检测性能
登录
