seo-audit-report

SEO 監査レポート（スキャフォールドの手順）

ユーザーが、Search Console のエクスポートまたは接続済みデータをブラウザーで繰り返し確認するための、インタラクティブなクライアントサイドレポートを求めている場合に、このスキルを使用します。

コンテキストと事前確認

調査または実装を始める前に、../docs/credentials-and-tooling.md に記載されている共通の事前確認を実行します。.seo-context.md が存在する場合は再利用します。アクセス可能な URL プレフィックス形式と sc-domain: 形式の候補から、プロジェクトの正規の GSC プロパティを特定します。未解決の前提は記録し、ビジネス上の優先事項や編集権限を推測で決めないでください。

必須の入力

• プロジェクトディレクトリ名。
• データソース：接続済み GSC のライブデータ、または接続済み MCP から作成したエクスポート。
• 永続化先：ブラウザーの IndexedDB に永続化する、シリアライズされた sql.js データベース。

ツールと認証情報

• 認証モード：mcp
• 必要なもの：必須の MCP 経由で接続された GSC へのアクセス
• 入力パス：ライブ GSC データ、または JSON/CSV として実体化された MCP エクスポート
• フォールバック：なし

ワークフロー

1. プロジェクトをスキャフォールドする

   • npm create vite@latest <project-name> -- --template react-ts を実行します（Bun を使用する場合は bun create vite@latest ...）。
   • 新しいフォルダーに移動し、依存関係をインストールします（npm install/bun install）。
   • レポートに別のルートまたはエントリーポイントが必要でない限り、生成されたプロジェクト構成を維持します。

2. 依存関係を追加する

   • まだインストールされていない場合は、react、react-dom と zod をインストールします。
   • ランタイムヘルパーとして、ブラウザー内の SQLite エンジン用に sql.js、エクスポートされたデータベースのバイト列を永続化するために idb-keyval をインストールします。
   • typescript と vite の開発依存関係は、テンプレートとの整合性を保ちます。

3. データレイヤーを実装する

   • sql.js を sql-wasm.wasm バンドルで設定し、初期化処理を再利用可能なヘルパーに分離します。
   • CSV および JSON の入力を { date, query, page, clicks, impressions, ctr, position } に解析し、数値フィールドを適切な数値型に変換し、欠落している任意の値を一貫した方法で処理します。
   • 正規化された行を gsc_rows テーブルに保存し、date、query、page にインデックスを設定します。
   • インポート後にデータベースをバイト列としてエクスポートし、そのバイト列を idb-keyval で永続化します。アプリの読み込み時には復元します。

4. レポートビューを実装する

   • クリック数、表示回数、CTR、加重掲載順位の合計に加え、上位のクエリ、上位のページ、CTR ギャップの改善機会を表示します。
   • 改善機会のしきい値と日付／ページ／クエリのフィルターは、クエリコードに隠さず、表示して調整できるようにします。
   • ファイルのインポート、/gsc/latest.json からの任意の取得、カスタムフィルター、リセット操作を含めます。

5. スキャフォールドを仕上げてドキュメントを作成する

   • CSS 変数とカード／グリッドのパターンを使ってレイアウトをスタイリングし、固定ヘッダー、コールアウト、狭めのテキスト幅で読みやすさを最優先にします。
   • フローのデモに役立つ場合は、public/gsc/latest.json などの小さなサンプルエクスポートを追加します。
   • README または近くのコメントに、受け付けるインポート形式、永続化モデル、CTR 改善機会の判定ヒューリスティクスを記載します。

6. 実行して検証する

   • npm run dev または bun run dev で開発サーバーを起動し、代表的な CSV/JSON エクスポートを読み込みます。
   • インポート、再読み込み後の永続化、フィルター、リセット、任意の /gsc/latest.json 取得パスを試します。ブラウザーコンソールで worker/WASM または IndexedDB のエラーを確認します。
   • プロジェクトで利用できる型チェック、lint、ビルドのコマンドを実行します。README に、実行したコマンドと、ライブ GSC またはブラウザーに関する制限事項を記載します。
   • sql.js はブラウザー内で SQLite を実行します。IndexedDB が保存するのはシリアライズされたデータベースのバイト列であり、SQLite エンジンではありません。