roier-seo

Roier SEO - 技术 SEO 审核与修复

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

适用场景

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

快速开始

1. 运行审核

针对线上网站：

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

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

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

2. 分析结果

运行审核后，分析 JSON 输出，找出问题并确定修复的优先级。

3. 实施修复

使用此技能中的修复模式，在用户的代码库中自动实施 SEO 改进。

---

审核类别

审核会为以下五个类别评分（0-100）：

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

---

技术 SEO 修复模式

元标签（HTML Head）

缺少或不合适的标题标签

<title>Home</title>


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

规则：

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

缺少或不合适的元描述

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

规则：

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

缺少视口元标签

<meta name="viewport" content="width=device-width, initial-scale=1">

缺少字符集声明

<meta charset="UTF-8">

缺少语言声明

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

---

性能优化

图片优化

添加 width/height 属性（防止 CLS）

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


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

添加延迟加载

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

使用现代格式（WebP/AVIF）

<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-display: swap

@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">
<link rel="preload" href="/hero-image.webp" as="image">

---

无障碍修复

缺少替代文本

<img src="photo.jpg">


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


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

颜色对比度不足

确保文本至少达到以下对比度：

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

缺少表单标签

<input type="email" placeholder="Email">


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

缺少地标角色

<header role="banner">...</header>
<nav role="navigation">...</nav>
<main role="main" id="main-content">...</main>
<footer role="contentinfo">...</footer>

按钮无障碍

<div onclick="submit()">Submit</div>


<button type="submit">Submit</button>


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

---

最佳实践修复

HTTPS

确保所有资源均通过 HTTPS 加载。修复混合内容：

<img src="http://example.com/image.jpg">


<img src="https://example.com/image.jpg">

安全标头（通过元标签或服务器配置）

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

避免使用 document.write

替换为现代 DOM 操作：

// Bad
document.write('<script src="app.js"></script>');

// Good
const script = document.createElement('script');
script.src = 'app.js';
document.head.appendChild(script);

---

特定框架的模式

Next.js

// pages/_app.js or app/layout.js
import Head from 'next/head';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

// Per-page SEO (pages/about.js)
import Head from 'next/head';

export default function About() {
  return (
    <>
      <Head>
        <title>About Us | Brand Name</title>
        <meta name="description" content="Learn about our company..." />
        <link rel="canonical" href="https://example.com/about" />
      </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" />
        <link rel="canonical" href="https://example.com/page" />
      </Helmet>
      <main>...</main>
    </>
  );
}

Vue.js（搭配 vue-meta 或 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>

这会生成一个包含详细审核结果的 JSON 文件。

步骤 2：识别框架

检查代码库以识别所用框架：

• 查找 package.json 中的依赖项
• 检查框架专用文件（next.config.js、nuxt.config.ts 等）
• 找到 HTML 入口点或布局文件

步骤 3：确定修复优先级

优先处理影响最大的问题：

1. 严重（红色）：立即修复
2. 高（橙色）：尽快修复
3. 中等（黄色）：条件允许时修复
4. 轻微（灰色）：有则更好

步骤 4：实施

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

步骤 5：重新审核

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

---

示例会话

用户： 可以帮我审查一下 localhost:3000 上的网站，并修复所有 SEO 问题吗？

Claude：

1. 运行 node ~/.claude/skills/roier-seo/scripts/audit.js http://localhost:3000
2. 分析结果
3. 找出问题（例如，缺少 meta description、图片未设置尺寸）
4. 在代码库中定位相关文件
5. 使用相应框架的模式实施修复
6. 重新运行审查，确认改进

---

要求

此技能需要：

• 已安装 Node.js 18+
• Chrome/Chromium 浏览器（用于 Lighthouse）
• 审查脚本依赖项（首次运行时自动安装）

如有需要，请手动安装依赖项：

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