# 元数据优化指南

本指南详细介绍如何优化页面元数据以提升搜索引擎表现。

---

## 📋 目录

- [Title 标签优化](#title-标签优化)
- [Description 优化](#description-优化)
- [Open Graph 标签](#open-graph-标签)
- [Twitter Cards](#twitter-cards)
- [最佳实践](#最佳实践)

---

## Title 标签优化

### 长度建议

| 语言 | 建议长度 | 最大长度 | Google 显示 |
|------|---------|---------|-----------|
| 中文 | 20-30 字符 | 35 字符 | 约 24 个中文字符 |
| 英文 | 50-60 字符 | 70 字符 | 约 600 像素宽度 |

### Title 结构

**推荐格式：**

```
[主关键词] - [次要关键词] | [品牌名称]
```

**示例：**

```typescript
// ✅ 优秀的 Title
{
  title: 'SEO 优化完整指南 - Next.js SEO 最佳实践 | Claude Code SEO'
}

// ❌ 不好的 Title
{
  title: 'SEO指南'  // 过短，缺少关键词和品牌
}
```

### 关键词位置

将最重要的关键词放在 Title 的前面：

```typescript
// ✅ 关键词靠前
title: 'SEO 优化工具 - Next.js SEO 插件 | Claude'

// ❌ 关键词靠后
title: 'Claude - 一个用于 Next.js 的 SEO 优化工具'
```

### 使用命令生成

```bash
/metadata [页面路径]
```

---

## Description 优化

### 长度建议

| 语言 | 建议长度 | 最大长度 |
|------|---------|---------|
| 中文 | 70-80 字符 | 120 字符 |
| 英文 | 150-160 字符 | 180 字符 |

### Description 结构

**推荐要素：**

1. **核心价值** - 页面提供什么
2. **关键特点** - 2-3 个独特卖点
3. **行动号召** - 鼓励用户点击

**示例：**

```typescript
// ✅ 优秀的 Description
{
  description: '强大的 Claude Code SEO 插件，为 Next.js 项目提供全面的 SEO 优化支持。自动审计、元数据生成、结构化数据。立即提升搜索排名！'
}

// ❌ 不好的 Description
{
  description: '这是一个关于 SEO 的网站'  // 过短，无价值主张
}
```

### 避免关键词堆砌

```typescript
// ❌ 关键词堆砌
description: 'SEO, SEO工具, SEO优化, Next.js SEO, SEO插件, SEO指南'

// ✅ 自然表达
description: '专业的 SEO 优化工具，帮助 Next.js 开发者快速提升搜索引擎排名。支持自动审计、智能分析和实时优化。'
```

---

## Open Graph 标签

### 基本标签

```typescript
export const metadata = {
  openGraph: {
    title: '页面标题',
    description: '页面描述',
    url: 'https://yourdomain.com/page',
    siteName: '网站名称',
    images: [{
      url: 'https://yourdomain.com/og-image.jpg',
      width: 1200,
      height: 630,
      alt: '图片描述',
    }],
    locale: 'zh_CN',
    type: 'website',
  },
}
```

### OG 图片规格

| 平台 | 推荐尺寸 | 文件大小 | 格式 |
|------|---------|---------|------|
| Facebook | 1200x630px | < 8MB | JPG/PNG |
| LinkedIn | 1200x627px | < 5MB | JPG/PNG |
| 通用 | 1200x630px | < 8MB | JPG/PNG |

### 不同类型的 OG 标签

**文章：**
```typescript
openGraph: {
  type: 'article',
  publishedTime: '2025-01-04T00:00:00Z',
  authors: ['作者姓名'],
  section: '分类',
  tags: ['标签1', '标签2'],
}
```

**视频：**
```typescript
openGraph: {
  type: 'video.other',
  videos: [{
    url: 'https://yourdomain.com/video.mp4',
    width: 1280,
    height: 720,
  }],
}
```

---

## Twitter Cards

### Card 类型选择

**Summary Card:**
```typescript
twitter: {
  card: 'summary',
  title: '标题',
  description: '描述',
  images: ['https://yourdomain.com/image.jpg'],
}
```

**Summary Card with Large Image:**
```typescript
twitter: {
  card: 'summary_large_image',
  title: '标题',
  description: '描述',
  images: ['https://yourdomain.com/large-image.jpg'],
}
```

### Twitter 图片规格

| Card 类型 | 推荐尺寸 | 文件大小 |
|-----------|---------|---------|
| summary | 144x144px | < 5MB |
| summary_large_image | 1200x600px | < 5MB |

---

## 最佳实践

### 1. 每个页面唯一的元数据

```typescript
// ❌ 所有页面使用相同的 Title
title: '我的网站'

// ✅ 每个页面不同的 Title
// app/page.tsx
title: 'SEO 优化工具 - Claude Code SEO'

// app/about/page.tsx
title: '关于我们 - Claude Code SEO 团队'
```

### 2. 品牌一致性

```typescript
// 确定品牌名称格式
const BRAND_NAME = 'Claude Code SEO';

// 所有页面保持一致
title: `页面标题 - ${BRAND_NAME}`
```

### 3. 动态生成元数据

```typescript
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);

  return {
    title: `${post.title} - Claude Code SEO 博客`,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.ogImage],
    },
  };
}
```

### 4. 避免重复

```typescript
// ❌ Title 和 Description 相同
{
  title: 'SEO 优化工具',
  description: 'SEO 优化工具'
}

// ✅ Description 提供更多价值
{
  title: 'SEO 优化工具 - Claude Code SEO',
  description: '专业的 SEO 优化工具，帮助 Next.js 开发者快速提升搜索引擎排名。支持自动审计、智能分析和实时优化。'
}
```

---

## 🔧 实用命令

```bash
# 生成元数据
/metadata [页面路径]

# 检查元数据
/seo-check

# 完整审计
/seo-audit
```

---

## 📚 相关资源

- [Google Title 链接说明](https://developers.google.com/search/docs/appearance/title-link)
- [Meta Description 最佳实践](https://developers.google.com/search/docs/appearance/snippet#meta-descriptions)
- [Open Graph 协议](http://ogp.me/)
- [Twitter Cards 文档](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards)

---

**相关指南：**
- [结构化数据指南](structured-data.md)
- [评分系统 - 元数据完整性](../scoring-system.md#1-元数据完整性20-分)

---

**需要帮助？** 访问 [GitHub Issues](https://github.com/huifer/claude-code-seo/issues)