SEO 优化

搜索引擎优化（SEO）对于网站的可见性至关重要。在这一部分，我们将学习如何使用 Next.js 的 Metadata API 来优化 SEO，添加 Open Graph 标签，实现结构化数据，并创建 sitemap。虽然我们看不见，但是搜索引擎会根据我们的网站内容，来决定我们的网站在搜索引擎中的排名。

SEO 优化

理解 Next.js Metadata API

Next.js 提供了强大的 Metadata API，让你可以轻松地为每个页面配置元数据。元数据包括标题、描述、关键词等，这些信息对 SEO 非常重要。让我们从基础的元数据配置开始：

|
// app/layout.tsx
import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: 'Free Education - 免费教育资源平台',
  description: '为每个人提供免费、高质量的教育资源，涵盖编程、设计、商业等多个领域',
  keywords: ['免费教育', '在线学习', '编程课程', '在线课程'],
}
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  )
}

这是根布局的元数据，会应用到所有页面。我们还可以为每个页面设置特定的元数据。

为页面设置元数据

每个页面都可以导出自己的 metadata 对象来覆盖或扩展根布局的元数据，例如我们可以为我们的课程页面设置特定的元数据：

|
// app/courses/page.tsx
import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '所有课程 - Free Education',
  description: '浏览我们的免费课程库，涵盖编程、设计、商业等多个领域',
  openGraph: {
    title: '所有课程 - Free Education',
    description: '浏览我们的免费课程库',
    type: 'website',
  },
}
 
export default function CoursesPage() {

Open Graph 标签用于社交媒体分享。当用户在社交媒体上分享你的网站链接时，这些标签决定了显示的标题、描述和图片。

动态元数据

在实际开发中，单纯的静态元数据往往无法满足需求。比如，在课程详情页，我们希望页面的标题、描述等元信息能够随着所查看的具体课程动态变化。这时就需要“动态生成元数据”——也就是说，在页面渲染时，根据所获取到的数据（如课程标题、简介、图片等），动态构建出适合当前内容的元数据。这样不仅提升了页面在搜索引擎和社交媒体的表现，还能带来更好的用户体验和信息展示效果。

|
// app/courses/[id]/page.tsx
import type { Metadata } from 'next'
 
export async function generateMetadata({ params }: { params: { id: string } }): Promise<Metadata> {
  const course = await getCourse(params.id)
  
  return {
    title: `${course.

generateMetadata 函数允许我们根据路由参数动态生成元数据。这对于动态路由页面特别有用。

添加 Open Graph 标签

Open Graph（OG）标签是一组用于提升网页在社交媒体（如微信、QQ、微博、Facebook、Twitter 等）分享展示效果的特殊元数据。它们可以让你的页面在被分享时自动显示指定的标题、描述、图片乃至站点名称，从而吸引更多用户点击，提高传播效果。

通过合理配置 Open Graph，分享链接时将不会只显示枯燥的网址或默认信息，而是以自定义的卡片形式呈现丰富内容（包括自定义缩略图、标题、描述）。这对于推广教育平台、提升品牌曝光非常重要。

接下来我们将进一步完善 Open Graph 配置，确保每一个页面在社交媒体分享时都拥有吸引人的展示效果：

|
// app/layout.tsx
import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: {
    default: 'Free Education - 免费教育资源平台',
    template: '%s | Free Education',
  },
  description: '为每个人提供免费、高质量的教育资源',
  keywords: ['免费教育', '在线学习', '编程课程'],
  authors: [{ name: 'Free Education Team' }],
  creator: 'Free Education',

这里我们配置了完整的 Open Graph 和 Twitter Card 标签，以及 robots 元标签来控制搜索引擎爬虫的行为。

实现结构化数据

结构化数据（Schema.org）是一种语义标记方式，可以让搜索引擎“读懂”你网页上的具体内容（例如课程、文章、作者等），而不是仅仅通过关键词分析页面。通过添加结构化数据，搜索引擎有能力识别出页面上的对象类型和属性，从而在搜索结果中以富文本卡片（Rich Snippet）的形式呈现，比如在课程搜索中显示评分、课程时间、机构等详细信息，提高点击率和曝光度。

在 Next.js 中，我们通常使用 JSON-LD 格式，将结构化数据以 <script type="application/ld+json"> 的形式插入页面中。这样既不会影响页面显示，又能最大程度帮助搜索引擎爬虫捕获这些关键信息。

|
// app/courses/[id]/page.tsx
export default async function CoursePage({ params }: { params: { id: string } }) {
  const course = await getCourse(params.id)
  
  const structuredData = {
    '@context': 'https://schema.org',
    '@type': 'Course',
    name: course.title,
    description: course.description,

结构化数据可以显著提升 SEO 表现，特别是对于教育类网站。

创建 Sitemap

Sitemap（网站地图）是一个专门给搜索引擎看的网页文件，里面详细列出了你网站的所有页面地址，相当于给搜索引擎爬虫指路，让它们可以不遗漏地抓取和收录你的全部内容。尤其是对于页面较多或者页面结构层级比较深的网站，sitemap 非常重要。

在 Next.js 中，我们可以通过创建一个专门的 sitemap.ts 文件，自动生成 sitemap 文件（通常路径是 /sitemap.xml）。这样一来，不论是网站的静态页面还是动态页面（比如课程详情页），都能被搜索引擎自动发现和索引，提高被搜到的机会：

|
// app/sitemap.ts
import { MetadataRoute } from 'next'
 
export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = 'https://freeeducation.com'
  
  // 静态页面
  const staticPages = [
    {
      url: baseUrl,
      lastModified: new Date(),
      changeFrequency: 'daily' as const,
      priority:

这个文件会自动生成 /sitemap.xml，搜索引擎可以访问它来发现所有页面。

创建 robots.txt

robots.txt 是一个网站根目录下的文本文件，专门用于告知搜索引擎爬虫（Robot/Spider）：哪些页面、目录允许抓取，哪些内容应当避免索引。它的主要作用是引导搜索引擎规范地访问你的网站资源，防止敏感或无关页面被展示在搜索结果中。例如，你可以允许爬虫访问课程和首页，但禁止其抓取后台管理页面或 API 接口。合理配置 robots.txt 不仅有助于保护隐私和安全，还能够将搜索引擎的抓取资源聚焦于核心内容，从而提升 SEO 效果。

|
// app/robots.ts
import { MetadataRoute } from 'next'
 
export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: ['/api/', '/admin/'],
    },
    sitemap: 'https://freeeducation.com/sitemap.xml',
  }
}

这个文件会自动生成 /robots.txt。

SEO 最佳实践总结

最佳实践	说明
使用描述性的标题	每个页面都应该有独特、描述性的标题
编写吸引人的描述	元描述应该简洁、吸引人，包含关键词
使用结构化数据	帮助搜索引擎理解内容
优化图片	使用 alt 文本，优化图片大小
创建 sitemap	帮助搜索引擎发现所有页面
使用语义化 HTML	正确使用 HTML5 语义标签
确保移动端友好	响应式设计对 SEO 很重要
提升页面速度	快速加载的页面排名更高

下一步

这里我们简单学习了如何实现 SEO 优化，包括元数据配置、Open Graph 标签、结构化数据和 sitemap。在下一个部分也是我们最终的目的，我们将讲解一些部署到生产环境的方法，这样不仅仅我们能访问，别人也能访问我们的网站了！