SEO Observatory

検索順位・競合ドメイン・カテゴリ別トラフィックを可視化する SEO モニタリングダッシュボード。

Next.js 16 + Supabase (PostgreSQL) + Recharts。

画面

日付別ランク分布 — 追跡KWの順位帯（1位 / 2-3 / 4-10 / 11-20 / 21-30 / 圏外）の推移。カテゴリ絞り込み付き
カテゴリ別 DAU 推移 — GA4 流入をカテゴリ別に積み上げ
競合ベンチマーク — 自社＋上位競合ドメインの Top3/10/30 ランクイン件数の推移
ドメイン別順位構成 — 各ドメインの順位レンジ構成（件数 / 100%比率）
キーワード一覧 — 最新順位・前回比・検索ボリューム・流入（クリックで履歴モーダル）

---

クイックスタート（デモモード・DB不要）

pnpm install
pnpm dev

→ http://localhost:3010 を開くと、同梱のサンプルデータでダッシュボードが表示されます。

環境変数を何も設定しなければデモモードで動くので、まず触ってみてください。

---

実データで使う（自分の Supabase に接続）

1. Supabase プロジェクトを用意

supabase.com でプロジェクトを作成（無料枠でOK）。

2. スキーマを作成

プロジェクトの SQL Editor で sql/setup.sql をまるごと実行。

5 テーブル（obs_media_sites / obs_tracked_keywords / obs_rankings / obs_known_urls / obs_url_traffic）と集計用 RPC 関数が作られます。

3. 環境変数を設定

cp .env.example .env.local

.env.local を編集（値は Supabase の Project Settings → API から取得）:

NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
SUPABASE_SERVICE_ROLE_KEY=eyJ...      # サーバー側のみ。絶対に公開しない
OBS_VISIBLE_MEDIA=mysite               # 任意: 表示するメディアを絞る

NEXT_PUBLIC_SUPABASE_URL を設定するとデモモードは自動的にオフになり、実データを参照します。

4. データを投入

最低限ダッシュボードを動かすには:

obs_media_sites に自分のサイトを1行登録
obs_tracked_keywords に追跡KWを登録（category_l1 を入れるとチャートがカテゴリ分割される）
obs_rankings に順位計測結果を投入（serp_top10_json を入れると競合分析が有効化）
（任意）obs_url_traffic + obs_known_urls に GA4 流入を投入すると DAU パネルが出る

順位の取得方法（スクレイピング/API）は本テンプレートには含まれていません。

取得した結果を上記テーブルの形式で投入してください。serp_top10_json の想定形は sql/setup.sql 内のコメント参照。

pnpm dev

---

デプロイ（Vercel）

このリポジトリを Vercel にインポート
環境変数（上記）を設定
デプロイ

⚠️ SUPABASE_SERVICE_ROLE_KEY は RLS をバイパスする強力なキーです。サーバー側でのみ使われ、ブラウザには送出されませんが、公開リポジトリにコミットしないでください（.gitignore で .env*.local は除外済み）。

このダッシュボードには認証がありません。公開URLにそのまま置くと誰でも閲覧できます。必要なら Vercel の Password Protection やリバースプロキシでの Basic 認証を併用してください。

技術スタック

Next.js 16 (App Router) / React 19
Tailwind CSS 4
Supabase (@supabase/supabase-js)
Recharts

ライセンス

社内/コミュニティ配布用。改変・再配布自由。

SEOモニタリングダッシュボード