Next.js SEO 优化完整方案

适用于 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. 推荐实践总结

1. 优先 SSR 或 SSG 渲染关键内容
2. metadata + canonical + sitemap + robots.txt 配置完整
3. URL 简短语义化，避免重复
4. 使用 next/image、语义化标签和动态加载优化性能
5. 配置 OpenGraph 和结构化数据提升社交分享与搜索展示效果
6. 国际化站点务必设置语言 alternates
7. 定期使用 Lighthouse 或 PageSpeed 检测性能