roier-seo

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

AI 驱动的 SEO 优化技能，可审计网站并自动实施修复。

何时使用此技能

在以下情况下使用 Roier SEO：

• 用户要求“审计我的网站”或“检查 SEO”
• 用户想要“提升性能”或“修复 SEO 问题”
• 用户提到“lighthouse”、“pagespeed”或“core web vitals”
• 用户想要添加/修复 meta 标签、结构化数据或无障碍性
• 用户有本地开发服务器并想要进行 SEO 分析

主要功能：

• 完整审计：对任意 URL（localhost 或线上）进行 Lighthouse 审计
• 自动修复：直接在代码库中实施修复
• 框架感知：检测 Next.js、React、Vue、Nuxt、纯 HTML
• Core Web Vitals：跟踪 FCP、LCP、TBT、CLS 指标
• 结构化数据：用于富媒体摘要的 JSON-LD schema
• 无障碍性：WCAG 合规性修复

改用替代方案：

• React 最佳实践：用于通用的 React 性能优化
• 手动 Lighthouse：用于不自动修复的一次性审计

快速开始

安装

安装此技能后，安装审计依赖项：

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

运行审计

对于线上网站：

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

对于本地开发服务器（必须正在运行）：

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

输出格式：

# JSON output (default, for programmatic use)
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

审计类别

审计会返回五个类别的分数（0-100）：

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

技术 SEO 修复模式

Meta 标签（HTML Head）

标题标签

<title>Home</title>


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

规则：

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

Meta 描述

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

规则：

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

必要的 meta 标签

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

Open Graph 标签（社交分享）

<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">

Twitter Card 标签

<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">

规范 URL

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

Robots meta

<meta name="robots" content="index, follow">


<meta name="robots" content="noindex, nofollow">

结构化数据（JSON-LD）

网站 schema

<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>

组织 schema

<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>

BreadcrumbList schema

<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>

Article schema（用于博客文章）

<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>

性能优化

图片优化

<img src="image.jpg" alt="Description" width="800" height="600">


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


<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

字体优化

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

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

资源提示

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com">


<link rel="dns-prefetch" href="https://analytics.example.com">


<link rel="preload" href="/critical.css" as="style">

无障碍性修复

替代文本

<img src="photo.jpg" alt="Team members collaborating in the office">


<img src="decoration.jpg" alt="" role="presentation">

颜色对比度

• 普通文本对比度至少为 4.5:1
• 大文本对比度至少为 3:1（18px+ 或 14px+ 加粗）

表单标签

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

跳转链接

<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>

按钮无障碍性

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

框架特定模式

Next.js（App Router）

// 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',
  },
}

Next.js（Pages Router）

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>
    </>
  );
}

React（使用 react-helmet）

import { Helmet } from 'react-helmet';

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

Vue.js（使用 useHead）

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

Nuxt.js

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

工作流

步骤 1：审计

对目标 URL 运行审计脚本：

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

步骤 2：识别框架

检查 package.json 依赖项和框架特定文件。

步骤 3：确定修复优先级

1. 严重（红色）：立即修复
2. 严重（橙色）：尽快修复
3. 中等（黄色）：有机会时修复
4. 轻微（灰色）：锦上添花

步骤 4：实施

使用上述修复模式，并根据用户的框架进行调整。

步骤 5：重新审计

再次运行审计以验证改进。

要求

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

资源

• Google Lighthouse
• PageSpeed Insights
• Schema.org
• WCAG 指南
• Core Web Vitals

版本历史

v1.0.0（2026 年 1 月）

• 首次发布
• Lighthouse 审计集成
• 50+ SEO 修复模式
• 支持 Next.js、React、Vue、Nuxt 框架