/metadata

description: 生成或优化页面的元数据
argument-hint: [page-path]

为指定页面生成 SEO 友好的元数据，包括 Title、Meta Description、Open Graph 标签和 Twitter Cards 标签。

功能

根据页面内容自动生成：

• ✅ 优化的 Title 标签
• ✅ 吸引人的 Meta Description
• ✅ 完整的 Open Graph 标签
• ✅ Twitter Cards 标签
• ✅ Canonical URL
• ✅ 其他有用的 meta 标签

参数

• `$1` 或 `$ARGUMENTS`: 页面路径（必需）
• 可以是文件路径
• 可以是 URL 路径
• 示例：`app/about/page.tsx`、`/about`、`about`

支持的框架/模式

Next.js App Router

// app/[path]/page.tsx
import { Metadata } from 'next'

export const metadata: Metadata = {
  title: '...',
  description: '...',
  openGraph: {
    title: '...',
    description: '...',
    images: ['/og-image.jpg'],
  },
}

Next.js Pages Router

// pages/[path].tsx
import Head from 'next/head'

export default function Page() {
  return (
    <Head>
      <title>...</title>
      <meta name="description" content="..." />
      {/* Other meta tags */}
    </Head>
  )
}

纯 HTML

<head>
  <title>...</title>
  <meta name="description" content="..." />
  <!-- Other meta tags -->
</head>

使用示例

示例 1：为关于页面生成元数据

/metadata app/about/page.tsx

输出：

# 为关于页面生成的元数据

## 基本信息
- 页面类型：关于页面
- 检测语言：中文
- 目标关键词：关于我们、团队、公司介绍

## App Router 实现

将以下代码添加到 `app/about/page.tsx`：

\`\`\`typescript
import { Metadata } from 'next'

export const metadata: Metadata = {
  title: '关于我们 | YourBrand - 专业团队介绍',
  description: '了解我们的专业团队、公司使命和价值观。我们致力于为客户提供优质的服务，拥有10年行业经验。立即联系我们了解更多！',
  keywords: ['关于我们', '团队介绍', '公司使命', 'YourBrand'],
  authors: [{ name: 'YourBrand Team', url: 'https://yourbrand.com/team' }],
  creator: 'YourBrand',
  publisher: 'YourBrand',

  openGraph: {
    type: 'website',
    locale: 'zh_CN',
    url: 'https://yourbrand.com/about',
    title: '关于我们 | YourBrand',
    description: '了解我们的专业团队、公司使命和价值观。我们致力于为客户提供优质的服务，拥有10年行业经验。',
    siteName: 'YourBrand',
    images: [
      {
        url: 'https://yourbrand.com/images/og-about.jpg',
        width: 1200,
        height: 630,
        alt: '关于我们 - YourBrand',
      },
    ],
  },

  twitter: {
    card: 'summary_large_image',
    title: '关于我们 | YourBrand - 专业团队介绍',
    description: '了解我们的专业团队、公司使命和价值观。我们致力于为客户提供优质的服务，拥有10年行业经验。',
    images: ['https://yourbrand.com/images/og-about.jpg'],
    creator: '@yourbrand',
  },

  alternates: {
    canonical: 'https://yourbrand.com/about',
  },
}
\`\`\`

## Pages Router 实现

将以下代码添加到 `pages/about.tsx`：

\`\`\`typescript
import Head from 'next/head'

export default function AboutPage() {
  return (
    <Head>
      <title>关于我们 | YourBrand - 专业团队介绍</title>
      <meta name="description" content="了解我们的专业团队、公司使命和价值观。我们致力于为客户提供优质的服务，拥有10年行业经验。立即联系我们了解更多！" />
      <meta name="keywords" content="关于我们,团队介绍,公司使命,YourBrand" />

      {/* Open Graph */}
      <meta property="og:type" content="website" />
      <meta property="og:locale" content="zh_CN" />
      <meta property="og:url" content="https://yourbrand.com/about" />
      <meta property="og:title" content="关于我们 | YourBrand" />
      <meta property="og:description" content="了解我们的专业团队、公司使命和价值观。我们致力于为客户提供优质的服务，拥有10年行业经验。" />
      <meta property="og:site_name" content="YourBrand" />
      <meta property="og:image" content="https://yourbrand.com/images/og-about.jpg" />
      <meta property="og:image:width" content="1200" />
      <meta property="og:image:height" content="630" />
      <meta property="og:image:alt" content="关于我们 - YourBrand" />

      {/* Twitter Card */}
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content="关于我们 | YourBrand - 专业团队介绍" />
      <meta name="twitter:description" content="了解我们的专业团队、公司使命和价值观。我们致力于为客户提供优质的服务，拥有10年行业经验。" />
      <meta name="twitter:image" content="https://yourbrand.com/images/og-about.jpg" />
      <meta name="twitter:creator" content="@yourbrand" />

      {/* Canonical */}
      <link rel="canonical" href="https://yourbrand.com/about" />
    </Head>
  )
}
\`\`\`

## 优化说明

✅ Title 长度：26 字符（建议：20-30）✓
✅ Description 长度：78 字符（建议：70-80）✓
✅ 包含主要关键词：关于我们✓
✅ 包含行动号召：立即联系我们✓
✅ 包含品牌名称：YourBrand✓

## 下一步

1. 更新文件中的元数据
2. 创建或更新 OG 图片（1200x630px）
3. 在社交媒体上测试预览效果
4. 使用 /seo-check 验证

需要我调整任何内容吗？

示例 2：为博客文章生成元数据

/metadata app/blog/nextjs-seo-guide/page.tsx

输出：

# 为博客文章生成的元数据

## 基本信息
- 页面类型：博客文章
- 文章标题：Next.js SEO 完全指南
- 检测语言：中文
- 目标关键词：Next.js SEO、搜索引擎优化

## 推荐元数据

\`\`\`typescript
import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Next.js SEO 完全指南：从入门到精通 | YourBrand',
  description: '深入了解如何在 Next.js 项目中实现 SEO 优化。涵盖元数据、结构化数据、性能优化和最佳实践。提升网站排名，吸引更多流量！',
  keywords: ['Next.js SEO', '搜索引擎优化', 'React SEO', 'SSR SEO', 'SSG SEO'],
  authors: [{ name: '张三', url: 'https://yourbrand.com/author/zhangsan' }],
  creator: '张三',

  article: {
    publishedTime: '2024-01-15T00:00:00Z',
    modifiedTime: '2024-01-15T00:00:00Z',
    expirationTime: '2025-01-15T00:00:00Z',
    authors: ['张三'],
    tags: ['Next.js', 'SEO', 'Web开发'],
  },

  openGraph: {
    type: 'article',
    url: 'https://yourbrand.com/blog/nextjs-seo-guide',
    title: 'Next.js SEO 完全指南：从入门到精通',
    description: '深入了解如何在 Next.js 项目中实现 SEO 优化。涵盖元数据、结构化数据、性能优化和最佳实践。',
    siteName: 'YourBrand Blog',
    images: [
      {
        url: 'https://yourbrand.com/images/blog/nextjs-seo.jpg',
        width: 1200,
        height: 630,
        alt: 'Next.js SEO 完全指南封面图',
      },
    ],
    publishedTime: '2024-01-15T00:00:00Z',
    authors: ['张三'],
  },

  twitter: {
    card: 'summary_large_image',
    title: 'Next.js SEO 完全指南：从入门到精通',
    description: '深入了解如何在 Next.js 项目中实现 SEO 优化。涵盖元数据、结构化数据、性能优化和最佳实践。',
    images: ['https://yourbrand.com/images/blog/nextjs-seo.jpg'],
  },

  alternates: {
    canonical: 'https://yourbrand.com/blog/nextjs-seo-guide',
  },
}
\`\`\`

## JSON-LD 结构化数据建议

建议同时添加 Article Schema：

\`\`\`typescript
const jsonLd = {
  '@context': 'https://schema.org',
  '@type': 'Article',
  headline: 'Next.js SEO 完全指南：从入门到精通',
  description: '深入了解如何在 Next.js 项目中实现