Anthropic Claudeソフトウェア開発⭐ リポ 0品質スコア 50/100
roier-seo
テクニカルSEOの監査と修正を自動化するスキル。WebサイトやローカルDevサーバーに対してLighthouse/PageSpeedの監査を実行し、SEO・パフォーマンス・アクセシビリティのスコアを分析したうえで、metaタグ・構造化データ・Core Web Vitals・アクセシビリティの問題を自動的に修正します。
description の原文を見る
Technical SEO auditor and fixer. Runs Lighthouse/PageSpeed audits on websites or local dev servers, analyzes SEO/performance/accessibility scores, and automatically implements fixes for meta tags, structured data, Core Web Vitals, and accessibility issues.
SKILL.md 本文
Roier SEO - Technical 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出力（デフォルト、プログラム処理用）
node ~/.claude/skills/roier-seo/scripts/audit.js https://example.com
# 人間が読みやすいサマリー
node ~/.claude/skills/roier-seo/scripts/audit.js https://example.com --output=summary
# ファイルに保存
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 | プログレッシブウェブアプリ準拠 | 低 |
Technical SEO修正パターン
メタタグ（HTMLヘッド）
Titleタグ
<!-- 悪い例 -->
<title>Home</title>
<!-- 良い例 -->
<title>Primary Keyword - Secondary Keyword | Brand Name</title>
ルール:
- 最大50～60文字
- 主要キーワードを最初の方に含める
- ページごとに一意
- ブランド名を末尾に含める
メタディスクリプション
<meta name="description" content="キーワードを含んだ魅力的な説明。150～160文字で検索結果からのクリックを促します。">
ルール:
- 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="ページタイトル">
<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タグ
<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
<link rel="canonical" href="https://example.com/canonical-page">
Robots メタ
<!-- インデックスを許可（デフォルト） -->
<meta name="robots" content="index, follow">
<!-- インデックスを防止（ステージング、管理ページ用） -->
<meta name="robots" content="noindex, nofollow">
構造化データ（JSON-LD）
Webサイトスキーマ
<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 スキーマ
<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 スキーマ
<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 スキーマ（ブログ投稿用）
<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>
パフォーマンス最適化
画像最適化
<!-- 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>
フォント最適化
<!-- 重要なフォントをプリロード -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
@font-face {
font-family: 'カスタムフォント';
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">
<!-- 重要でないオリジンのDNSプリフェッチ -->
<link rel="dns-prefetch" href="https://analytics.example.com">
<!-- 重要なリソースをプリロード -->
<link rel="preload" href="/critical.css" as="style">
アクセシビリティ修正
Alt テキスト
<!-- 良い例（説明的） -->
<img src="photo.jpg" alt="オフィスで協力する従業員たち">
<!-- 良い例（装飾用） -->
<img src="decoration.jpg" alt="" role="presentation">
色コントラスト
- 4.5:1 通常のテキストのコントラスト比
- 3:1 大型テキスト（18px以上または14px以上の太字）のコントラスト比
フォームラベル
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email">
スキップリンク
<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>
ボタンのアクセシビリティ
<!-- アイコンボタンはaria-labelが必要 -->
<button aria-label="メニューを閉じる">
<svg>...</svg>
</button>
フレームワーク固有のパターン
Next.js（App Router）
// 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）
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（react-helmetを使用）
import { Helmet } from 'react-helmet';
function Page() {
return (
<>
<Helmet>
<title>ページタイトル | ブランド</title>
<meta name="description" content="ページの説明" />
</Helmet>
<main>...</main>
</>
);
}
Vue.js（useHeadを使用）
<script setup>
useHead({
title: 'ページタイトル | ブランド',
meta: [
{ name: 'description', content: 'ページの説明' }
],
link: [
{ rel: 'canonical', href: 'https://example.com/page' }
]
})
</script>
Nuxt.js
<script setup>
useSeoMeta({
title: 'ページタイトル | ブランド',
description: 'ページの説明',
ogTitle: 'ページタイトル',
ogDescription: 'ページの説明',
ogImage: 'https://example.com/og-image.jpg'
})
</script>
ワークフロー
ステップ1: 監査
対象URLで監査スクリプトを実行します:
node ~/.claude/skills/roier-seo/scripts/audit.js <URL>
ステップ2: フレームワークを特定
package.json の依存関係とフレームワーク固有のファイルを確認します。
ステップ3: 修正の優先順位を決める
- 重大 (赤): すぐに修正
- 重い (オレンジ): すぐに修正
- 中程度 (黄): 可能な時に修正
- 軽微 (グレー): あると良い
ステップ4: 実装
上記の修正パターンを、ユーザーのフレームワークに適応させて使用します。
ステップ5: 再監査
監査を再実行して改善を検証します。
要件
- Node.js 18+
- Chrome/Chromium ブラウザ（Lighthouse用）
- 監査スクリプト依存関係（npm経由でインストール）
リソース
バージョン履歴
v1.0.0 (2026年1月)
- 初回リリース
- Lighthouse監査統合
- 50以上のSEO修正パターン
- Next.js、React、Vue、Nuxtのフレームワークサポート
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- davila7
- ライセンス
- MIT
- 最終更新
- 不明
Source: https://github.com/davila7/claude-code-templates / ライセンス: MIT
関連スキル
汎用ソフトウェア開発⭐ リポ 39,967
doubt-driven-development
重要な判断はすべて、本番環境への展開前に新しい視点から対抗的レビューを実施します。速度より正確性が重要な場合、不慣れなコードを扱う場合、本番環境・セキュリティに関わるロジック・取り消し不可の操作など影響度が高い場合、または後でバグを修正するよりも今検証する方が効率的な場合に活用してください。
by addyosmani
汎用ソフトウェア開発⭐ リポ 1,175
apprun-skills
TypeScriptを使用したAppRunアプリケーションのMVU設計に関する総合的なガイダンスが得られます。コンポーネントパターン、イベントハンドリング、状態管理（非同期ジェネレータを含む）、パラメータと保護機能を備えたルーティング・ナビゲーション、vistestを使用したテストに対応しています。AppRunコンポーネントの設計・レビュー、ルートの配線、状態フローの管理、AppRunテストの作成時に活用してください。
by yysun
OpenAIソフトウェア開発⭐ リポ 797
desloppify
コードベースのヘルスチェックと技術負債の追跡ツールです。コード品質、技術負債、デッドコード、大規模ファイル、ゴッドクラス、重複関数、コードスメル、命名規則の問題、インポートサイクル、結合度の問題についてユーザーが質問した場合に使用してください。また、ヘルススコアの確認、次の改善項目の提案、クリーンアップ計画の作成をリクエストされた際にも対応します。29言語に対応しています。
by Git-on-my-level
汎用ソフトウェア開発⭐ リポ 39,967
debugging-and-error-recovery
テストが失敗したり、ビルドが壊れたり、動作が期待と異なったり、予期しないエラーが発生したりした場合に、体系的な根本原因デバッグをガイドします。推測ではなく、根本原因を見つけて修正するための体系的なアプローチが必要な場合に使用してください。
by addyosmani
汎用ソフトウェア開発⭐ リポ 39,967
test-driven-development
テスト駆動開発により実装を進めます。ロジックの実装、バグの修正、動作の変更など、あらゆる場面で活用できます。コードが正常に動作することを証明する必要がある場合、バグ報告を受けた場合、既存機能を修正する予定がある場合に使用してください。
by addyosmani
汎用ソフトウェア開発⭐ リポ 39,967
incremental-implementation
変更を段階的に実施します。複数のファイルに影響する機能や変更を実装する場合に使用してください。大量のコードを一度に書こうとしている場合や、タスクが一度では完結できないほど大きい場合に活用します。
by addyosmani