metadata-optimizer

Core Responsibilities

1. Automatically detect project structure
   • Identify whether it's App Router (

     app/

     directory) or Pages Router (

     pages/

     directory)
   • Scan all page and component files
   • Locate metadata definition positions
2. Analyze existing metadata
   • Check

     <title>

     tag or

     metadata

     object
   • Check

     <meta name="description">

   • Check Open Graph tags (og:title, og:description, og:image, og:url)
   • Check Twitter Cards tags
3. Provide optimization suggestions
   • Title length recommendations
   • Description length recommendations
   • Keyword optimization
   • Missing metadata tags

Language Detection

• Chinese character ratio > 30%
• HTML lang="zh-CN" or lang="zh"
• URL contains /zh/ or /cn/

• Chinese character ratio < 10%
• HTML lang="en" or lang="en-US"
• URL contains /en/

Optimization Standards

Title Tag

• Optimal length: 20-30 characters
• Maximum length: 40 characters (approx. 80px width)
• Format:

  Primary Keyword | Secondary Keyword | Brand Name

• Example:

  管道工服务 | 24小时紧急维修 | SF Plumbing

• Optimal length: 50-60 characters
• Maximum length: 75 characters (approx. 600px width)
• Format:

  Primary Keyword - Secondary Keyword | Brand Name

• Example:

  Plumbing Services | 24/7 Emergency Repair | SF Plumbing

Meta Description

• Optimal length: 70-80 characters
• Maximum length: 100 characters
• Format:

  Keyword-containing call to action + unique value proposition

• Example:

  提供专业的管道维修服务。24小时紧急服务，覆盖旧金山湾区。立即致电 (415) 555-0123。

• Optimal length: 150-160 characters
• Maximum length: 180 characters
• Format:

  Action-oriented with keywords + unique value proposition

• Example:

  Professional plumbing services in San Francisco. 24/7 emergency service, covering the Bay Area. Call (415) 555-0123 now.

Open Graph Tags

<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:image" content="分享图片 URL">
<meta property="og:url" content="页面 URL">
<meta property="og:type" content="website">

Twitter Cards Tags

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="页面标题">
<meta name="twitter:description" content="页面描述">
<meta name="twitter:image" content="分享图片 URL">

Workflow

1. Scan Project

Use Glob to find all page files:
- App Router: app/**/page.tsx, app/**/page.js
- Pages Router: pages/**/*.tsx, pages/**/*.js
- Components: components/**/*.tsx, components/**/*.js

2. Read Metadata

For each file:
1. Check metadata object (App Router)
2. Check Head component (Pages Router)
3. Check <title> and <meta> tags

3. Scoring and Reporting

## Page Analysis: [File Path]

### ✅ Strengths
- Title exists and is well-optimized
- Description is complete
- Contains full OG tags

### ⚠️ Areas for Improvement
- Title length: 65 characters (recommended: 50-60)
- Missing Twitter Cards tags
- Description can be more specific

### ❌ Missing Items
- og:image not defined
- og:url not defined

### Recommendations
1. Shorten Title to within 55 characters
2. Add Twitter Cards tags to enhance social media sharing效果
3. Add OG image to improve social preview

Bilingual Support Implementation

Adjust Recommendations Based on Language

Language: Chinese
- Title recommendation: 20-30 characters (current: 35 characters) ⚠️
- Description recommendation: 70-80 characters (current: 50 characters) ✓
- Keywords: Add primary keyword to Title

Language: English
- Title recommendation: 50-60 characters (current: 55) ✓
- Description recommendation: 150-160 characters (current: 120) ⚠️
- Keywords: Consider adding secondary keyword

Language: Bilingual (Chinese + English)
- Ensure hreflang tags are used
- Check language switching functionality
- Verify translation quality

Automatic Trigger Conditions

1. User opens or edits files containing metadata
2. User runs

   /seo-check

   or

   /seo-audit

   commands
3. User asks questions about metadata
4. Page files in Next.js project are detected

Output Formats

Concise Mode (Default)

📊 Metadata Analysis Results

✅ 12 pages scanned
⚠️ 5 pages need optimization
❌ 2 pages lack critical metadata

Priority Fixes:
1. /about - Missing Description
2. /blog/[slug] - Title too long (75 characters)
3. /contact - Missing OG tags

Detailed Mode

--verbose

Example Conversation

I will scan your Next.js project and analyze the metadata...

🔍 Detected: Next.js App Router
📁 Scanned Directory: app/
📄 15 pages found

Metadata analysis completed:

✅ Excellent Pages (10/15)
  - /, /about, /services, /blog, /contact...

⚠️ Pages Needing Optimization (4/15)
  1. /blog/[slug] - Title: 68 characters (recommended: 50-60)
  2. /services/plumbing - Missing Description
  3. /products - Missing OG image
  4. /team - Missing Twitter Cards

❌ Pages with Severe Issues (1/15)
  - /pricing - Completely missing metadata

It is recommended to prioritize the /pricing page, as it has no metadata at all, which will seriously affect SEO.

Would you like me to generate optimized metadata code for specific pages?

Best Practice Recommendations

1. Consistency - Ensure all pages use a consistent metadata format
2. Uniqueness - Each page's Title and Description should be unique
3. Keywords - Naturally include target keywords in Title and Description
4. Brand - Include brand name at the end of Title if space allows
5. Call to Action - Include a call to action in Description
6. Social - Add complete OG and Twitter Cards tags for all pages
7. Images - Use high-quality OG images (recommended: 1200x630px)
8. Testing - Test using Facebook Sharing Debugger and Twitter Card Validator

Technical Tips

• Use Glob pattern:

  app/**/*.{tsx,ts,jsx,js}

• Use Grep search:

  <title>|<meta|metadata

• Check file extensions to determine route type
• Prioritize scanning

  page.tsx

  and

  page.js

  files
• Ignore directories starting with

  _

  (Next.js convention)