296 lines
5.8 KiB
Markdown
296 lines
5.8 KiB
Markdown
# 元数据优化指南
|
|
|
|
本指南详细介绍如何优化页面元数据以提升搜索引擎表现。
|
|
|
|
---
|
|
|
|
## 📋 目录
|
|
|
|
- [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)
|