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 の改善を自動で実装します。

---

監査カテゴリ

監査では、次の 5 つのカテゴリについてスコア（0～100）が返されます。

カテゴリ	説明	重要度
パフォーマンス	ページの読み込み速度、Core Web Vitals	高
アクセシビリティ	WCAG 準拠、スクリーンリーダーのサポート	高
ベストプラクティス	セキュリティ、最新のウェブ標準	中
SEO	検索エンジン最適化、クロール可能性	高
PWA	プログレッシブウェブアプリへの準拠	低

---

テクニカル SEO の修正パターン

メタタグ（HTML の head）

title タグがない、または適切でない

<title>Home</title>


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

ルール：

• 最大 50～60 文字
• 主要キーワードを先頭付近に含める
• ページごとに固有の内容にする
• 末尾にブランド名を含める

meta description がない、または適切でない

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

ルール：

• 150～160 文字
• 主要キーワードと副次キーワードを自然に含める
• 魅力的な行動喚起を含める
• ページごとに固有の内容にする

viewport メタタグがない

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

charset がない

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

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

---

パフォーマンスの最適化

画像の最適化

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

---

アクセシビリティの修正

alt テキストがない

<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：通常のテキスト
• 3:1：大きなテキスト（18px 以上、または太字の 14px 以上）

フォームラベルがない

<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. 問題（例：メタディスクリプションがない、画像に寸法が指定されていない）を特定します
4. コードベース内の該当ファイルを見つけます
5. 適切なフレームワークのパターンを使って修正を実装します
6. 監査を再実行して改善を確認します

---

要件

このスキルには以下が必要です：

• Node.js 18+ がインストールされていること
• Chrome/Chromium ブラウザー（Lighthouse 用）
• 監査スクリプトの依存関係（初回実行時に自動インストールされます）

必要に応じて、依存関係を手動でインストールしてください：

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