Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From claude-seo-assistant
Generates SEO-friendly metadata including title, meta description, Open Graph, Twitter Cards, and canonical URL for a specified page path. Outputs code for Next.js App Router, Pages Router, or HTML.
npx claudepluginhub huifer/claude-code-seoHow this command is triggered — by the user, by Claude, or both
Slash command
/claude-seo-assistant:metadata page-pathThe summary Claude sees in its command listing — used to decide when to auto-load this command
为指定页面生成 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 ### Next.js Pages Router ### 纯 HTML ## 使用示例 ### 示例 1：为关于页面生成元数据 输出： ### 示例 2：为博客文章生成元数据 输出： ### 示例 3：为英文页面生成元数据 输出： ## 自定义选项 ### 指定关键词 ### 指定品牌名称 ### 指定作者 ### 指定图片 ## 元数据最佳实践 ### Title 最佳实践...
/seoAnalyzes project for SEO opportunities on public pages, generates meta tags, keywords, structured data, OG images, and favicons. Also supports generate and export subcommands.
/seo-local-businessGenerates SEO setup for a local business website: JSON-LD schema, meta tags, robots.txt, and sitemap. Accepts optional business name or prompts for details.
/add-pageAdds a new page to a web app with routing, data fetching from APIs, SEO metadata, layout using existing patterns, and loading/error/empty states.
/seo-setupSets up Nuxt SEO with @nuxtjs/seo: installs module, configures nuxt.config.ts and app.vue, adds Tailwind OG image component. Requires site-url and site-name.
/nextjs-pageCreate a new Next.js App Router page with proper structure, including TypeScript types, loading/error states, metadata, generateStaticParams, and data fetching for dynamic routes.
Share bugs, ideas, or general feedback.
为指定页面生成 SEO 友好的元数据，包括 Title、Meta Description、Open Graph 标签和 Twitter Cards 标签。
根据页面内容自动生成：
$1 或 $ARGUMENTS: 页面路径（必需）
app/about/page.tsx、/about、about// app/[path]/page.tsx
import { Metadata } from 'next'
export const metadata: Metadata = {
title: '...',
description: '...',
openGraph: {
title: '...',
description: '...',
images: ['/og-image.jpg'],
},
}
// pages/[path].tsx
import Head from 'next/head'
export default function Page() {
return (
<Head>
<title>...</title>
<meta name="description" content="..." />
{/* Other meta tags */}
</Head>
)
}
<head>
<title>...</title>
<meta name="description" content="..." />
<!-- Other meta tags -->
</head>
/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 验证
需要我调整任何内容吗？
/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 项目中实现 SEO 优化...',
image: 'https://yourbrand.com/images/blog/nextjs-seo.jpg',
datePublished: '2024-01-15',
dateModified: '2024-01-15',
author: {
'@type': 'Person',
name: '张三',
url: 'https://yourbrand.com/author/zhangsan',
},
publisher: {
'@type': 'Organization',
name: 'YourBrand',
logo: {
'@type': 'ImageObject',
url: 'https://yourbrand.com/logo.png',
},
},
}
\`\`\`
[完整输出...]
/metadata pages/products.tsx --language en
输出：
# Metadata for English Page
[English metadata with proper formatting...]
/metadata about --keywords "团队介绍,公司文化,公司历史"
/metadata about --brand "YourBrand"
/metadata blog/post --author "张三" --author-url "https://yourbrand.com/author/zhangsan"
/metadata about --og-image "https://yourbrand.com/images/og-about.jpg"
中文：
主关键词 | 次要关键词 | 品牌名称管道工服务 | 24小时紧急维修 | SF Plumbing英文：
Primary Keyword - Secondary Keyword | Brand NamePlumbing Services | 24/7 Emergency Repair | SF Plumbing中文：
提供专业的管道维修服务。24小时紧急服务，覆盖旧金山湾区。立即致电 (415) 555-0123。英文：
Professional plumbing services in San Francisco. 24/7 emergency service, covering the Bay Area. Call (415) 555-0123 now.- Title: 20-30 字符
- Description: 70-80 字符
- 关键词密度: 2-4%
- 搜索引擎: 百度、搜狗、Google
- 编码: UTF-8
- Title: 50-60 characters
- Description: 150-160 characters
- Keyword density: 1-2%
- Search engines: Google, Bing
- Encoding: UTF-8
生成元数据后，使用以下工具验证：
Google Rich Results Test
Facebook Sharing Debugger
Twitter Card Validator
Schema Markup Validator
可以选择不同的输出格式：
/metadata about --format markdown
/metadata about --format code
/metadata about --format json
直接复制 metadata 对象到页面文件
复制 <Head> 内容到页面组件
使用 HTML 格式，复制到 <head> 标签
/structured-data - 生成 JSON-LD 结构化数据/seo-check - 检查现有元数据/seo-audit - 全面 SEO 审计Agent: seo-analyzer - 深度分析