❌

普通视图

发现新文章，点击刷新页面。
今天 — 2025年11月28日首页

Next.js SEO 优化完整方案

✇掘金 前端
作者 七淮
2025年11月28日 17:51

适用于 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 检测性能
❌
❌