Next.js优化seo第一步，Metadata

在 Next.js（App Router）中，export const metadata 是用于定义页面元数据的标准方式，它会自动生成 HTML 的 <head> 标签内容。以下是详细说明和使用案例：

一、核心作用

SEO 优化：定义标题、描述、关键词等搜索引擎优化信息
社交分享优化：设置 Open Graph 和 Twitter 卡片数据
页面基础配置：管理视口设置、主题颜色、favicon 等
结构化数据：添加 JSON-LD 等结构化数据
自动注入：自动处理 <head> 标签的嵌套和合并

二、基础使用案例

// app/about/page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: '关于我们 - 企业官网',
  description: '了解我们公司的发展历程和核心价值',
  keywords: ['企业简介', '发展历史', '公司文化'],
  openGraph: {
    title: '关于我们 - 企业官网',
    description: '探索我们的企业故事',
    images: '/og-about.png',
  },
  themeColor: '#3b82f6',
  alternates: {
    canonical: 'https://example.com/about',
    languages: {
      'en-US': 'https://example.com/en/about',
    },
  },
  robots: {
    index: true,
    follow: true,
    nocache: false,
    googleBot: {
      'index': true,
      'follow': true,
      'noimageindex': true,
    },
  },
}

export default function AboutPage() {
  return (
    <main>
      {/* 页面内容 */}
    </main>
  )
}

三、高级功能示例

1. 动态元数据（基于路由参数）

// app/products/[id]/page.tsx
import type { Metadata, ResolvingMetadata } from 'next'

type Props = {
  params: { id: string }
}

export async function generateMetadata(
  { params }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const product = await fetchProduct(params.id)
  
  return {
    title: `${product.name} - 产品详情`,
    description: product.description,
    openGraph: {
      images: [product.imageUrl],
    },
  }
}

2. 文件元数据（替代 favicon.ico）

// app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon.ico' },
      { url: '/favicon-dark.ico', media: '(prefers-color-scheme: dark)' },
    ],
    apple: '/apple-icon.png',
  },
}

3. 结构化数据（JSON-LD）

// app/products/[id]/page.tsx
export const metadata: Metadata = {
  other: {
    'application/ld+json': {
      '@context': 'https://schema.org',
      '@type': 'Product',
      name: '产品名称',
      image: 'product-image.jpg',
      description: '产品描述',
    },
  },
}

四、继承与覆盖规则

布局继承：子页面会继承父布局的元数据
字段合并：
- 数组字段（如 keywords）会自动合并
- 字符串字段（如 title）会被子级覆盖
完全覆盖：使用 metadataBase 统一管理基础 URL

   // app/layout.tsx
   export const metadata: Metadata = {
     metadataBase: new URL('https://example.com'),
     alternates: {
       canonical: '/', // 自动补全为 https://example.com/
     }
   }

五、注意事项

命名规范：必须使用固定变量名 metadata
类型检查：建议使用 TypeScript 的 Metadata 类型
动态生成限制：generateMetadata 只能用在页面组件
性能优化：静态元数据会自动静态优化
特殊字符处理：自动处理 HTML 实体转义

六、生成效果示例

上述案例最终会生成：

<head>
  <title>关于我们 - 企业官网</title>
  <meta name="description" content="了解我们公司的发展历程和核心价值">
  <meta name="keywords" content="企业简介,发展历史,公司文化">
  <meta property="og:title" content="关于我们 - 企业官网">
  <meta property="og:description" content="探索我们的企业故事">
  <meta property="og:image" content="/og-about.png">
  <meta name="theme-color" content="#3b82f6">
  <link rel="canonical" href="https://example.com/about">
  <!-- 其他自动生成的 meta 标签 -->
</head>

通过这种方式，Next.js 的 Metadata 系统提供了类型安全、高度可定制且易于维护的元数据管理方案，同时支持静态生成和动态加载两种模式，能够满足从简单页面到复杂应用的各类需求。

最后修改于 2025-02-11