5.8 KiB
5.8 KiB
元数据优化指南
本指南详细介绍如何优化页面元数据以提升搜索引擎表现。
📋 目录
Title 标签优化
长度建议
| 语言 | 建议长度 | 最大长度 | Google 显示 |
|---|---|---|---|
| 中文 | 20-30 字符 | 35 字符 | 约 24 个中文字符 |
| 英文 | 50-60 字符 | 70 字符 | 约 600 像素宽度 |
Title 结构
推荐格式：
[主关键词] - [次要关键词] | [品牌名称]
示例：
// ✅ 优秀的 Title
{
title: 'SEO 优化完整指南 - Next.js SEO 最佳实践 | Claude Code SEO'
}
// ❌ 不好的 Title
{
title: 'SEO指南' // 过短，缺少关键词和品牌
}
关键词位置
将最重要的关键词放在 Title 的前面：
// ✅ 关键词靠前
title: 'SEO 优化工具 - Next.js SEO 插件 | Claude'
// ❌ 关键词靠后
title: 'Claude - 一个用于 Next.js 的 SEO 优化工具'
使用命令生成
/metadata [页面路径]
Description 优化
长度建议
| 语言 | 建议长度 | 最大长度 |
|---|---|---|
| 中文 | 70-80 字符 | 120 字符 |
| 英文 | 150-160 字符 | 180 字符 |
Description 结构
推荐要素：
- 核心价值 - 页面提供什么
- 关键特点 - 2-3 个独特卖点
- 行动号召 - 鼓励用户点击
示例：
// ✅ 优秀的 Description
{
description: '强大的 Claude Code SEO 插件，为 Next.js 项目提供全面的 SEO 优化支持。自动审计、元数据生成、结构化数据。立即提升搜索排名！'
}
// ❌ 不好的 Description
{
description: '这是一个关于 SEO 的网站' // 过短，无价值主张
}
避免关键词堆砌
// ❌ 关键词堆砌
description: 'SEO, SEO工具, SEO优化, Next.js SEO, SEO插件, SEO指南'
// ✅ 自然表达
description: '专业的 SEO 优化工具，帮助 Next.js 开发者快速提升搜索引擎排名。支持自动审计、智能分析和实时优化。'
Open Graph 标签
基本标签
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 图片规格
| 平台 | 推荐尺寸 | 文件大小 | 格式 |
|---|---|---|---|
| 1200x630px | < 8MB | JPG/PNG | |
| 1200x627px | < 5MB | JPG/PNG | |
| 通用 | 1200x630px | < 8MB | JPG/PNG |
不同类型的 OG 标签
文章：
openGraph: {
type: 'article',
publishedTime: '2025-01-04T00:00:00Z',
authors: ['作者姓名'],
section: '分类',
tags: ['标签1', '标签2'],
}
视频：
openGraph: {
type: 'video.other',
videos: [{
url: 'https://yourdomain.com/video.mp4',
width: 1280,
height: 720,
}],
}
Twitter Cards
Card 类型选择
Summary Card:
twitter: {
card: 'summary',
title: '标题',
description: '描述',
images: ['https://yourdomain.com/image.jpg'],
}
Summary Card with Large Image:
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. 每个页面唯一的元数据
// ❌ 所有页面使用相同的 Title
title: '我的网站'
// ✅ 每个页面不同的 Title
// app/page.tsx
title: 'SEO 优化工具 - Claude Code SEO'
// app/about/page.tsx
title: '关于我们 - Claude Code SEO 团队'
2. 品牌一致性
// 确定品牌名称格式
const BRAND_NAME = 'Claude Code SEO';
// 所有页面保持一致
title: `页面标题 - ${BRAND_NAME}`
3. 动态生成元数据
// 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. 避免重复
// ❌ Title 和 Description 相同
{
title: 'SEO 优化工具',
description: 'SEO 优化工具'
}
// ✅ Description 提供更多价值
{
title: 'SEO 优化工具 - Claude Code SEO',
description: '专业的 SEO 优化工具，帮助 Next.js 开发者快速提升搜索引擎排名。支持自动审计、智能分析和实时优化。'
}
🔧 实用命令
# 生成元数据
/metadata [页面路径]
# 检查元数据
/seo-check
# 完整审计
/seo-audit
📚 相关资源
相关指南：
需要帮助？ 访问 GitHub Issues