roier-seo

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Roier SEO - Technical SEO Auditor & Fixer

Roier SEO - 技术SEO审核与修复工具

AI-powered SEO optimization skill that audits websites and automatically implements fixes.

基于AI的SEO优化工具，可审核网站并自动实施修复。

When to use this skill

何时使用此工具

Use Roier SEO when:

User asks to "audit my site" or "check SEO"
User wants to "improve performance" or "fix SEO issues"
User mentions "lighthouse", "pagespeed", or "core web vitals"
User wants to add/fix meta tags, structured data, or accessibility
User has a local dev server and wants SEO analysis

Key features:

Full Audits: Lighthouse audits on any URL (localhost or live)
Auto-Fix: Implements fixes directly in the codebase
Framework Aware: Detects Next.js, React, Vue, Nuxt, plain HTML
Core Web Vitals: Track FCP, LCP, TBT, CLS metrics
Structured Data: JSON-LD schemas for rich snippets
Accessibility: WCAG compliance fixes

Use alternatives instead:

React Best Practices: For general React performance optimization
Manual Lighthouse: For one-off audits without auto-fixing

在以下场景使用Roier SEO：

用户要求“审核我的网站”或“检查SEO情况”
用户希望“提升性能”或“修复SEO问题”
用户提到“lighthouse”、“pagespeed”或“core web vitals”
用户想要添加/修复元标签、结构化数据或可访问性设置
用户有本地开发服务器并需要SEO分析

核心功能：

完整审核：对任意URL（本地主机或线上网站）运行Lighthouse审核
自动修复：直接在代码库中实施修复
框架适配：支持检测Next.js、React、Vue、Nuxt及纯HTML项目
Core Web Vitals追踪：监控FCP、LCP、TBT、CLS指标
结构化数据：生成用于富文本摘要的JSON-LD schema
可访问性修复：解决WCAG合规性问题

以下场景请使用替代方案：

React最佳实践：用于通用React性能优化
手动Lighthouse：用于无需自动修复的一次性审核

Quick start

快速开始

Installation

安装

After installing the skill, install the audit dependencies:

bash

cd ~/.claude/skills/roier-seo/scripts
npm install

安装本工具后，安装审核依赖：

bash

cd ~/.claude/skills/roier-seo/scripts
npm install

Running an Audit

运行审核

For a live website:

bash

node ~/.claude/skills/roier-seo/scripts/audit.js https://example.com

For a local dev server (must be running):

bash

node ~/.claude/skills/roier-seo/scripts/audit.js http://localhost:3000

Output formats:

bash

undefined

针对线上网站：

bash

node ~/.claude/skills/roier-seo/scripts/audit.js https://example.com

针对本地开发服务器（需已启动）：

bash

node ~/.claude/skills/roier-seo/scripts/audit.js http://localhost:3000

输出格式：

bash

undefined

JSON output (default, for programmatic use)

JSON输出（默认，供程序调用）

node ~/.claude/skills/roier-seo/scripts/audit.js https://example.com

Human-readable summary

人类可读摘要

node ~/.claude/skills/roier-seo/scripts/audit.js https://example.com --output=summary

Save to file

保存到文件

node ~/.claude/skills/roier-seo/scripts/audit.js https://example.com --save=results.json

undefined

node ~/.claude/skills/roier-seo/scripts/audit.js https://example.com --save=results.json

undefined

Audit categories

审核类别

The audit returns scores (0-100) for five categories:

Category	Description	Weight
Performance	Page load speed, Core Web Vitals	High
Accessibility	WCAG compliance, screen reader support	High
Best Practices	Security, modern web standards	Medium
SEO	Search engine optimization, crawlability	High
PWA	Progressive Web App compliance	Low

审核会返回5个类别的评分（0-100分）：

类别	描述	权重
Performance	页面加载速度、Core Web Vitals	高
Accessibility	WCAG合规性、屏幕阅读器支持	高
Best Practices	安全性、现代Web标准	中
SEO	搜索引擎优化、可抓取性	高
PWA	渐进式Web应用合规性	低

Technical SEO fix patterns

技术SEO修复方案

Meta tags (HTML Head)

元标签（HTML头部）

Title tag

标题标签

html

<!-- Bad -->
<title>Home</title>

<!-- Good -->
<title>Primary Keyword - Secondary Keyword | Brand Name</title>

Rules:

50-60 characters max
Include primary keyword near the beginning
Unique per page
Include brand name at end

html

<!-- 不良示例 -->
<title>Home</title>

<!-- 良好示例 -->
<title>主关键词 - 次要关键词 | 品牌名称</title>

规则：

最多50-60个字符
开头附近包含主关键词
每个页面唯一
末尾包含品牌名称

Meta description

元描述

html

<meta name="description" content="Compelling description with keywords. 150-160 characters that encourages clicks from search results.">

Rules:

150-160 characters
Include primary and secondary keywords naturally
Compelling call-to-action
Unique per page

html

<meta name="description" content="包含关键词的有吸引力描述，150-160字符，鼓励用户从搜索结果点击。">

规则：

150-160字符
自然融入主关键词和次要关键词
包含有吸引力的行动号召
每个页面唯一

Essential meta tags

必备元标签

html

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<html lang="en">

html

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<html lang="en">

Open Graph tags (social sharing)

Open Graph标签（社交分享）

html

<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Brand Name">

html

<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta property="og:site_name" content="品牌名称">

Twitter Card tags

Twitter Card标签

html

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description">
<meta name="twitter:image" content="https://example.com/image.jpg">

html

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="页面标题">
<meta name="twitter:description" content="页面描述">
<meta name="twitter:image" content="https://example.com/image.jpg">

Canonical URL

规范URL

html

<link rel="canonical" href="https://example.com/canonical-page">

html

<link rel="canonical" href="https://example.com/canonical-page">

Robots meta

Robots元标签

html

<!-- Allow indexing (default) -->
<meta name="robots" content="index, follow">

<!-- Prevent indexing (for staging, admin pages) -->
<meta name="robots" content="noindex, nofollow">

html

<!-- 允许索引（默认） -->
<meta name="robots" content="index, follow">

<!-- 禁止索引（用于 staging、管理页面） -->
<meta name="robots" content="noindex, nofollow">

Structured data (JSON-LD)

结构化数据（JSON-LD）

Website schema

网站Schema

html

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "Site Name",
  "url": "https://example.com",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://example.com/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}
</script>

html

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "网站名称",
  "url": "https://example.com",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://example.com/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}
</script>

Organization schema

组织Schema

html

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Company Name",
  "url": "https://example.com",
  "logo": "https://example.com/logo.png",
  "sameAs": [
    "https://twitter.com/company",
    "https://linkedin.com/company/company"
  ]
}
</script>

html

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "公司名称",
  "url": "https://example.com",
  "logo": "https://example.com/logo.png",
  "sameAs": [
    "https://twitter.com/company",
    "https://linkedin.com/company/company"
  ]
}
</script>

BreadcrumbList schema

面包屑导航Schema

html

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com"},
    {"@type": "ListItem", "position": 2, "name": "Category", "item": "https://example.com/category"},
    {"@type": "ListItem", "position": 3, "name": "Page"}
  ]
}
</script>

html

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type": "ListItem", "position": 1, "name": "首页", "item": "https://example.com"},
    {"@type": "ListItem", "position": 2, "name": "分类", "item": "https://example.com/category"},
    {"@type": "ListItem", "position": 3, "name": "页面"}
  ]
}
</script>

Article schema (for blog posts)

文章Schema（适用于博客文章）

html

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Article Title",
  "author": {"@type": "Person", "name": "Author Name"},
  "datePublished": "2024-01-15",
  "dateModified": "2024-01-20",
  "image": "https://example.com/article-image.jpg",
  "publisher": {
    "@type": "Organization",
    "name": "Publisher Name",
    "logo": {"@type": "ImageObject", "url": "https://example.com/logo.png"}
  }
}
</script>

html

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "文章标题",
  "author": {"@type": "Person", "name": "作者名称"},
  "datePublished": "2024-01-15",
  "dateModified": "2024-01-20",
  "image": "https://example.com/article-image.jpg",
  "publisher": {
    "@type": "Organization",
    "name": "发布者名称",
    "logo": {"@type": "ImageObject", "url": "https://example.com/logo.png"}
  }
}
</script>

Performance optimizations

性能优化

Image optimization

图片优化

html

<!-- Add width/height to prevent CLS -->
<img src="image.jpg" alt="Description" width="800" height="600">

<!-- Add lazy loading -->
<img src="image.jpg" alt="Description" loading="lazy">

<!-- Use modern formats -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

html

<!-- 添加宽高属性以避免CLS -->
<img src="image.jpg" alt="描述" width="800" height="600">

<!-- 添加懒加载 -->
<img src="image.jpg" alt="描述" loading="lazy">

<!-- 使用现代格式 -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="描述">
</picture>

Font optimization

字体优化

html

<!-- Preload critical fonts -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>

css

@font-face {
  font-family: 'Custom Font';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
}

html

<!-- 预加载关键字体 -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>

css

@font-face {
  font-family: 'Custom Font';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
}

Resource hints

资源提示

html

<!-- Preconnect to critical third-party origins -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com">

<!-- DNS prefetch for non-critical origins -->
<link rel="dns-prefetch" href="https://analytics.example.com">

<!-- Preload critical resources -->
<link rel="preload" href="/critical.css" as="style">

html

<!-- 预连接到关键第三方源 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com">

<!-- DNS预获取非关键源 -->
<link rel="dns-prefetch" href="https://analytics.example.com">

<!-- 预加载关键资源 -->
<link rel="preload" href="/critical.css" as="style">

Accessibility fixes

可访问性修复

Alt text

替代文本

html

<!-- Good (descriptive) -->
<img src="photo.jpg" alt="Team members collaborating in the office">

<!-- Good (decorative) -->
<img src="decoration.jpg" alt="" role="presentation">

html

<!-- 良好示例（描述性） -->
<img src="photo.jpg" alt="团队成员在办公室协作">

<!-- 良好示例（装饰性） -->
<img src="decoration.jpg" alt="" role="presentation">

Color contrast

色彩对比度

4.5:1 contrast ratio for normal text
3:1 contrast ratio for large text (18px+ or 14px+ bold)

普通文本对比度比例至少4.5:1
大文本（18px以上或14px粗体）对比度比例至少3:1

Form labels

表单标签

html

<label for="email">Email Address</label>
<input type="email" id="email" name="email">

html

<label for="email">邮箱地址</label>
<input type="email" id="email" name="email">

Skip link

跳转链接

html

<a href="#main-content" class="skip-link">Skip to main content</a>

<style>
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 0;
  top: 0;
  z-index: 9999;
  background: #000;
  color: #fff;
  padding: 8px 16px;
}
</style>

html

<a href="#main-content" class="skip-link">跳转到主要内容</a>

<style>
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 0;
  top: 0;
  z-index: 9999;
  background: #000;
  color: #fff;
  padding: 8px 16px;
}
</style>

Button accessibility

按钮可访问性

html

<!-- Icon button needs aria-label -->
<button aria-label="Close menu">
  <svg>...</svg>
</button>

html

<!-- 图标按钮需要aria-label -->
<button aria-label="关闭菜单">
  <svg>...</svg>
</button>

Framework-specific patterns

框架专属方案

Next.js (App Router)

Next.js（App Router）

tsx

// app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: {
    default: 'Site Name',
    template: '%s | Site Name'
  },
  description: 'Site description',
  openGraph: {
    title: 'Site Name',
    description: 'Site description',
    url: 'https://example.com',
    siteName: 'Site Name',
    type: 'website',
  },
}

tsx

// app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: {
    default: '网站名称',
    template: '%s | 网站名称'
  },
  description: '网站描述',
  openGraph: {
    title: '网站名称',
    description: '网站描述',
    url: 'https://example.com',
    siteName: '网站名称',
    type: 'website',
  },
}

Next.js (Pages Router)

Next.js（Pages Router）

jsx

import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head>
        <title>Page Title | Brand</title>
        <meta name="description" content="Page description" />
        <link rel="canonical" href="https://example.com/page" />
      </Head>
      <main>...</main>
    </>
  );
}

jsx

import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head>
        <title>页面标题 | 品牌</title>
        <meta name="description" content="页面描述" />
        <link rel="canonical" href="https://example.com/page" />
      </Head>
      <main>...</main>
    </>
  );
}

React (with react-helmet)

React（搭配react-helmet）

jsx

import { Helmet } from 'react-helmet';

function Page() {
  return (
    <>
      <Helmet>
        <title>Page Title | Brand</title>
        <meta name="description" content="Page description" />
      </Helmet>
      <main>...</main>
    </>
  );
}

jsx

import { Helmet } from 'react-helmet';

function Page() {
  return (
    <>
      <Helmet>
        <title>页面标题 | 品牌</title>
        <meta name="description" content="页面描述" />
      </Helmet>
      <main>...</main>
    </>
  );
}

Vue.js (with useHead)

Vue.js（搭配useHead）

vue

<script setup>
useHead({
  title: 'Page Title | Brand',
  meta: [
    { name: 'description', content: 'Page description' }
  ],
  link: [
    { rel: 'canonical', href: 'https://example.com/page' }
  ]
})
</script>

vue

<script setup>
useHead({
  title: '页面标题 | 品牌',
  meta: [
    { name: 'description', content: '页面描述' }
  ],
  link: [
    { rel: 'canonical', href: 'https://example.com/page' }
  ]
})
</script>

Nuxt.js

vue

<script setup>
useSeoMeta({
  title: 'Page Title | Brand',
  description: 'Page description',
  ogTitle: 'Page Title',
  ogDescription: 'Page description',
  ogImage: 'https://example.com/og-image.jpg'
})
</script>

vue

<script setup>
useSeoMeta({
  title: '页面标题 | 品牌',
  description: '页面描述',
  ogTitle: '页面标题',
  ogDescription: '页面描述',
  ogImage: 'https://example.com/og-image.jpg'
})
</script>

Workflow

工作流程

Step 1: Audit

步骤1：审核

Run the audit script on the target URL:

bash

node ~/.claude/skills/roier-seo/scripts/audit.js <URL>

在目标URL上运行审核脚本：

bash

node ~/.claude/skills/roier-seo/scripts/audit.js <URL>

Step 2: Identify framework

步骤2：识别框架

Check

package.json

dependencies and framework-specific files.

检查

package.json

依赖项和框架专属文件。

Step 3: Prioritize fixes

步骤3：优先级排序

Critical (red): Fix immediately
Serious (orange): Fix soon
Moderate (yellow): Fix when possible
Minor (gray): Nice to have

严重（红色）：立即修复
重要（橙色）：尽快修复
中等（黄色）：有空时修复
次要（灰色）：锦上添花

Step 4: Implement

步骤4：实施修复

Use the fix patterns above, adapted to the user's framework.

使用上述修复方案，适配用户的框架。

Step 5: Re-audit

步骤5：重新审核

Run the audit again to verify improvements.

再次运行审核以验证改进效果。

Requirements

要求

Node.js 18+
Chrome/Chromium browser (for Lighthouse)
Audit script dependencies (installed via npm)

Node.js 18+
Chrome/Chromium浏览器（用于Lighthouse）
审核脚本依赖（通过npm安装）

Resources

参考资源

Version history

版本历史

v1.0.0 (January 2026)

Initial release
Lighthouse audit integration
50+ SEO fix patterns
Framework support for Next.js, React, Vue, Nuxt

v1.0.0（2026年1月）

初始版本
集成Lighthouse审核
50+ SEO修复方案
支持Next.js、React、Vue、Nuxt框架