RaytonX Learn

Next.js SEO 总览与实践路径

SEO 本质是让 搜索引擎能稳定获取结构清晰的页面内容，并理解页面主题。在 Next.js 项目中，SEO 可以拆成几块来逐步完成。

一、站点基础配置

主要目的是：搜索引擎如何理解你的网站，让搜索引擎能“进入你的网站，并知道有哪些页面”。

主要包括：

  • Metadata 基础配置

    • metadataBase
    • title / description
    • openGraph / twitter
    • canonical
    • icons

  • robots.txt

    • Allow / Disallow
    • 声明 sitemap

  • sitemap.xml

    • 包含课程页、课时页
    • lastModified / 更新频率

二、内容页面优化

每个页面都应该是“可被单独索引”的

主要针对课程页、课时页：

  • 使用 generateMetadata 覆盖 Metadata
  • 动态生成 title / description
  • 设置 canonical
  • 配置 Open Graph（或生成 OG Image）

三、内容可抓取性

  • 使用 generateStaticParams 生成页面
  • 优先 SSG / ISR
  • 避免不必要的动态渲染
  • 页面正文必须是 服务端直接输出的 HTML

四、结构化数据

让搜索引擎更准确理解页面类型：

  • Organization（站点信息）
  • BreadcrumbList（面包屑）
  • Article / TechArticle / Course

五、站内结构

SEO 不只是页面本身，还包括页面之间的关系，体现页面之间“可遍历的结构”：

  • 课程 → 课时 的层级结构
  • 上一节 / 下一节导航
  • 相关推荐内容
  • 面包屑导航

六、上线后的验证与提交

上线后需要确认搜索引擎能正常解析：

  • 提交到 Google Search Console
  • 使用 Rich Results Test 检查结构化数据
  • 使用 URL Inspection 查看收录情况

一个简单的理解方式

可以把整个 SEO 拆成三件事：

  1. 能不能被访问（robots / sitemap）
  2. 页面是不是独立可读（metadata + 内容）
  3. 结构是否清晰（链接 + 数据结构）

后面的课程会配合 raytonx-learn 项目的SEO改造，逐步展开实现细节。