GSC Version 2 — Enhanced Google Search Console Dashboard

A self-hosted SEO analytics tool built on top of the Google Search Console API. It provides a richer, more actionable interface than the native GSC dashboard — with article scraping, SEO audits, keyword analysis, and semantic cluster visualization.

Self-hosted · No database · Data stays in your browser

---

Features

• Dashboard — KPI cards (clicks, impressions, CTR, position), global 90-day evolution chart, per-article comparison chart
• Articles — Scrape your site via sitemap, view GSC metrics per article, keyword breakdown, position history
• SEO Audit — ~19 automated checks per article in parallel: title/meta length, Open Graph tags, content word count, image alt attributes, internal/external links, canonical, viewport, noindex, JSON-LD, lang
• Keywords — Cross-article keyword aggregation, cannibalization detection, opportunity scoring, per-keyword position history
• Clusters SEO — D3.js force-directed graph grouping articles by semantic similarity (Jaccard index on GSC keyword sets), with zoom, pan, and drag
• Incognito mode — One click hides all sensitive data (URLs, article titles, keywords) for screen sharing or demos

---

Tech Stack

Layer	Technology
Framework	Next.js 16 App Router (TypeScript)
Auth	Google OAuth 2.0 via googleapis
Scraping	Cheerio (server-side HTML parsing)
Visualization	D3.js (force simulation, zoom, drag)
Storage	Browser localStorage (no database needed)
Styling	Custom CSS variables, dark theme

---

Prerequisites

• Node.js 18+
• A Google Cloud project with OAuth 2.0 credentials
• A site verified in Google Search Console

---

Setup

1. Clone and install

git clone https://github.com/YOUR_USERNAME/gsc-version-2.git
cd gsc-version-2
npm install

2. Create a Google Cloud OAuth 2.0 app

This is the only required external setup step.

1. Go to Google Cloud Console and create a new project (or select an existing one).

2. Enable the Google Search Console API:

   • Navigate to APIs & Services → Library
   • Search for Google Search Console API
   • Click Enable

3. Create OAuth 2.0 credentials:

   • Go to APIs & Services → Credentials
   • Click Create Credentials → OAuth client ID
   • Select Web application
   • Under Authorized redirect URIs, add: http://localhost:3000/api/gsc/callback
   • Click Create, then copy your Client ID and Client Secret

4. Configure the OAuth consent screen:

   • Go to APIs & Services → OAuth consent screen
   • Set the app to External (or Internal if using Google Workspace)
   • Under Test users, add your Google account email
   • The app only requests webmasters.readonly scope (read-only Search Console access)

3. Configure environment variables

cp .env.local.example .env.local

Then edit .env.local with your credentials:

GOOGLE_CLIENT_ID=your_client_id_here
GOOGLE_CLIENT_SECRET=your_client_secret_here
GOOGLE_REDIRECT_URI=http://localhost:3000/api/gsc/callback

4. Run

npm run dev

Open http://localhost:3000.

---

Usage

Connect to Google Search Console

1. Click Telecharger les donnees GSC on the Dashboard
2. You will be redirected to Google's OAuth consent screen
3. Authorize the app — it only requests read-only access
4. You'll be redirected back with your data loaded and cached locally

Scrape your articles

1. Go to the Articles view
2. Enter your site URL and URL prefix in the scan card (e.g. https://example.com / /blog/)
3. Click scan — the app fetches your sitemap and scrapes each article for title, description, featured image, and content

Run an SEO audit

1. In the Articles view, click Lancer l'audit SEO
2. All articles are audited in parallel. Checks include:
   • Balises: title length (50–60 chars), meta description (150–160 chars), H1 uniqueness, H2 presence
   • Open Graph: og:title, og:description, og:image, og:type
   • Contenu: word count, images present
   • Images: alt attributes
   • Liens: internal/external links, empty anchors
   • Technique: canonical tag, viewport meta, noindex detection, JSON-LD, lang attribute
3. Results are cached in localStorage and shown per article with error/warning counts

Explore keyword clusters

Navigate to Clusters SEO to see a force-directed graph of your articles grouped by semantic similarity. Articles are linked when their top-20 GSC keywords share a Jaccard similarity >= 0.08. Use scroll to zoom, drag the background to pan, and drag nodes to reposition.

---

Deployment

For production, update the redirect URI in your .env and in Google Cloud Console:

GOOGLE_REDIRECT_URI=https://yourdomain.com/api/gsc/callback

Then add https://yourdomain.com/api/gsc/callback to the Authorized redirect URIs in your Google Cloud OAuth credentials.

Deploy to Vercel

Set the three environment variables (GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, GOOGLE_REDIRECT_URI) in Vercel → Project Settings → Environment Variables.

---

Data & Privacy

All data is stored in your browser's localStorage. Nothing is sent to any third-party server. The app communicates exclusively with Google's APIs (Search Console API, OAuth endpoints) and your own site (for scraping).

The access token is stored in an httpOnly cookie (1-hour expiry). The refresh token is stored in an httpOnly cookie (30-day expiry). Both are never exposed to client-side JavaScript.

---

Project Structure

src/
  app/
    api/
      gsc/          # OAuth flow + GSC API routes (fetch-all, keywords, history...)
      scrape/       # Sitemap fetch + Cheerio article scraper
      seo-audit/    # Per-article SEO audit (~19 checks)
    clusters/       # Cluster visualization page
    keywords/       # Keyword analysis page
    page.tsx        # Dashboard + Articles (view param)
  components/
    Sidebar.tsx     # Navigation + incognito toggle
    Dashboard.tsx   # Charts, KPIs, top articles
    ArticlesFilter.tsx  # Article list + audit panel
    ClusterView.tsx     # D3.js force graph
  lib/
    incognito.tsx   # Global incognito context + hook

---

License

MIT — free to use, fork, and modify.