roier-seo

Roier SEO - テクニカル SEO 監査・修正ツール

AI を活用した SEO 最適化スキルです。ウェブサイトを監査し、修正を自動的に実装します。

このスキルを使うタイミング

Roier SEO を使用するケース:

• ユーザーが「サイトを監査して」や「SEO をチェックして」と依頼したとき
• ユーザーが「パフォーマンスを改善して」や「SEO の問題を修正して」と依頼したとき
• ユーザーが「lighthouse」「pagespeed」「core web vitals」に言及したとき
• ユーザーがメタタグ、構造化データ、アクセシビリティを追加・修正したいとき
• ユーザーがローカルの開発サーバーを持っており、SEO 分析を行いたいとき

主な機能:

• フル監査: 任意の URL（localhost または公開サイト）に対する Lighthouse 監査
• 自動修正: コードベースに修正を直接実装
• フレームワーク対応: Next.js、React、Vue、Nuxt、プレーン HTML を検出
• Core Web Vitals: FCP、LCP、TBT、CLS の指標を追跡
• 構造化データ: リッチスニペット用の JSON-LD スキーマ
• アクセシビリティ: WCAG 準拠の修正

代わりに使用できるもの:

• React Best Practices: 一般的な React のパフォーマンス最適化向け
• Manual 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

監査カテゴリ

監査では 5 つのカテゴリについて、0〜100 のスコアが返されます:

カテゴリ	説明	重み
Performance	ページの読み込み速度、Core Web Vitals	高
Accessibility	WCAG 準拠、スクリーンリーダー対応	高
Best Practices	セキュリティ、最新のウェブ標準	中
SEO	検索エンジン最適化、クロール可能性	高
PWA	プログレッシブウェブアプリの準拠	低

テクニカル 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 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 name="robots" content="index, follow">


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

構造化データ（JSON-LD）

Website スキーマ

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

Organization スキーマ

<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 スキーマ

<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 スキーマ（ブログ記事向け）

<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 のコントラスト比
• 大きいテキスト（18px 以上、または 14px 以上の太字）は 3:1 のコントラスト比

フォームのラベル

<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. Critical（赤）: 直ちに修正
2. Serious（オレンジ）: 早めに修正
3. Moderate（黄）: 可能なときに修正
4. Minor（グレー）: 余裕があれば対応

ステップ 4: 実装

上記の修正パターンを、ユーザーのフレームワークに合わせて適用します。

ステップ 5: 再監査

監査を再度実行し、改善を確認します。

要件

• Node.js 18+
• Chrome/Chromium ブラウザ（Lighthouse 用）
• 監査スクリプトの依存関係（npm でインストール）

リソース

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

バージョン履歴

v1.0.0（2026年1月）

• 初回リリース
• Lighthouse 監査との統合
• 50 以上の SEO 修正パターン
• Next.js、React、Vue、Nuxt のフレームワークサポート