# Your longitudinal SEO dashboard was already in localStorage — I just drew it

Every Mega SEO Analyzer run writes the score to your browsers localStorage. The SEO Trend Dashboard reads it and renders per-URL line charts with improving/regressing/stable classification. No server, no account, no export/import needed.

Author: J.A. Watte
Published: April 22, 2026
Source: https://jwatte.com/blog/blog-tool-seo-trend-dashboard/

---

When I added localStorage history to Mega SEO Analyzer v2 a week ago, I knew the data was accumulating. What I hadn't built yet was the view that turns a row in localStorage into a line on a graph.

Meet [the SEO Trend Dashboard](/tools/seo-trend-dashboard/). It reads the same localStorage key the analyzer writes to, groups runs by URL, and renders per-URL score-over-time charts with trend classification. Zero setup if you've already run Mega SEO Analyzer. One-click import if you want to pull history from another device.

## What it shows

Open the dashboard and you get:

**Summary row** — Number of URLs tracked, total runs, how many are improving / regressing / stable / new.

**Per-URL cards**, sorted worst-trend-first, each with:

- Latest score + first-run score + run count
- A 30-point SVG line chart showing score-over-time (last 30 runs, oldest on the left)
- Trend classification badge: **Improving (+8)**, **Regressing (-12)**, **Stable (+1)**, or **New**
- Color-coded background bands on the chart (green = 75-100, amber = 50-74, red = 0-49)
- Quick actions: "Re-run audit" (deep-links to Mega SEO Analyzer with the URL pre-filled) and "Delete history"

The dashboard is deliberately read-mostly. It doesn't create data; it renders what's already there.

## The data model — same localStorage key as Mega SEO Analyzer v2

```js
localStorage['jw-mseo-history'] = {
  "https://example.com/": [
    { ts: 1745270400000, overall: 78, dims: [...] },
    { ts: 1745184000000, overall: 73, dims: [...] },
    ...
  ],
  "https://example.com/pricing": [ ... ]
}
```

Every Mega SEO Analyzer run with history enabled adds one entry. Every Scheduled Monitor check adds one entry. The Dashboard reads the key and draws.

The three tools — analyzer, monitor, dashboard — are intentionally decoupled. Each does one thing. They communicate only via the shared storage key. If you stop using any of them, the others still work.

## Trend classification, in plain English

The dashboard classifies each URL based on latest score vs first-recorded score:

- **Improving** = delta ≥ +5 points
- **Regressing** = delta ≤ -5 points
- **Stable** = delta within ±5 points
- **New** = only one run recorded (not enough to trend)

Regressing URLs sort to the top. That's the actionable list.

## Why line charts in SVG instead of Chart.js or D3

I could have pulled in Chart.js (~60 KB minified + gzip) or D3 (heavier). Instead I wrote ~40 lines of vanilla SVG that draws:

- A filled area path (amber-tinted)
- A line path over the top
- One circle per data point with a native `<title>` tooltip showing date + score
- Three background bands showing the 0-49 / 50-74 / 75-100 score zones

This costs ~0 KB extra weight and renders instantly. For the data volume we have (typically 5-50 runs per URL), a full charting library is overkill.

## Export, import, share across devices

localStorage is per-browser-per-origin. Your Chrome-on-laptop history doesn't automatically appear in Firefox-on-desktop or on your phone. For cross-device continuity:

- **Export JSON** — dashboard button writes the entire history to a downloadable `jw-mseo-history-2026-04-22.json` file
- **Import JSON** — upload the file on another browser; dashboard replaces local history with imported data (confirmation required)

If you want always-on cross-device sync, store the JSON in a cloud drive (Dropbox, iCloud Drive, OneDrive), download before running, re-upload after. Crude but works.

For a real multi-device monitoring service, the upgrade path is a server endpoint — I describe it in the [Scheduled Monitor post](/blog/blog-tool-seo-scheduled-monitor/).

## How to use it

1. Go to [/tools/seo-trend-dashboard/](/tools/seo-trend-dashboard/)
2. If you've already run Mega SEO Analyzer v2 with "Save to localStorage history" checked, your URLs appear. Each one with 2+ runs gets a chart.
3. If you haven't, run the [Mega SEO Analyzer](/tools/mega-seo-analyzer/) now with history enabled, then refresh this dashboard.
4. Or run the [Scheduled Monitor](/tools/seo-scheduled-monitor/) — its checks populate the same store.
5. Click **Re-run audit** on any card to open the analyzer with that URL pre-filled and auto-running.

## The read-mostly pattern

This tool deliberately avoids side effects beyond manual user actions (clear all, delete per-URL, import JSON). I want it to be safe to open — looking at your history shouldn't risk changing it.

That's actually a pattern I want to keep using across all future dashboards: audit tools write, dashboard tools read. Keep the two roles separate.

## Pair with the rest of the stack

- **[Scheduled Auto-Monitor](/tools/seo-scheduled-monitor/)** — the paired tool that writes history on a cadence.
- **[Mega SEO Analyzer v2](/tools/mega-seo-analyzer/)** — the primary writer; full 8-dimension audit.
- **[Code-Diff Patch Generator](/tools/code-diff-patch-generator/)** — for fixing what the trend reveals is slipping.
- **[Internal Link Equity Flow](/tools/internal-link-equity-flow/)** — for diagnosing WHY a page dropped when it's not a coding issue.

## Related reading

- [Scheduled Auto-Monitor walkthrough](/blog/blog-tool-seo-scheduled-monitor/) — the paired monitor tool
- [Mega SEO Analyzer v2 — paid-tool parity](/blog/blog-mega-seo-analyzer-v2-paid-tool-parity/)
- [Code-Diff Patch Generator](/blog/blog-tool-code-diff-patch-generator/) — the fixer
- [Internal Link Equity Flow](/blog/blog-tool-internal-link-equity-flow/) — the graph visualizer

## Fact-check notes and sources

- **localStorage spec:** [MDN Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API). 5-10 MB per-origin quota; persistent across sessions.
- **SVG `<path>` and `<circle>` rendering:** native in every browser since IE9.
- **Line chart math:** linear scale of `ts` to x-axis, `overall/100` to y-axis. No external library.
- **ContentKing / Sitebulb longitudinal pricing:** [ContentKing Plans](https://www.contentkingapp.com/plans/), [Sitebulb Pricing](https://sitebulb.com/pricing/) as of 2026-04.

_This post is informational, not engineering or SEO-consulting advice. Mentions of ContentKing, Sitebulb, Chart.js, D3, and similar products are nominative fair use. No affiliation is implied._


---

Canonical HTML: https://jwatte.com/blog/blog-tool-seo-trend-dashboard/
RSS: https://jwatte.com/feed.xml
JSON Feed: https://jwatte.com/feed.json
Hero image: https://jwatte.com/images/blog-tool-seo-trend-dashboard.webp